jQuery
1,选择器
支持所有html和css允许的语法
注意:
(1),操作结果一定是一个伪数组
jQuery获取的伪数组不能直接使用js语法进行操作
js语法获取的标签对象,也不能使用jQuery来操作
(2),转化:
$()[索引] --- jQuery转js,只能是js语法操作
$(js标签对象) --- js转jQuery,只能是jQuery语法操作
(3),纯css语法,按照标签顺序获取
$('ul>li:nth-child(2)') 第二个
纯jQuery语法,按照索引下标获取
$('ul>li:eq(2)') 索引2
2,筛选器
在选择器获取结果的基础上,进行筛选
3,属性操作 获取 设定 删除
prop 操作布尔类型属性使用
attr 操作其他类型属性使用
4,class操作
addClass() 原有基础上新增
removeClass() 原有基础上删除
toggleClass() 切换
hasClass() 判断是否有
5,事件绑定
$().on('事件类型' , 事件处理函数)
$().on('事件类型' , {对象形式传参} , 事件处理函数(e){})
存储在 e.data 中
$().on('事件类型' , 事件委托的对象 , 事件处理函数
$().on('事件类型' , 事件委托的对象 , {对象形式传参} , 事件处理函数(e){})
/*
在 jQuery 中 有一些特殊的事件绑定语法
on语法可以绑定所有的事件,一些特殊事件,可以有特殊的语法
*/
// 1, click 等特殊事件
// 可以直接写事件类型,不用写on方法绑定
// 输出 jQuery标签对象,支持的语法,都定义在 __proto__ 中
console.dir($('div'));
// $('div').click(()=>{
// console.log(123);
// })
// 2, hover() 同时设定移入移出效果
// 第一个参数 : 匿名函数 移入事件处理函数
// 第二个参数 : 匿名函数 移出事件处理函数
// 效果是 enter 和 leave 效果 子级不会触发
// $('div').hover( ()=>{console.log('进进')} , ()=>{console.log('出出')} );
// 3, one() 只会触发一次的事件
// 普通绑定,会一直触发
// $('div').click(()=>{console.log(123)})
// $('div').one( 'click' , ()=>{
// console.log('只触发一次');
// } )
// 4, trigger() 不用触发,直接执行,但是只能直接执行一次
// $('div').click(()=>{console.log(1111)})
// 绑定在这个标签上的,这个事件类型,不会触发会直接执行
// 自动执行,只会触发一次
// $('div').trigger( 'click' )
// 5, $(window).ready() 标签加载完毕,会执行定义的程序
// window.onload 要所有内容都加载完毕,包括图片的加载显示
// $(window).ready() 只需要标签结构加载完毕,就可以执行程序
// 图片不需要加载完,显示完,定义的程序就可以执行
$(window).ready(()=>{
console.log('我是ready输出的内容');
})
window.onload = function(){
console.log('我是onload输出的内容');
}