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解除绑定事件

　　

1. 如果父级元素和子级元素都是通过正常方式绑定事件，如果通过off解除绑定的时候，父级元素的事件解绑了，子级的不会解绑
2. 如果子级元素是父级元素通过delagate的方式绑定的事件，父级元素使用off方式解绑事件，这个时候父级元素和子级元素的相同事件都会被解绑

触发事件

触发某个事件的时候调用了其他元素的某个事件方法

$("#btn2").click(function(){
    $("#btn1").click()

    $("#btn1").trigger("click") //需要写上触发事件名字

    $("#btn1").triggerHandler("click")
})

　　

1. 第一种和第二种触发事件的方式是相同的，都会触发浏览器的默认事件(光标在文本框中闪烁)
2. 第三种触发事件的方式不会触发浏览器默认事件

事件对象

1. event.delegateTarget 代码绑定事件的对象
2. event.currentTarget 绑定事件的对象
3. event.target 真正触发事件的对象

取消事件冒泡

1. event.stopPropagation()
2. 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()