jQuery
$是jQuery的核心函数
- 传入的参数为函数时,表示页面加载完成之后,相当于window.onload = function(){}
- 传入参数为HTML字符串时,会根据字符串创建这个HTML标签对象
- 传入参数为选择器字符串时:
- $("#id属性值"); id选择器
- $(“标签名”)
- $(".class属性值")
- 传入参数为DOM对象时,会将DOM对象转换为jQuery对象
- DOM对象
- 通过getElementByID/Name/TagNAme等方法查询出来的标签对象时DOM对象
- 通过createElement方法创建出来的对象时DOM对象
- jQuery对象
- 通过jQuery的API创建的对象
- 通过jQuery的API查询到的对象
- 通过jQuery包装的DOM对象也是jQuery对象
- DOM对象
jQuery对象
本质
jQuery对象时DOM对象数组 + jQuery提供的一系列功能函数
jQuery和DOM对象的使用区别
jQuery与DOM对象无法互相使用对方的属性和方法
DOM对象与jQuery对象互转
- DOM对象转化为jQuery对象
- 先有DOM对象
- ${DOM对象} → jQuery对象
- jQuery对象转化为DOM对象
- 先有jQuery对象
- jQuery对象[下表]取出相应的DOM对象
jQuery选择器
基础选择器
#id 选择器
(
"
i
d
"
)
.
c
l
a
s
s
选
择
器
("id") .class 选择器
("id").class选择器(.class)
element 选择器KaTeX parse error: Undefined control sequence: \* at position 11: (element) \̲*̲ 选择器:选择所有元素(*)
selector1, selector2 组合选择器$(“selector1”,“seletor2”):将selector1, 2的查询结果组合到一起,查询结果与查询顺序无关,与页面标签顺序有关
层级选择器
ancestor descendant 后代选择器:在给定祖先元素下匹配所有后代元素
找表单中的input元素$("form input");
parent > child 子元素选择器
找表单中所有子级input$("form > input");
prev + next 相邻元素选择器
找跟在label后的input$("label + input");
prev ~ siblings 之后的兄弟元素选择器
找所有跟表单同辈的input元素$("form ~ input");
过滤选择器
基本过滤选择器
[标签]:first 取匹配到的第一个元素,li标签中的第一个元素$("li:first");
:last
:not(selector) 去除所有匹配元素
:even 匹配索引值为偶数的元素,从零开始
:odd 奇数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 所有大于索引值的元素
:lt(index) 小于
:header 匹配h1,h2等标题元素
:animated 匹配所有正在执行的动画效果元素
内容过滤选择器
[标签]:contains(text) 匹配包含文本的元素
:empty 匹配所有不包含子元素或文本的空元素
:parent 匹配含有子元素或文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
<div><p>Hello</p></div>
<div>Hello again!<div>
$("div:has(p)").addClass("test");
结果:<div class="test"><p>Hello</p></div>
属性过滤器
[标签][attribute] 匹配包含给定属性的元素
[attribute=‘value’] 匹配给定的属性是某个特定值的元素
[attribute!=‘value’] 匹配不含有指定属性,或属性不等于特定值的元素
[attribute^=‘value’] 匹配给定的属性以某些值开始的元素
[attributeKaTeX parse error: Undefined control sequence: \* at position 24: …] 结尾 [attribute\̲*̲='value'] 包含 \[…(“input[id][name=‘gender’]”);`
表单过滤器
:input 匹配所有input,textarea,select和button元素
:text 匹配所有文本输入框
:password 匹配所有密码输入框
:radio 单选框
:checkbox 复选框
:submit
:image
:reset
:button
:file
:hidden
属性操作
有参数时设置,无参数时获取
html() 跟DOM属性innerHTML一样
text() 跟DOM属性innerTEXT一样
val() 跟DOM属性value一样
设置和获取属性值(一个参数时获取,两个参数时设置)
可以操作非标准属性
- attr() 不推荐操作checked、readOnly、selected、disabled等属性
- prop() 推荐操作checked、readOnly、selected、disabled等属性
CSS样式操作
addClass()
removeClass()
toggleClass()
offset()
动画操作
基本动画
show()
hide()
toggle()
淡入淡出动画
fadeIn()
fadeOut()
fadeTo()
fadeToggle()
jQuery事件操作
页面加载完成
$(function(){});和window.οnlοad=functoon(){}的区别
触发时间:
- jQuery在浏览器解析完页面标签,创建好DOM对象后马上执行
- 原生的js除了等DOM创建对象,还要等标签显示时需要的内容加载完成
两事件触发顺序:
- jQuery页面加载完成之后先执行
- 原生js的页面加载完成之后
- 即先完成jQuery再完成元素js
触发次数:
- jQuery的页面完成加载后,会把全部注册的function函数,依次顺序全部执行
- 元素js页面加载完成后,只会执行最后一次的赋值
常用事件处理方法
click() 绑定\触发单击事件,传入参数为function时绑定事件,不传时触发事件
mouseover() 鼠标移入
mouseout() 鼠标移出
bind() 给元素一次性绑定一个或多个事件
one() 和bind一样,但one方法绑定的事件只会响应一次
unbind() 解除事件的绑定
live() 绑定事件,可以用来绑定选择器所匹配的元素的事件,即使这个元素是后面动态创建出来的也有效
事件的冒泡
事件冒泡指,父子元素同时监听同一个事件。当触发子元素事件的时候,同一个事件也传递到父元素的事件里去响应
在事件函数体内,return false;可以阻止事件的冒泡传递
事件对象
事件对象,是封装有触发事件信息的一个JavaScript对象。
我们重点关心的是怎么拿到这个JavaScript对象,以及使用
如何获取事件对象:
在给初始元素绑定事件时,在事件function()参数列表中加入一个参数,这个参数名习惯上取为event,这个event就是JavaScript传递事件处理函数的事件对象
//原生js
window.onload = function(){
document.getElementById("areaDiv").onclick = function(event){
console.log(event);
}
}
//jQuery
$(function(){
$("aredDiv").click(function(event){
console.log(event);
});
});
<body>
<div id="aredDiv"></div>
</body>