jQuery基础

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))