jq笔记
选择器
$("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()