1.事件
jQuery对DOM事件的监听进行了封装,分为以下三种:
第一种:快捷方法
$('input').click(function () {
console.log('this')
}) //this指向dom对象
第二种:基础方法(推荐)
//on 或者 bind是绑定事件
$('input').on("click",function () {
console.log('点击点击')
// })
//off 或者 unbind是解绑事件
$('input').off("click")
//一次性事件
$('button').one('click', function () {
console.log('付款中...');
})
bind和unbind老版本,用法和on、off一样
第三种:自定义事件—>只能通过trigger触发
$('input').on('myevent',function () {
console.log('自定义事件')
})
$('input').trigger('myevent')//trigger用于自动触发事件
★★★基础方法和快捷方法的区别:
1.on可以同时绑定多个事件
// 添加多个事件,处理函数相同
$('input').on("click mouseleave",function () {
console.log('点击点击')
})
//添加多个事件,处理函数不同
$('input').on({
click:function(){
console.log(1)
},
mouseleave:function(){
console.log(2)
}
})
2.即使是动态创建的元素,也会有事件的
$('<li>新的</li>').appendTo('ul')
$('ul').on('click','li',function(){
this.style.color='red'
})
3.on能实现事件委派,事件委派时,this指向的是需要执行样式的元素
$('ul').on('click','li',function(){
this.style.color='red'
})
2.样式:
行内样式(css方法)
是通过行内样式改变的,
想加什么样式,就通过css 写属性名,值
$('input').css({
background:'red',
color:'blue',
height:'100px',
transform:'scale(.2)',
'font-size':66,//js中没有-,复合属性给属性加引号,或者是改成小驼峰
})
类名操作
jQuery 中封装了为网页元素添加、移除、检测、切换类名的方法。
$('input').click(function(){
// 添加类:addClass
$('div').addClass('c2')
// 移除类:removeClass
$('div').removeClass('c2')
//切换类名:toggleClass
$('div').toggleClass('c2')
//检测类名:hasClass
console.log($('div').hasClass('c2'))
})
3.链式:
原理:在方法执行完成之后返回他的调用者
一种简便的语法结构,从左到右依次执行
$('button').click(function () {
// 连续调用多个实例方法
$('.box')
.css('width', 240) // 改变 style 属性
.addClass('active') // 添加类名
.click(function () { // 添加单击事件
$(this).off('click');
console.log('单击事件被触发...');
})
})
4.查找
父子关系
find方法:找某个后代
children:只找儿子
parent:找父亲
parents:找祖先
// find方法:找某个后代
console.log( $('.box').find('.p2'))
//children:只找儿子
// 不加参数找到所有儿子,加参数找到对应的儿子
console.log( $('.box').children('div'))
//找父亲
// 文档document最大 jswindow最大
console.log( $('.box2').parent().parent().parent())
//上级(祖先)元素:
console.log( $('.box2').parents())
兄弟关系
siblings方法 找到所有兄弟
prevAll:前面的所有兄弟
prev:前一个兄弟
nextAll:后面的所有兄弟
next:后一个兄弟
// siblings方法 找到所有兄弟
$('.box2').siblings().css('background','red')
// prevAll:前面的所有兄弟
// prev:前一个兄弟
// nextAll:后面的所有兄弟
// next:后一个兄弟
<body>
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li class="li4">11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li class="li8">11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</body>
<script>
$('.li8').siblings().css("background",'skyblue')
$('.li8').prevAll().css("background",'red')
$('.li8').prevAll('.li4').css("background",'blue')
$('.li8').prev().css("background",'pink')
$('.li8').nextAll().css("background",'green')
$('.li8').next().css("background",'yellow')
</script>
筛选
first:筛选出第一个
last:筛选最后一个
eq:根据索引值筛选某一个元素
// first:筛选出第一个
$('li').first().css('color','red')
// last:筛选最后一个
$('li').last().css('color','yellow')
// eq:根据索引值筛选某一个元素
$('li').eq(2).css('color','orange')
// 扩展:
$('li:eq(5)').css('color','orange')
属性
prop:操作固有属性
attr:操作自定义属性
data:用于data-xxx
// prop:操作固有属性
$('div').prop('id','wahaha')
//attr:操作自定义属性
console.log($('div').attr('bidSrc'))
$('div').attr('data-ha','oxoxoxoxox')
// data:用于data-xxx
console.log($('div').data('ha'))
文本
1.html相当于原生的 innerHTML,能够解析文本中的 html 标签
2.text相当于原生的 innerText ,它无法解析 html 标签
3.没有参数用于读取内容
<div class="box"></div>
<script>
//html相当于原生的 innerHTML,能够解析文本中的 html 标签
$('.box').html('<h4>学习jQuery</h4>');
//text相当于原生的 innerText ,它无法解析 html 标签
$('.box').text('<h4>学习jQuery</h4>');
//没有参数用于读取内容
$('.box').html()
</script>