js笔记:jQuery的常用属性和方法

库与框架
共同点:都是第三方写好的程序,使用库和框架可以提高开发效率
不同点:
1 库更像是一个工具,拿过来直接使用,相对随意(JQuery)
2 框架会对开发者的开发方式设置一定的限制,使用框架需要按照框架的规则来开发项目(Vue react)

---

前言

jQuery是一个基于js的库,主要用来操作DOM
1.获取节点$(“选择器”)2.操作节点$().method
3.设置元素样式$().css()

---

一、jQuery的常用方法

1 index() 获取元素的索引
2 text() 获取和设置文本节点
3 val() 获取value属性值
4 text() 获取和设置文本节点

console.log($(this).text())   //获取文本
$(this).text("新闻本")  //传入参数,设置文本

5 attr() 获取和设置属性值,例如src

 $("button").click(function(){
            $("img").attr("src","../图片/7.jpg")
        })

6 css() 获取和设置样式

$(this).css("height","100px")
$(this).css({
     height:"100px",
     width:"100px"
})

7 addClass() 添加class类
(添加一个原先不存在的类,通过这种方式去改变某个样式)

$(this).addClass("active")

8 toggleClass() 添加或者一个class类
(如果标签没有这个类,则添加;如果标签已经存在这个类,则移除)
9 eq(index) 返回一个jQuery对象,参数为索引值
10 get(index) 返回一个DOM对象,参数为索引值

二、jQuery的增删改查

1.增加:append()和appendTo()

//直接添加
$(`<div id="d1">你好</div>`).appendTo($('body'))
//分开创建元素 添加属性 添加内容
// $('<div>')创建
//attr(属性,属性值)
//text()设置文本内容
// css()设置样式
//appendTo()追加
$('<div>').attr("id","d2").text("哭你一起挖").css("color","red").appendTo($('body')[0])

append() 父元素在前,子元素在后
appendTo()子元素在前,父元素在后
(appendTo是添加到的意思,所以只能是子元素添加到父元素中)

2.删除:remove()

$('div:last').remove()//删除最后一个div
 //$('div:last')为要删除的元素
 //remove() 参数查询的字符串
$('div:last').remove('#d2')//进一步确定删除哪个元素

3.修改:replaceWith()

//replaceWith()的参数替换$()函数中的标签
//后面的替换掉前面的
 $('div:last').replaceWith($("div"))

4.查找

方法	备注
$(‘参照物’).siblings()	除自身之外其他的兄弟元素
$(‘参照物’).children()	返回参照物的子元素
$(‘参照物’).closest()	返回距离参照物最近的祖先元素
$(‘参照物’).next()	查找参照物的下一个兄弟元素
$(‘参照物’).nextAll()	查找参照物下所有的兄弟的元素
$(‘参照物’).nextUntil()	查找参照物下的兄弟的元素直到参数里的选择器
$(‘参照物’).find()	查找参照物的后代元素
$(‘参照物’).parents()	查找参照物的父元素
$(‘参照物’).addBack()	回退函数(只能回退一次)
$(‘参照物’).end()	回退函数(可以回退多次)

//直接查找
$('body')  //查找body元素

//以下是通过一个元素查找另外的元素的方法
        //返回指定父元素下的div子元素,只是获取子元素
        console.log($('body').children('div'))
        //返回离span最近的祖先元素并且是div
        console.log($("#s1").closest('div'))
        //查找下一个兄弟元素
        console.log($('.first').next())
        //找兄弟元素,并且兄弟元素是script标签
        console.log($('p').next("Script"))
        //nextAll() 查找参照物下的所有的兄弟元素
        console.log($('p:last').nextAll())
        //nextUntil()查找兄弟元素直到后面的选择器为止,没有包含这个选择器的元素
        console.log($("P:last").nextUntil("script:eq(1)"))
        //查找上一个兄弟元素并且为div
        console.log($('p').prev('div').text())
        // console.log($('p').prev().text())

        //find()找后代元素
        console.log($(".first").find("span"))
        //如果不传参数可以找到所有的父元素
        console.log($("#s1").parents())
        // 可以添加具体的选择器字符串
        console.log($("#s1").parents('body'))
        console.log($("#s1").parent())
        // jQuery的串联 add() 串联函数,把找到的多个选择器的结果进行合并
        console.log($("div").add('p'))
        console.log($('.first').add('second').add("#s"))
        //回退函数 addBack() 只能回退一次
        console.log($(".first").find('.second').find('#s1').addBack())
        // end()可以多次回退
        console.log($(".first").find('.second').find('#s1').end().end())

三、jQuery事件绑定、委托和代理

事件绑定

1 通过事件别名绑定

$("#b1").click()

2 on()
通过on进行事件绑定的时候,采用dom2事件绑定方式,可以进行多次绑定

 $("#b1").on('click',function(){
            alert("按钮1")
        })
 $("#b1").on('click',function(){
            alert("按钮2")
        })
 $("li").on('click',function(){
           alert("按钮"+this.innerText)
           //直接给所有的li标签绑定事件,this指向点击的li
        })

3 如何通过事件1触发事件2

$("#b2").on("click",function(){
            //如何触发按钮1 的事件
            $("#b1").click()  //通过别名触发
            $("#b1").trigger('mouseenter')//通过trigger触发
        })

4 off() 取消事件绑定
(off中的参数为要移除的事件名,如果off中没有参数则默认移除所有事件)

 $("#b1").off("mouseleave") //取消mouseleave事件绑定

事件委托和代理

// 参数是事件类型,li触发事件的元素,回调函数
        $("#u1").on("click","li",function(){
            console.log(this)
        })
//事件代理
        //delegate 参数 代理的元素,事件类型,回调函数
        $("#u1").delegate('li','click',function(){
            console.log(this.innerText)
        })

---