选择器
$("li.cls").css("backgroundColor","red") //获取应用cls类样式的li标签
$("#dv p ") //id为dv里面的所有p标签
$("#dv > p") //id为dv子元素为p的标签
$("#u1>li:even") //索引为奇数的标签
$("#u1>li:odd") //索引为偶数的标签
$("#u1>li:eq(3)") //索引为3的元素
$("#u1>li:gt(3)") //索引大于3的所有元素
$("#u1>li:lt(3)") //索引小于3的所有元素
let index = jQuery.index() //获取对应的索引值
$("#u1>li:eq("+index+")")
$(this).siblings("li") //当前元素的所有兄弟li元素
$(this).first() //当前元素第一个
$(this).last() //当前元素最后一个
$(this).prev() //当前元素中的前一个
$(this).next() //当前元素中的后一个
样式
$("#u1>li").css("backgroundColor","red")
let style = {
"color":"yellow",
"fontSize":"30px"
}
$("#u1>li").css(style)
$("#u1>li").css("color","red").css("fontSize","30px")
动画
$("div").slideUp(1000) //滑入
$("div").slideDown(1000) //滑出
$("div").slideToggle(1000) //切换滑入滑出
$("div").fadeIn(1000) //淡入
$("div").fadeOut(1000) //淡出
$("div").fadeToggle(1000) //切换淡入淡出
$("div").fadeTo(1000,0.5) //第二个参数是opacity
$("div").animate({"top":"500px","left":"+=300px"},1000,callback) //不能改变颜色
创建元素
$("标签代码")
let obj = $("<a href='https://www.baidu.com'>百度</a>")
//在元素的末尾追加元素
$("#dv").append(obj) //把超链接追加到div中
$("#dv").appendTo($("a"))//把dv追加到a中
$("#dv").prepend(obj) //在元素的开始添加元素
$("#dv").before(obj) //在元素之前添加元素(添加兄弟)
$("#dv").after(obj) //在元素之后添加元素(添加兄弟)
移除元素
$("div").html("")//清空层中内容
$("div").empty() //清空层中的内容
$("div").remove() //干掉自己
$("div").clone()//复制这个元素
##获取和设置属性
$("a").attr("href") //获得a属性里href这个属性
$("a").attr("title","544老肥") //设置a属性里的title
$("#checkbox1").prop("checked") //false
$("#checkbox1").attr("checked") //undefined
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
$("document").scrollLeft()
$("document").scrollTop()
//获取滚动条的值
$("window").scroll(function(){
if($(document).scrollTop>$("div").height())
})//滚动条事件
事件绑定
$("div").bind("mouseover mouseout",function(){})
$("div").bind({"click",function(){},"mouseover",function(){}})
$("div").delegate("p","click",function(){}) //为div里面的p绑定点击事件
$("div").on("click","p",function(){}) //可以省略第二个元素参数
事件解绑
$("div").off("click") //给div解除点击事件绑定
$("div").unbind("click")
$("div").undelegate("p","click") //给div中的p解除绑定事件
- 如果父级元素和子级元素都是通过正常方式绑定事件,如果通过off解除绑定的时候,父级元素的事件解绑了,子级的不会解绑
- 如果子级元素是父级元素通过delagate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同事件都会被解绑
触发事件
触发某个事件的时候调用了其他元素的某个事件方法
$("#btn2").click(function(){
$("#btn1").click()
$("#btn1").trigger("click") //需要写上触发事件名字
$("#btn1").triggerHandler("click")
})
- 第一种和第二种触发事件的方式是相同的,都会触发浏览器的默认事件(光标在文本框中闪烁)
- 第三种触发事件的方式不会触发浏览器默认事件
事件对象
- event.delegateTarget 代码绑定事件的对象
- event.currentTarget 绑定事件的对象
- event.target 真正触发事件的对象
取消事件冒泡
- event.stopPropagation()
- return false 还能取消默认事件 event.preventDefault()
链式编程原理
内部返回了return this当前对象,有些方法设置了值才能返回当前对象,如果没有设值,是获取属性对应的值而不是当前对象
function Person(name){
this.name = name
this.getName = function(name){
if(name){
this.name = name
return this
}else{
console.log(this.name)
}
}
this.eat = function(){
console.log("吃饭")
return this
}
}
let person = new Person('Tom')
person.getName('小明').eat()