jquery基本知识

Posted 2020-10-13 平凡执着

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery基本知识相关的知识，希望对你有一定的参考价值。

1. 选择器

　　1.基本选择器

　　　　id $("#id")

　　　　class $(".class")

　　　　标签选择器 $("p")

　　2.组合选择器

　　　　后代选择器 $(".outer p")

　　　　子代选择器 $(".outer>p")

　　　　多元素选择器 $(".outer,#d1")

　　3.属性选择器

　　　　$("[属性名=‘值‘][...]")

　　4.表单选择器

　　　　表单元素：$(":text")

2. 筛选器

　　1. $("ul li:first")

　　2. $("ul li").eq(0)

　　　　.first

　　　　.last

　　3. $("..").hasClass("c1")

　　4.向下查找

　　　　$("..").next()

　　　　$("..").nextAll()

　　　　$("..").nextUntil()

　　5.向上查找

　　　　$("..").prev()

　　　　$("..").prevAll()

　　　　$("..").prevUntil()

　　6.查找所有兄弟标签

　　　　$("..").siblings()

　　7.查找子标签：

　　　　$("..").children("")

　　　　$("..").find()

　　8.父级标签：

　　　　$("..").parent()

　　　　$("..").parentUntil("")

3. 属性操作

　　1.文本操作：

　　　　$("..").html() 　　　　

　　　　$("..").text() 　　

　　2.属性操作：　　　　

　　　　$("..").attr("属性名") 　　　　

　　　　$("..").attr("属性名","属性值") 　　

　　3.class属性操作：　　　　

　　　　$("..").addClass("c1") 　　　　

　　　　$("..").removeClass("c1") 　　

　　4.样式操作
　　　　$(this).html("hello").next().css("color","red")

4. 事件绑定
　　4.1 事件绑定
　　　　jquery事件绑定：jquery对象.事件(function(){})
　　　　示例：

<div>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</div>
<script src="jquery.min.js"></script>
<script>
    // jquery事件绑定：jquery对象.事件（function(){})
    $("li").click(function () {
        // $(this)  是当前点击的标签，是一个jquery对象
        console.log($(this).text());
    });
</script>

　　4.2 事件委派
　　　　事件委派：通过on绑定事件，指定ul的后代li绑定事件(通过父标签，指定子标签的绑定事件)
　　　　示例：

<div>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
</div>
<div>
    <button>add</button>
</div>

<script src="jquery.min.js"></script>
<script>
    $("button").on("click",function () {
        var e_li = $("<li>");
        e_li.html("444");
        $("ul").append(e_li)
    });
    $("ul").on("click","li",function () {
        console.log($(this).html());
    });
</script>

5. $.each
　　1.$.each遍历循环
　　　　格式：$.each(obj,fn)

<script src="jquery.min.js"></script>
<script>
    var arr = [10,20,30,40];
    var dic={name:"eric",sex:"male",age:"18"};
    $.each(arr,function(i,v){
        console.log(i,v)
    });
    $.each(dic,function(i,v){
        console.log(i,v);
    });
</script>

　　2. 格式：$("").each(fn)

<p>11</p>
<p>22</p>
<p>33</p>
<p>44</p>
<script src="jquery.min.js"></script>
<script>
　　$("p").each(function () {
　　// $(this) 代指当前循环的标签
　　　　console.log($(this).html());
　　});
</script>