JavaScript jQuery讲解

1.什么是jQuery

jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改

2.为什么要使用jQuery

目前网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的 JS 代码库，而且提供了大量的扩展。 很多大公司都在使用 jQuery Google Microsoft IBM Netflix

jQuery的引入方式

✨那就然我们写一个jQuery最基础的代码吧

$(document).ready(function (){

alert("弹出")

})

✨这就是一串很简单的jQuery的代码了，他是什么意思呢，首先美元符号$表示选择器，选中了document(所有文本文档)就是所有的代码，然后ready(准备)说有的代码准备弹窗。

✨那我们在演示一个串代码吧。 JS代码演示

window.onload=function (){

var p2=getElementById("p2")

p2.style.color="red"

}

window.onload=function(){

var ps=document.getElementsByTagName("p")

for (i=0;i<=ps.length;i++){

ps[i].style.backgroundColor="green";

}

}

//HTML部分

//

1

//

2

//

3

//

4

jQuery代码演示

$(function)(){

$("p").css("backgroundColor","green")

}

我们不难发现出他们两个是都是然所有的P标签的背景颜色都变成绿色 但是JS得代码量很多，而jQuery的代码量才3行所以这就是我们也可以理解为jQuery是JS得偷懒版

那我们来看看jQuey的选择器吧，其实jQuey的选择器也是非常简单的它和css的选择器非常相似就比如$("p")意思就是选择了我的HTML里面的所有P标签然后.css("backgroundColor","green")需要做的操作改变所有P标签的背景颜色。

二、接下来就然我们来看看jQuery有哪些选择器吧。

//jQuery选择器

$("选择器")

名称用法描述标签选择$(“div”)获取和它一样属性的选择器ID选择器$(“#id”)获取已经取过id名的选择器类选择器$(“.class”)获取同一类属性的选择器并集选择器$(“.div,p,li”)指定多个元素的选择器交集选择器$(“li.current”)选取交集元素全选，选择器$(“li.current”)获取所有元素

后面还有很多选择器到后面我会给大家一一演示的

示例

1.什么是jQuery2.为什么要使用jQuery

示例1示例2示例3示例4方式一方式二其他的选择器（补充）

示例1

标签选择器的用法 css代码

td{

border: 1px solid black;

}

HTML代码

jQuery代码

$(function){

$("tr":odd).css(""backgroundColor","red"")

}

运行结果 代码意思呢就是选中了所有的tr元素，然所有的列表行 中的偶数 把背景图编程红色。当然啦有偶数自然也有奇数我们只需要把odd改成even就好啦 这就是奇数的代码啦

$(function (){//奇数

$("tr:even").css("backgroundColor","pink")

})

运行结果为：

示例2

类选择器

1

2

3

$(function {

$(".p2").css("backgroundColor"，"red")

})

将我取的class类名的元素的背景颜色变成红色。这个选择器可以准确的选中要改变的元素。类选择器可以重复命名，就是说有两个元素都class类名都是一样的话那么他们两个的背景颜色都会转变为红色。

示例3

ID选择器

1

2

3

$("#p3").css("backgroundColor","pink")

id选择器和类选择器其实都差不多，他们的功能都是将，给元素起好的名字进行操作，但他们不同的一点事id选择器太不可以重复取名，他在整个html代码里面只能是唯一的，否者就好报错，就相当于和平精英每个玩家都有着属于自己唯一的 id名称如果和别的玩家的id重复了就不行了吗。

示例4

是用选择器实现一个点击点击显示，再次点击隐藏的效果代码如下。部分展示

什么是受益人

受益人是由投保人或者被保险人在保险合同

$(function (){

$(".dd").hide()

$("#f1").click(function (){

$(this).css("backgroundColor","pink")

$(this).next().show();

})

})

$(function (){

$(".dd").click(function (){

$(".dd").hide()

})

})

这里我们可以看到一些新的语法，hide(隐藏)，click(点击)执行function函数里面的操作选择this(引用的是全局象)$(this).css("backgroundColor","pink"),$(this).next().show();属于链式操作操作一连串的给连起来。 专业解释： jQuery链式操作是指将多个jQuery方法调用链接在一起，每个方法的返回值都是一个jQuery对象，可以连续调用其他的jQuery方法。这种方式可以简化代码，提高代码的可读性。

点击显示 运行结果

再次点击隐藏

在script中写HTML

方式一

普通方式，html代码

JS代码

function bbchs(){

var bbc=document.getElementsByClassName("ddct")[0]

bbc.innerHTML="script普通方法"

}

方式二

iQuery代码

$(function (){

$(".yyt").click(function (){

var ttk=document.getElementsByClassName("ttaeg")[0]

ttk.innerHTML="jQuery方法"

})

})

他们两个属于两种方式，但是结果都是一样的，它们只是方式变了但是结果都是一致的。 代码讲解：html中有div元素，还有一个按钮，在按钮中我们设置一个点击事件，当我点击我的按钮是他会执行JS的函数事件，第一步获取到div的类名因为class类名会返回一个数组，所以要在最后面标识一个0,0是数组的下标。然后，在用,innerHTML的代码写入内容。

运行结果为

其他的选择器（补充）

 1、属性选择器（Attribute Selector）：通过元素的属性来选择元素，比如$(“[name=‘myName’]”)表示选择name属性值为myName的元素

2、后代选择器（Descendant Selector）：通过上级元素的选择器来选择下级元素，比如$(“.myClass span”)表示选择class为myClass的元素内的所有元素。

3、子元素选择器（Child Selector）：通过上级元素的选择器来选择直接下级元素，比如$(“.myClass > span”)表示选择class为myClass的元素下的所有直接子级元素。

4、过滤选择器（Filter Selector）：根据指定条件来选择元素，比如:first表示选择第一个元素，:last表示选择最后一个元素，:even表示选择偶数位置的元素，:odd表示选择奇数位置的元素。

此外，还有许多其他选择器，比如选择可见元素、选择隐藏元素、选择表单元素等。可以根据具体需求选择合适的选择器来选取元素。

。

精彩链接

 您阅读本篇文章共花了：