jquery基本知识

Posted 平凡执着

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>

6. 文档操作

  1.创建一个标签对象

    $("<p>")

  2.内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");父节点.子节点

    $("").appendTo(content)       ----->$("p").appendTo("div");     子节点.父节点

    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");

    $("").prependTo(content)      ----->$("p").prependTo("#foo");

  3.外部插入,兄弟节点之间的插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");

    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");

    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");

    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

  4.替换

    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); 替换节点,被替换节点

  5.删除

    $("").empty()                     清空

    $("").remove([expr])          删除

  6.复制

    $("").clone([Even[,deepEven]])

以上是关于jquery基本知识的主要内容,如果未能解决你的问题,请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)

几个有用的JavaScript/jQuery代码片段(转)

几个非常实用的JQuery代码片段