jQuery
中文官网 https://jquery.cuishifeng.cn/
jquery语法
$(selector).action()
$('p').html('内容')=p.innerHTML = '内容'
1.基本选择器
(1)元素选择器;$('p').action()
(2)id选择器; $('#id').action()
(3)class选择器; $('.class').action()
(4)群组选择器; $('#id,.class,p').action()
(5)*选择器 $('*').action()
2.层次选择器
选择器 说明
$("M N") 后代选择器,选择M元素内部后代N元素(所有N元素)
$("M>N") 子代选择器,选择M元素内部子代N元素(所有第1级N元素,若N为*表示M元素内部所有元素)
$("M~N") 兄弟选择器,选择M元素后所有的同级N元素
$("M+N") 相邻选择器,选择M元素相邻的下一个元素(M、N是同级元素,若下一个元素相同也会被选中)
3.属性选择器
选择器 说明
$("selector[attr]") 选择包含给定属性的元素
$("selector[attr='value']") 选择给定的属性是某个特定值的元素
$("selector[attr != 'value']") 选择所有含有指定的属性,但属性不等于特定值的元素
$("selector[attr *= 'value']") 选择给定的属性是以包含某些值的元素
$("selector[attr ^= 'value']") 选择给定的属性是以某些值开始的元素(比较少用)
$("selector[attr $= 'value']") 选择给定的属性是以某些值结尾的元素(比较少用)
$("selector[selector1][selector2]…[selectorN]") 复合属性选择器,需要同时满足多个条件时使用
4.伪类选择器
简单伪类
jQuery简单伪类选择器
:not(selector)选择除了某个选择器之外的所有元素
:first或first()选择某元素的第一个元素(非子元素)
:last或last()选择某元素的最后一个元素(非子元素)
:odd选择某元素的索引值为奇数的元素
:even选择某元素的索引值为偶数的元素
:eq(index)选择给定索引值的元素,索引值index是一个整数,从0开始
:lt(index)选择所有小于索引值的元素,索引值index是一个整数,从0开始
:gt(index)选择所有大于索引值的元素,索引值index是一个整数,从0开始
:header选择h1~h6的标题元素
:animated选择所有正在执行动画效果的元素
:root选择页面的根元素
:target选择当前活动的目标元素(锚点)
子元素伪类选择器
(1)
:first-child选择父元素的第1个子元素
:last-child选择父元素的最后1个子元素
:nth-child(n)选择父元素下的第n个元素或奇偶元素,n的值为“整数]odd|even"
:only-child选择父元素中唯一的子元素(该父元素只有一个子元素)
(2)
:first-of-type选择同元素类型的第1个同级兄弟元素
:last-of-type选择同元素类型的最后1个同级兄弟元素
:nth-of-type选择同元素类型的第n个同级兄弟元素,n的值可以是“整数|odd|even”
:only-of-type匹配父元素中特定类型的唯一子元素(但是父元素可以有多个子元素)
//其中,第1类选择器不分元素类型,第2类选择器区分元素类型。第2类选择器只是比第1类选择器多了一层“type(元素类型)”的限制。
可见性伪类选择器
jQuery可见性伪类选择器
:hidden选取所有不可见元素
:visible选取所有可见元素,与:hidden相反
":hidden"选择器选择的不仅包括样式为display.none所有元素,而且还包括属性type="hidden"和样式为visibility:hidden的所有元素。
在jQuery中,可见性伪类选择器用得比较少,了解。
表单属性伪类
表单属性伪类选择器,就是根据表单元素的标签属性来选取某━类表单元素。
jQuery表单属性伪类选择器
:checked选择所有被选中的表单元素,—般用于radio和checkbox
option:selected选择所有被选中的option元素
:enabled选择所有可用元素,一股用于input、select和textarea
:disabled选择所有不可用元素,一股用于input、select和textarea
:read-only选择所有只读元素,一般用于input和textarea
:focus选择获得焦点的元素,常用于input和textarea
5.查找方法
查找祖先元素 parent()、parents()、parentsUntil()
查找后代元素 children()、find()
向前查找兄弟元素 prev()、prevAll()、prevUntil()
向后查找兄弟元素 next()、nextAll()、nextUntil()
查找所有兄弟元素 siblings()
选择元素集合中指定下标的元素 eq(n) 注:下标从0开始
查找元素集合中第一个和最后一个元素 first() last()
查找元素在父元素里面索引位置 index()
6基础动作action
内容操作
$().html() innerHTML
$().text() innerText
$().val() value
属性操作
给一个元素添加某个属性 $().prop()
给一个元素添加某个自定义属性 $().attr()
移除元素的某一个属性
attr与prop区别
$(selector).attr(属性名,属性值)$(selector) .attr(属性名)
->返回属性值
$(selecytor).prop(属性名,属性值)$(selecytor).prop(属性名)
-→>返回属性值
prop与attr区别
=>prop在获取单选框&复选框选中状态的时候
=> true
=attr在获取单选框&复选框选中状态的时候
=> checed
-jquery获取单选框选中状态
=>$( "input[name=sex] : checked " ).prop( " checked " )
操作样式
$().css()
$().addClass()
$().removeClass()
$().toggleClass()
操作元素的类名
//判断某—个元素有没有某—个cLass
$( 'div' ).hasClass( "box") // true表示该元素有 box类名,false表示该元素没有 box类名
//给元素添加—个类名
$( 'div " ).addClass( " box2')//给div元素添加—个box2类名
//移除元素的类名
$("div" ).removeClass( " box " )//移除div 的box类名
//切换元素类名
$( 'div' ).toggleclass( ' box3')//如果元素本身有这个类名就移除,本身没有就添加
操作事件
//给button按钮绑定—个点击事件
$( "button" ).on(" click ",function ({
console.log("我被点击了")
})
//给button按钮绑定一个点击事件,并且携带参数
s( "button" ).on("click" , [ name: "Jack" ],function (e) {
console.log(e)1/所有的内容都再事件对象里面
console.log(e.data)// { name : "Jack ’ }
})
//事件委托的方式给button绑定点击事件
$("div" ).on( "click" , "button " , function () {
console.log(this) // button按钮
})
//事件委托的方式给button绑定点击事件并携带参致
$( 'div').on( "click " , " button " , {name: "jack"} ,function (e){
console.log(this) // button按钮
console.log(e.data)
})
移除事件
$(selector).off("事件名", "函数")
$(selector).off()//移除所有事件
只能执行一次的事件
//这个事件绑定再 button按钮身上
//当执行过一次以后就不会再执行了
$('button ').one( ' click ' , handler)
直接触发事件
//当代码执行到这里的时候,会自动触发—下button的click事件
$( 'button').trigger('click')
可以直接绑定常用事件
click
blur
focus
hover
//这个事件要包含两个事件处理厨数
//—个是移入的时候,—个是移出的时候触发
$('div ').hover(
function () {
console.log( '我会再移入的时候触发')},
function () {
console.log( '我会在移出的时候触发')})
scroll
加载完执行
$(selector).ready(function(){})
window.onload(function(){})
$(function(){})
jquery $(document).ready() 与window.onload的区别
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕
2.编写个数不同
indow.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行
链式写法Chaining
链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。
$("p").first().css("color","red").html('内容')
遍历节点
$('li').each((index,item)=>console.log($(item) , index))