jQuery介绍Ⅰ

最新推荐文章于 2025-04-05 20:06:59 发布

原创最新推荐文章于 2025-04-05 20:06:59 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #jquery

了解jQuery

	jQuery是一个前端的类库

前人栽树，后人乘凉。他是大佬们把Javascript中的各种DOM操作帮我们封装成了一个方法库，供我们使用。它可以用来获取DOM元素，操作元素的类名，操作元素的属性，操作元素的样式等。

jQuery的优点

1.无所不能的选择器；
2.无处不在的隐式迭代；
3.无与伦比的链式编程；
4.全兼容；

使用

http://jquery.cuishifeng.cn/
这个是jQuery 的中文网站，首先在这个网站上下载代码包，放入我们的项目文件夹中，在页面中引入 jquery.js 或 jquery.min.js 就可以使用jQuery的方法了。

jQuery的筛选器

用在 jQuery 选择的元素集合后面，这些都是方法，为了对已经选择出来的元素进行二次筛选。

$(‘li’).first() 筛选出来一个元素集合里面的第一个
$(‘li’).last() 筛选出一个元素集合里的最后一个
$(‘li’).eq(n) 筛选出一个元素集合里面的索引为 n 的那一个
$(‘li’).next() 筛选出元素的下一个兄弟元素
nextAll() 筛选出元素的后面的所有兄弟元素
nextAll(选择器) 拿到下面所有兄弟元素中符合选择器要求的元素
nextUntil(选择器) 筛选出元素后面所有的兄弟元素知道选择器元素位置
prev() 筛选出元素的上一个兄弟元素
prevAll() 筛选出元素的上面所有兄弟元素
pervAll(选择器) 拿到上面所有兄弟元素中符合选择器条件的元素
prevUntil(选择器) 筛选出元素上面的所有兄弟元素知道选择器元素为止
parent() 筛选出元素的父元素
parents() 筛选出元素的所有祖先元素，直到 html 元素为止
parents(选择器) 找到所有祖先元素中满足选择器的哪一个
parentsUntil(选择器) 筛选出元素的所有祖先元素，直到选择器元素为止
children() 筛选出元素的所有子级元素
children(选择器) 筛选出所有子元素里面符合选择器条件的元素
siblings() 筛选出所有的兄弟元素，自己不算
siblings(选择器) 拿到所有兄弟元素中满足选择器要求的元素
find(选择器) 在一个元素的后代元素中查找对应选择器的元素
index() 获取到元素的索引位置，得到的是一个数字。

jQuery操作文本内容

html()
一个读写的方法，不传递参数的时候，就是获取元素内部的超文本内容传递一个参数的时候，就是设置元素内部的超文本内容

text()
一个读写的方法，不传参的时候，就是获取元素内部的内容传递一个参数的时候，就是设置元素内部的文本内容

val()
一个读写的方法，操作 input标签，不传参的时候，就是获取标签 value 值传递一个参数的时候，就是设置标签的 value 值

jQuery 操作元素类名

addClass() 添加类名
执行这个方法会给元素集合里面的所有元素添加上固定的类名，如果有就不添加

removeClass() 移除类名
执行这个方法会给元素集合里面所有的元素删除固定的类名

toggleClass() 切换类名
执行这个方法会给元素集合里面的所有元素切换类名，本身有这个类名，就删除，本身没有就添加

hasClass()
判断有没有某一个类名，返回一个布尔值

jQuery 操作元素样式

       1.css('样式名称')
                获取元素的样式值，不管是行内样式还是非行内样式都能获取
                css('width')

       2.css('样式名称','样式的值')
                css('width','200px')
                设置元素的样式值，元素集合能获取多少个元素就设置多少个元素
                单位写不写都无所谓

       3.css(对象)
                css({
                    width:100,（不写单位默认是  px）
                    height:'200px',
                    opacity:0.5
                })
                批量设置 css 样式
                给元素集合里面的所有元素，批量设置样式

jQuery 操作元素属性

	attr() 是一个读写的方法
		attr(要读取的属性名)：传递一个参数的时候是读取；
		attr(属性名，属性值)：传递两个参数的时候是设置；
	removeAttr(属性名)		移除属性

attr方法的注意：
所有的属性都会显示再标签上（原生属性和自定义属性），无论我们设置的是什么数据类型，都会被转换为字符串。

	prop() 也是一个读写的方法
		prop(要读取的属性名)：传递一个参数是读取
		prop(属性名，属性值)：传两个参数是设置

	removeProp()  移除属性

prop方法的注意：
prop设置的属性非原生属性，不会显示再标签上，但是可以正常获取使用，设置的是什么数据类型，获取时就是什么数据类型，removeProp无法删除原生属性，如id、class

	data() 是一个读写的方法
	data(要读取的属性名)：一个参数是读取；
	data(属性名，属性值)：两个参数是设置；
	
	removeData()  删除data 设置的属性

	data（）方法能读取写在标签上的 H5 标准的自定义属性 data-xxx
                <div data-id="box"></div>
                $('div').data('id') //box

jQuery绑定事件

on()方法专门用来绑定事件，是jQuery中通用的事件绑定方式，通过传递不同的参数来达到不同的效果。

on(‘事件类型’,事件处理函数) 给元素集合内所有的元素绑定一个事件；
on(‘事件类型’,‘事件委托’,事件处理函数)把事件委托位置的元素的事件委托给了前面的元素集合
$(‘ul’).on(‘click’,‘li’,function{
console.log(‘我被点击’)
})//所有li 标签设置了事件委托委托给了 ul
on(‘事件类型’,复杂数据类型,事件处理函数) 给每一个元素绑定一个事件，复杂数据类型是触发事件时传递的参数；
on(‘事件类型’,‘事件委托’,任意数据类型,事件处理函数)
也是一个事件委托形式，第三个参数是触发时间时传入的参数；
on(对象)一次绑定多个事件
$(‘ul’).on({
click:function(){console.log(‘dianji’)},
mouseover:function(){console.log(‘yiru’)},
mouseout:function(){console.log(‘yichu’)}
})
```
one（）方法用来绑定一个只能执行一次的方法，用法和on方法类似。
```