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

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

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

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

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()