Jquery的安装和使用
安装:
下载JQuery文件并把文件放到web项目中
下载网址:http://jquery.com
使用:
直接引入jQuery的核心JS文件
![f0b1f4da9b29fb8ccd9429b0e39a8e71.png](https://i-blog.csdnimg.cn/blog_migrate/361980d9771e12118af36bf4eb922e95.png)
注意:
(1)引入jQuery的script标签可以放在推荐放在body标签后
(2)如果script标签设置了src属性,则在script双标签中写的js代码无效
4.常用操作:
![7e771d181c984b0975440e9bf2249253.png](https://i-blog.csdnimg.cn/blog_migrate/0b812af53c68c25510f0a40272f36de9.png)
![013960ee08cb142995e8505b98edc2db.png](https://i-blog.csdnimg.cn/blog_migrate/a4e799f036761942f77179cad2f35d0b.png)
5.DOM对象与jQuery对象之间的相互转换:
(1)DOM ===> jQuery
在DOM对象外面包装JQery $(dom对象)
(2)JQuery ===> DOM
JQuery包装集取下标 JQuery包装及对象[0]
JQuery中的each()遍历函数:
each(fucntion):
![86aceed47e29e5a5dbd91fdaa0642df7.png](https://i-blog.csdnimg.cn/blog_migrate/1abf019f5fc2047b176edb841feb7394.png)
this:谁调用函数,this指代谁
jquery和js获取节点的区别
Js:如果节点不存在返回null
jQuery:如果节点不存在返回空包装集对象
所以判断jQuery对象是否存在需要用到length
JQuery选择器
基础选择器Basics(掌握即可)
![d0220fdcf3b804a59f1074326dde723b.png](https://i-blog.csdnimg.cn/blog_migrate/6aba9f480962bd38a42e3c4f7917a921.png)
举例:假设body中有这些元素
![5d1dfa7042afb91402bf35240fbbec14.png](https://i-blog.csdnimg.cn/blog_migrate/449340e34335a44da6c1c6a4e6c3cad3.png)
用基础选择器依次对其操作
Id选择器 $("#id属性值")
![1ba2dbb03f0c0e64e180c3eb66959d54.png](https://i-blog.csdnimg.cn/blog_migrate/bdf70b2545b97c914137e32dcc248a8d.png)
类选择器 $(".class属性值")
![70b2983113315909edb79ef018973318.png](https://i-blog.csdnimg.cn/blog_migrate/dc68eb274bff98d53ecebabb2de5956a.png)
元素选择器 $("元素名/标签名")
![8762092c5601e2caa3513a058b01f7a2.png](https://i-blog.csdnimg.cn/blog_migrate/366b36215489935f5f1c4cc4851454ab.png)
选择所有选择器 $("*")
![90398e58c51ccdcaef79972824369205.png](https://i-blog.csdnimg.cn/blog_migrate/0b1f3d203ef91996679d520b939d6dcf.png)
组合选择器 $("选择器1,选择器2...")
![2b31d4e20ee669a23c76a7f8929b9a17.png](https://i-blog.csdnimg.cn/blog_migrate/043f0fb039c23ac3e6029e42a69a6a57.png)
层次选择器
![c02206df0cd699b32ab5f09af52606a1.png](https://i-blog.csdnimg.cn/blog_migrate/996f9d7ff29c28579a30a7c9523072a5.png)
举例:假设body中有这些元素
![8b2413d851043030f744c6e6a30fb99b.png](https://i-blog.csdnimg.cn/blog_migrate/9b198ab37d4e94bbccb5c4484b41203c.png)
用层次选择器依次对其操作
后代选择器 ncestor descendant、
![7581350eb8740aa399f54e3e0e570bce.png](https://i-blog.csdnimg.cn/blog_migrate/859f9e052f9cbee28f540482eb4df9d6.png)
子代选择器 parent>child
![bea50832ba4338430ef8e5fa5e3080cb.png](https://i-blog.csdnimg.cn/blog_migrate/d7da59817b141eae3c4995511ebe66a4.png)
相邻选择器 prev + next
![1284f0d5f72ef3b39aa76211ad4a2bb9.png](https://i-blog.csdnimg.cn/blog_migrate/d5e45a698038a615f4b82d3c6c967cc4.png)
同辈选择器 prev ~ sibling
![db2195f911231f582736716b19e97b6a.png](https://i-blog.csdnimg.cn/blog_migrate/fffc2dc18776c828bbf773ff5a6aa70e.png)
注意:
相邻选择器是选择与当前元素同级的下一个相邻元素
同辈选择器是选择与当前元素同级的后面的左右元素
其他选择器
表单选择器
![2c6b18c68ae10888fdfbefa5e6c6fbdd.png](https://i-blog.csdnimg.cn/blog_migrate/e4e57a86fe0db8b3c1412543473e2a34.jpeg)
过滤选择器
$(":input") 选择所有的表单元素 (文本框、密码框、下拉框、文本域等....)
$(":input") 选择所有input标签元素
$(":checked") 选择所有选中状态的元素(单选框和复选框)
$(":checkbox:checked") 选择所有复选框被选中的元素
$(":checkbox:checked:gt(0)") 选择下标大于指定值的元素
$(":checkbox:checked:eq(0)") 匹配被选中的选择的指定下表元素
$(":checkbox:checked").eq(1) 同上
$(":odd") 选择所有基数下标的元素
$(":even") 选择所有偶数下标的元素
属性选择器
$(“[属性名]”) 选择所有设置过指定属性的元素
$(“[属性名=属性值]”) 选择属性名等于指定值的元素
jQuery的DOM操作
操作元素的属性
假设body中有这些元素
![7ec08e0729a99c8b12bd35b32b0e6258.png](https://i-blog.csdnimg.cn/blog_migrate/14c4364605225f5dc38fd8c2681b19f9.png)
方法
<1>获取属性
![e2ad2a26064821be1c0de6bb9b9d976a.png](https://i-blog.csdnimg.cn/blog_migrate/474d3e52c4aebd876c64a85104fb0a09.png)
固有属性:元素本身就有的属性
![de269393b8d6d5d1982e914dd3107422.png](https://i-blog.csdnimg.cn/blog_migrate/6495c53b17ef104955f113505da0ebbf.png)
自定义属性:
![88f1d07ed3837348f88a8a3160ae6d85.png](https://i-blog.csdnimg.cn/blog_migrate/1a081fd3f484ce40f7bac5d6a3455f54.png)
返回值是boolean类型的属性:
![571a5a3693899d87ca6050342434cf66.png](https://i-blog.csdnimg.cn/blog_migrate/b2266c06541acf019c44d384410dc097.png)
未设置过的checked属性:
![2f4af8de2163d417636a1ec0dae6da68.png](https://i-blog.csdnimg.cn/blog_migrate/bd482cc2318527b612442e1b61113874.png)
<2>设置属性
![af5e74f23e1ea72988675f2a1e24ed32.png](https://i-blog.csdnimg.cn/blog_migrate/f761630231254a093eaf94bd3ad58d94.png)
固有属性:元素本身就有的属性
![66540f9ff491a976a44fb87a62b9b98e.png](https://i-blog.csdnimg.cn/blog_migrate/ff801140988e1427803faf85b9780548.png)
自定义属性:
![c549154aa328a335a6f189c49985cde9.png](https://i-blog.csdnimg.cn/blog_migrate/3872544b7a624d2cd42755ae0b2e7df2.png)
返回值是boolean类型的属性:
![b87e3c49887f5a44fd6eebc41133dcf4.png](https://i-blog.csdnimg.cn/blog_migrate/9f6d32f856201a5dc0a2e4e355dc72a6.png)
<3>移除属性
![601fb4c15f11a85f050bbca1c702974f.png](https://i-blog.csdnimg.cn/blog_migrate/d54cb056fb85ff52e99077c1ccf31a98.png)
![1613b3df9397d34829155dc418c3a1b0.png](https://i-blog.csdnimg.cn/blog_migrate/4ccba41982ff406692e9b2930ac2c6eb.png)
区别
1、固有属性:attr()和prop()都可使用
2、自定义属性:attr()可用,prop()不可用
3、返回值是boolean的属性:
attr():如果设置过,则返回具体值,若未设置过,返回undefined
prop():返回true和false
返回值是boolean类型的属性:
checked(单选和复选选中状态)、selected(下拉框选中状态)、disabled(禁用)
总结:
返回值是boolean类型的属性,使用prop();其他的属性使用attr()
操作元素的样式
(1)方法
![e06e91d6a75f4430b7cb1c845d42727b.png](https://i-blog.csdnimg.cn/blog_migrate/dd240127b49b19fcb09f30323ebb491b.png)
(2)实例
假设元素和样式为以下
![af1fba8b97b830669652899d9832fbe5.png](https://i-blog.csdnimg.cn/blog_migrate/cd9bbe58843089167a5cce3d1eb6784e.png)
![5885826dd3f10daced757522ece35c77.png](https://i-blog.csdnimg.cn/blog_migrate/5fcb64dac7866d07259a3613a9184d39.png)
attr(“class”) 获取 class 属性的值,即样式名称
![4e87033ce1594bcfedf8296c94a83682.png](https://i-blog.csdnimg.cn/blog_migrate/6a517511a442810586832afb9243c1bc.png)
attr(“class”,”样式名”) 修改 class 属性的值,修改样式
![9275028da381a69eb7ac445a6c84cc34.png](https://i-blog.csdnimg.cn/blog_migrate/74bbcec92f1b297972b94c458c8e73a6.png)
addClass(“样式名”) 添加样式名称
![56d689538d00ed5933b36983be3914a2.png](https://i-blog.csdnimg.cn/blog_migrate/5145ae91522ef565787d3179ab2798f5.png)
css() 添加具体的样式 (定义在style属性中的样式)
设置一个样式 css("样式名","样式值")
![d2c557f8b720272db6c8359612ea4bd7.png](https://i-blog.csdnimg.cn/blog_migrate/4030033c6462c52eb4f933b758df0eb9.png)
同时设置多个样式
![ea69503c14803742510b4c35bd1d7ea5.png](https://i-blog.csdnimg.cn/blog_migrate/34f00d888382a93ecc24aeec86b04f09.png)
removeClass(class) 移除样式名称
![fc548e02cb8f4d09560fd4117d3262e2.png](https://i-blog.csdnimg.cn/blog_migrate/319cadfdfb1a30c965999dca90034a00.png)
操作元素的内容
方法
![44b97742625bd10cd621b19c500df902.png](https://i-blog.csdnimg.cn/blog_migrate/43c279a85d8728174eedc31fad2c00c3.png)
实例
对以下代码进行操作
![c146670edcc6cc51e8d591abf1ec12ad.png](https://i-blog.csdnimg.cn/blog_migrate/74f58ea83cc64ddc2d088dc1331e55fc.png)
设置
![7f405c3ed932277bcf154e2ee6b9f876.png](https://i-blog.csdnimg.cn/blog_migrate/550fd837f9f1298152116b445cb41cf2.png)
![1f392e605fe6f5f114ffd52a14ea6db9.png](https://i-blog.csdnimg.cn/blog_migrate/53be567db91857362de4217ea0b3d88d.png)
取值
![24f01977aef9ad9fc21c8fb27da2da89.png](https://i-blog.csdnimg.cn/blog_migrate/72e1d6c91845aad89a164bfd269ef897.png)
![22e66f4021f9ebe19504ca73cd21e703.png](https://i-blog.csdnimg.cn/blog_migrate/9948c5bd34ba3fcf4889a848ce1f0493.png)
添加元素
方法
![80f7e5fdc82970e2389156acb0b1f9f4.png](https://i-blog.csdnimg.cn/blog_migrate/82f4add891c0d082908173a932e8504b.png)
![c0e6d81285a7d0242464f67b5a57b9af.png](https://i-blog.csdnimg.cn/blog_migrate/abf5ae8411cdbb19a320c4f35a61bbd5.png)
删除元素
(1)方法
![0313dc96cedba402926c281a9fb3f2b6.png](https://i-blog.csdnimg.cn/blog_migrate/2c6b8f2a26f1e4199c12761f45878132.png)
(2)实例
![bb9c99bad883aeb7b3ad81df82c43f27.png](https://i-blog.csdnimg.cn/blog_migrate/c0f6e6bd63b1b0be24781ae9acba5c15.png)
遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数,
index 为遍历元素的序列号,从 0 开始。
element 是当前的元素,此时是 dom 元素。
![fa624b42b43c311bf28a66c69da7401c.png](https://i-blog.csdnimg.cn/blog_migrate/5374a601f9057409a1e26bf1bc3a14c6.png)
jQuery事件
ready加载事件
onload事件与ready事件的区别:
当Dom结构加载完毕后,ready事件就执行;
当Dom结构加载完毕,并且引入的外部文件加载完毕,onload事件才会执行
ready事件可以同时写多个,按顺序执行
语法:$(document).ready(function(){});
缩写版:$(function(){});
![e5005677d2e115c53693bd44645397dc.png](https://i-blog.csdnimg.cn/blog_migrate/0e69146817c449fbc14c93ccf80baefa.png)
![481d7b8edd1f2b4daeda91daa971ef70.png](https://i-blog.csdnimg.cn/blog_migrate/2236f2be9eeb05201321df113eb87b60.png)
bind()绑定元素事件
为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件(事件类型)
第一个参数:事件的类型
3.相应事件触发的,执行的操作
第二个参数:函数
实例:对以下按钮进行不同绑定事件
![e78ca130cf651fa4f9b2ae970c5aad89.png](https://i-blog.csdnimg.cn/blog_migrate/c600ee85429a60f926d0d6bdc2352d28.png)
- 简单的bind()事件
![a6df3ecb9e7bfa6a9e4c6614a2edd672.png](https://i-blog.csdnimg.cn/blog_migrate/aac4988ac16fdd8e6bb8c7c30a86aef4.png)
- 原生的js点击事件
![de48c2a794402ce294821060faa89cb7.png](https://i-blog.csdnimg.cn/blog_migrate/e7cb752168f2f6310f91f6d9df7f409c.png)
- 多个事件绑定同一函数
普通形式(多个事件绑定同一函数)
![7ae031bd70a101991b4d6d9e826b38f2.png](https://i-blog.csdnimg.cn/blog_migrate/b64c2029c1fc83efbf7c4473eaf353bd.png)
bind链式编程形式(多个事件绑定不同函数)
![8f8e032f4f59ae920cd81dc7053813ff.png](https://i-blog.csdnimg.cn/blog_migrate/40cae854fadf5eddff094fcd80597e03.png)
简洁常用形式
![8cc163be4c934dbdd11acc1cbd221473.png](https://i-blog.csdnimg.cn/blog_migrate/320111558c0d9bafcdf03ee094d2f286.png)