精华内容
下载资源
问答
  • jQuery语法选择器

    2019-10-28 10:27:24
    jQuery 一、简介 jQuery是一个JavaScript函数库。 jQuery库包含以下功能: ​ 1.html元素选取 ...​ 3.CSS操作 ...​ 5.JavaScript特效和动画 ...jQuery 语法是通过选取 HTML 元素,并对选取元素执行某些...

    jQuery

    一、简介

    jQuery是一个JavaScript函数库。

    jQuery库包含以下功能:

    ​ 1.html元素选取

    ​ 2.html元素操作

    ​ 3.CSS操作

    ​ 4.HTML事件函数

    ​ 5.JavaScript特效和动画

    ​ 6.HTML DOM遍历和修改

    ​ 7.AJAX

    ​ 8.Utilities

    二、语法

    jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。

    基础语法: $(selector).action()

    • 美元符号定义 jQuery
    • 选择符(selector)“查询"和"查找” HTML 元素
    • jQuery 的 action() 执行对元素的操作

    实例:

    • $(this).hide() - 隐藏当前元素
    • $(“p”).hide() - 隐藏所有

      元素

    • $(“p.test”).hide() - 隐藏所有 class=“test” 的

      元素

    • $("#test").hide() - 隐藏所有 id=“test” 的元素

    三、对象

    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function(){
            //JS对象转换成Jquery对象。 $()包裹起来即可。
            //var div1 = document.getElementById("div1");
            //var jqDiv1 = $(div1);
            //alert(jqDiv1.attr("id"))
            //Jquery对象转换成JS对象。1.JQ对象.get(index)   2.JQ对象[index]
            //var div1 = $("#div1")[0];
            var div1 = $("#div1").get(0);
            var result = div1.getAttribute("haha");
            alert(result)
            //注意:DOM 对象才能使用DOM 中的方法,jQuery 对象是不可以使用DOM中的方法。
        })
    </script>

    四、选择器

    jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

    jQuery 中所有选择器都以美元符号开头:$()。

    1、基本选择器

    $("p"):根据给定的元素名匹配所有元素
    $("#test"):根据给定的ID匹配一个元素
    $(".test"):根据给定的类匹配元素
    $("*"):匹配所有元素
    $("div,span,p.myClass"):将每一个选择器匹配到的元素合并后一起返回
    $('li:first'):获取第一个元素
    $('li:last'):获取最后个元素
    $("input:not(:checked)"):去除所有与给定选择器匹配的元素
    $("tr:even"):匹配所有索引值为偶数的元素,从0开始计数
    $("tr:odd"):匹配所有索引值为奇数的元素,从0开始计数
    $("tr:eq(1)"):匹配一个给定索引值的元素
    $("tr:gt(0)"):匹配所有大于给定索引值的元素
    $("tr:lt(2)"):匹配所有小于给定索引值的元素
    $(":header"):匹配如 h1, h2, h3之类的标题元素
    $(":animated"):匹配所有正在执行动画效果的元素
    $(":focus"):匹配当前获取焦点的元素

    2、层级选择器

    $("form input"):在给定的祖先元素下匹配所有的后代元素
    $("form > input"):在给定的父元素下匹配所有的子元素
    $("label + input"):匹配所有紧接在 prev 元素后的 next 元素
    $("form ~ input"):匹配 prev 元素之后的所有 siblings 元素

    3、内容选择器

    $("div:contains('John')"):匹配包含给定文本的元素
    $("td:empty"):匹配所有不包含子元素或者文本的空元素
    $("div:has(p)").addClass("test"):匹配含有选择器所匹配的元素的元素
    $("td:parent"):匹配含有子元素或者文本的元素

    4、可见性选择器

    $("tr:hidden"):匹配所有不可见元素,或者type为hidden的元素
    $("tr:visible"):匹配所有的可见元素

    5、属性选择器

    $("div[id]"):匹配包含给定属性的元素
    $("input[name='newsletter']"):匹配给定的属性是某个特定值的元素
    $("input[name!='newsletter']"):匹配所有不含有指定的属性,或者属性不等于特定值的元素
    $("input[name^='news']"):匹配给定的属性是以某些值开始的元素
    $("input[name$='letter']"):匹配给定的属性是以某些值结尾的元素
    $("input[name*='man']"):匹配给定的属性是以包含某些值的元素
    $("input[id][name$='man']"):复合属性选择器,需要同时满足多个条件时使用

    6、子元素选择器

    $("ul li:nth-child(2)"):匹配其父元素下的第N个子或奇偶元素
    $("ul li:first-child"):匹配第一个子元素
    $("ul li:last-child"):匹配最后一个子元素
    $("ul li:only-child"):如果某个元素是父元素中唯一的子元素,那将会被匹配,如果父元素中含有其他元素,那将不会被匹配
    

    五、属性

    attr()  设置或返回被选元素的属性值。
    removeAttr(name)  从每一个匹配的元素中删除一个属性
    prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值。//为checked时用
    html([val|fn])  取得第一个匹配元素的html内容。
    text([val|fn])  取得所有匹配元素的内容。
    val([val|fn|arr])  获得匹配元素的value值。

    六、AJAX

    ​ AJAX是与服务器交换数据的技术,它在补充在全部页面的情况下,实现了对部分王爷的更新。

    AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。

    简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

    jQuery.ajax(url,[settings])
    url:一个用来包含发送请求的URL字符串。
    settings:AJAX 请求设置。所有选项都是可选的。
    dataType  预期服务器返回的数据类型。
    success  请求成功后的回调函数。
    
    jQuery.post(url, [data], [callback], [type])
    通过远程 HTTP POST 请求载入信息。
    这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
    url:发送请求地址。
    data:待发送 Key/value 参数。
    callback:发送成功时回调函数。
    type:返回内容格式,xml, html, script, json, text, _default
    
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
        $.post("http://192.168.14.15:8080/show/ShowAction?startindex=0&endindex=20",
               function(msg){
            $.each(msg.list, function(index) {
                $("#app").append("<div><img src='"+this.cover+"' title='"+this.title+"'>评分:"+ this.rate +"</div>")
            });
        },"json")
    });
    </script>
    展开全文
  • jquery选择器和dom操作 前言:jQuery是一个轻量级"写少,做多"JavaScript库。...一、jQuery的选择器和基本语法 jQuery 中所有选择器都以美元符号开头:$()。 jQuery 选择器基于元素 id、类

    jquery基本语法、选择器和dom操作

    前言:jQuery是一个轻量级的"写的少,做的多"的JavaScript库。如今,市面上有大量的js的开源框架,而jQuery应用广泛。jQuery包含以下功能:

    1. HTML元素的选取
    2. HTML元素的操作
    3. css的操作
    4. HTML事件函数
    5. js的特效和动画
    6. dom遍历和修改
    7. ajax
    8. utilities
      除此之外,jQuery还提供了大量的插件。

    一、jQuery的基本语法和选择器

    A、基本语法$(selector).action();

    (1)、jQuery 中的$()。

    $(),括号中可以放入,选择器、函数和代码块

    1. $是jQuery的别称
    <script>
            jQuery(function() {
                alert(11);//用jQuery代替了$
            });
        </script>
        <script>
            $(function() {
                alert(11);//这两种方式是等效的
            });
        </script>
    
    1. 同时 $ 是jQuery的顶级对象,相当于原生js中的window,把元素利用$包装成jQuery对象,都可以用jQuery方法。
    (2)、文档就绪事件

    方法一

    <body>
        <script>
            $(function() {
                 $('div').hide();
                //  此处是dom加载完成的入口
            });
        </script>
        <div>今天是2020.8.22</div>
    </body>
    

    方法二

    <body>
        <script>
            $(document).ready(function() {
                $('div').hide();
                //  此处是dom加载完成的入口
            });
        </script>
        <div>今天是2020.8.22</div>
    </body>
    

    注意:

    1. 等dom结构渲染完毕执行内部代码,不必等外部资源加载完毕,jQuery帮助完成了封装。
    2. 相当于原生js的DOMContentLoaded。
    3. js的load事件是等页面的文档,外部js文件,css文件都加载完毕后执行内部代码。
    4. $(function(){})不会被覆盖,而window.onload会被覆盖。
    (3)、dom对象和jQuery对象。

    通过原生js获取的是dom对象,通过jQuery获取的是jQuery对象,本质是将原生js进行了包装。

    <script>
            var div = document.querySelector("div");
            console.dir(div);
            //dom对象
        </script>
    
    <script>
       
            $(function() {
                console.dir($('div'));
            });//jQuery对象
        </script>
    

    注意:jQuery只能使用jQuery方法,dom对象则只能使用原生的js的属性和方法。

    B、选择器

    (1)、基础选择器

    $(“选择器”),例如 $ ("#id"), $ (".类"), $ ("*"), $ (“div”), $ (“div,p,li”), $ (“li.current”)(交集选择器)

    (2)、层级选择器
    方法 用法
    子代选择器:获取亲儿子层级的元素 $(“ul>li”)
    后代选择器:获取后代包括子孙元素 $(“ul li”)
    (3)、隐式迭代

    遍历内部dom元素的过程叫做隐式迭代。
    给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们进行再次循环。

        <div>今天是2020.8.23</div>
        <div>今天是2020.8.23</div>
        <div>今天是2020.8.23</div>
        <script>
            $("div").css("background", "pink");//自动对div进行遍历
        </script> 
    
    (4)、筛选选择器
    语法 用法
    :first获取第一个li元素 $(“li:first”)
    :last获取最后一个li元素 $(“li:last”)
    :eq(index)获取索引号为2的li元素 $(“li:eq(2)”)
    :odd获取li元素中索引号为奇数的元素 $(“li:odd”)
    :even获取li元素中索引号为偶数的元素 $(“li:even”)
     <ul>
            <li>今天是2020.8.23</li>
            <li>今天是2020.8.23</li>
            <li>今天是2020.8.23</li>
            <li>今天是2020.8.23</li>
        </ul>
        <ol>
            <li>今天是2020.8.23</li>
            <li>今天是2020.8.23</li>
            <li>今天是2020.8.23</li>
            <li>今天是2020.8.23</li>
        </ol>
    
        <script>
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "pink");
        </script>
    
    (5)、筛选方法
    语法 用法
    parent()查找父级元素 $(“li”).parent();
    children(selector)最近一级的亲儿子 $(“li”).children(“li”);
    find(selector)相当于$(“ul li”)后代选择器 $(“ul”).find(“li”);
    silblings(selector)查找 兄弟节点,不包括自身 $(".first").siblings(“li”);
    nextAll()当前元素之后的所有同辈元素 $(".first").nextAll()
    prevAll()获取指定元素前面的所有兄弟元素 $(".first").prevAll()
    hasClass()检查匹配的元素是否含有指定的类 $(".first").hasClass(“div”)
    eq(index)筛选指定索引号的元素 $(".first").eq(2)

    二、jQuery的dom操作

    元素操作、属性操作、样式操作

    A、元素操作

    (1)、遍历元素

    方法一、 $(“div”).each(function(index,domEle){xxx;})
    注意:

    1. each()方法遍历匹配的每一个元素,主要用dom处理,each每一个。
    2. 里面回调函数有两个参数:index索引号,demEle是每个dom元素对象,不是jQuery对象
    3. 所以要想使用jQuery方法,需要dom元素转换为jQuery对象$(domEle)
    <div>1</div>
        <div>2</div>
        <div>3</div>
        <script>
            $(function() {
                arr = ["red", "blue", "green"];
                $("div").each(function(index, domEle) {
                    console.log(index);
                    console.log(domEle); //注意这里的domEle是dom对象
                    $(domEle).css("color", arr[index]);
    
                })
            })
        </script>
    

    方法二、$.each()方法遍历元素,主要用于遍历数据(数组,对象),处理数据

     <div>1</div>
        <div>2</div>
        <div>3</div>
        <script>
            $(function() {
                $.each($("div"), function(i, ele) {
                    console.log(i);
                    console.log(ele);
                })
            })
        </script>
    
    (2)、创建、添加元素

    a)、内部添加:生成完是父子关系
    $(“ul”).append(li);
    $(“ul”).prepend(li);

    <ul>
            <li>2020.8.23</li>
        </ul>
        <script>
            $(function() {
                var li = $("<li>星期日</li>");
                //(1)内部添加
                $("ul").append(li); //添加到后面
                $("ul").prepend(li);//添加到前面
            })
        </script>
    

    b)、外部添加:生成完是兄弟关系
    $(".two").before(div);
    $(".two").after(div);

    <div class="two">2020.8.23</div>
        <script>
            $(function() {
                var div = $("<div>星期天</div>");
                $(".two").before(div);
                $(".two").after(div);
            })
        </script>
    
    (3)、删除元素

    a)、remove删除匹配元素

    <div>2020.8.23</div>
        <p>星期天</p>
        <script>
            $(function() {
                $("p").remove();
            })
        </script>
    

    b)、empty和html删除匹配元素集合中的所有子节点
    (其中,html() 方法返回或设置被选元素的内容 (inner HTML)。
    如果该方法未设置参数,则返回被选元素的当前内容。)

     <ul>
            <li>2020.8.23</li>
            <li>星期天</li>
        </ul>
        <script>
            $(function() {
                $("ul").empty();
                 $("ul").html("");
            })
        </script>
    

    c)、detach() 方法移除被选元素,包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素,因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据,这一点与 remove() 不同。

    <ul>
            <li>2020.8.23</li>
            <li>星期天</li>
        </ul>
        <script>
            $(function() {
                $("ul").detach();
    
            })
        </script>
    
    
    (4)、克隆元素

    clone(),参数:可以传true,克隆的元素连带事件一同复制。

     <ul>
            <li>2020.8.23</li>
            <li>星期天</li>
        </ul>
        <script>
            $(function() {
    
                var $wht = $("li:first").clone(false);
                $("ul").append($wht);
            })
        </script>
    
    (5)、替换元素

    replaceWith() 用指定的 HTML 内容或元素替换被选元素。replaceAll() 与 replaceWith() 作用相同。差异在于语法:内容和选择器的位置,以及 replaceWith() 能够使用函数进行替换。

      <ul>
            <li>2020.8.23</li>
            <li>星期天</li>
        </ul>
        <script>
            $(function() {
                $("li:first").replaceWith("<li>现在是19:31</li>");
    
            })
        </script>
    
    (6)、val()设置被选元素的值和方法返回

    a)、设置被选元素的值

    <input type="text" value="2020.8.23">
        <script>
            $(function() {
                $("input").val("星期天");
            })
        </script>
    

    b)、返回方法的值

    <input type="text" value="2020.8.23">
        <script>
            $(function() {
                console.log($("input").val());
            })
        </script>
    
    (7)、包裹元素
    1. wrapAll();①参数:Xhtml语言文本。②特点:会把匹配到的元素用参数元素包裹起来(一包多)。
    2. wrap();①参数:Xhtml语言文本。②特点:会把匹配到的元素用参数元素包裹起来(一包一个)。
    3. wrapinner();①参数:Xhtml语言文本。②特点:会把匹配到的元素的子元素(包括文本节点)用参数元素包裹起来(一包多)。
    (8)、其他操作元素方法

    appendTo() 向目标结尾插入匹配元素集合中的每个元素。
    insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。
    insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。
    prependTo() 向目标开头插入匹配元素集合中的每个元素。
    text() 设置或返回匹配元素的内容。
    unwrap() 移除并替换指定元素的父元素。

    B、属性操作

    (1)、prop()

    获取属性值、修改属性值

    <a href="https://www.baidu.com/" title="百度"></a>
        <script>
            $(function() {
                console.log($("a").prop("href"));
                $("a").prop("title", "百度一下,马上知道")
    
            })
        </script>
    
    (2)、attr()和removeAttr()

    a)、获取自定义属性值、修改自定义属性值

    <a href="https://www.baidu.com/" title="百度" index="4"></a>
        <script>
            $(function() {
                console.log($("a").attr("index"));
                $("a").attr("index", "5")
    
            })
        </script>
    

    b)、removeAttr() 方法从被选元素中移除属性。

      <a href="https://www.baidu.com/" title="百度" index="4" style="color:red">百度</a>
        <script>
            $(function() {
    
                $("a").removeAttr("style");
    
            })
        </script>
    
    (3)、data()

    数据缓存,这里面的数据放在元素的缓存中,获取data-index 的自定义属性

     <span>2020.8.23</span>
        <p data-id="tanr">星期天</p>
        <script>
            $(function() {
                $("span").data("name", "tran");
                console.log($("span").data("name"));
                console.log($("p").data("id"));
            })
        </script>
        </script>
    
    (4)、关于class的操作

    a)、addClass() 向匹配的元素添加指定的类名。

     <p>2020.8.23</p>
        <script>
            $(function() {
                $("p").addClass("datatime");
    
            })
        </script>
    

    b)、hasClass()检查匹配的元素是否拥有指定的类。

    <p>2020.8.23</p>
        <script>
            $(function() {
                console.log($("p").hasClass("datatime"));
    
            })
        </script>
    

    c)、removeClass()从所有匹配的元素中删除全部或者指定的类。

      <p class="datatime">2020.8.23</p>
        <script>
            $(function() {
                $("p").removeClass("datatime");
    
            })
        </script>
    

    d)、toggleClass()从匹配的元素中添加或删除一个类。

    C、样式操作

    (1)、改变样式通过添加,删除class来实现
    (2)、css()

    css() 方法返回或设置匹配的元素的一个或多个样式属性。
    a)、返回值

       <p style="color:red;">2020.8.24</p>
        <script>
            $(function() {
                console.log($("p").css("color"));
            })
        </script>
    

    b)、设置样式

    <p style="color:red;">2020.8.24</p>
        <script>
            $(function() {
                $("p").css("color", "blue");
            })
        </script>
    
    (3)、height() 和width()

    方法返回或设置匹配元素的高度或者宽度。
    a)、返回值

    <p style="color:red;">2020.8.24</p>
        <script>
            $(function() {
                console.log($("p").height());
            })
        </script>
    

    b)、设置高度(宽度)

     <p style="color:red;background:blue;">2020.8.24</p>
        <script>
            $(function() {
                console.log($("p").height("100"));
            })
        </script>
    
    (3)、offset()

    offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。该方法返回的对象包含两个整型属性:top 和 left,以像素计。
    a)、返回值

    <script>
            $(document).ready(function() {
                $("button").click(function() {
                    x = $("p").offset();
                    $("#span1").text(x.left);
                    $("#span2").text(x.top);
                });
            });
        </script>
        <p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
        <button>获得 offset</button>
    

    b)、设置偏移

    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").offset({top:100,left:0});
      });
    });
    </script>
    <p>This is a paragraph.</p>
    <button>设置新的偏移</button>
    
    (4)、offsetParent()

    offsetParent() 方法返回最近的祖先定位元素。

    <script>
            $(document).ready(function() {
                $("button").click(function() {
                    $("p").offsetParent().css("background-color", "red");
                });
            });
        </script>
        <div style="width:70%;position:absolute;left:100px;top:100px">
            <div style="margin:50px;background-color:yellow">
                <p>最近的父元素变色</p>
                </div>
                </div>
                <button>点击这里</button>
    
    (5)、position()

    方法返回匹配元素相对于父元素的位置(偏移)

    <script>
            $(document).ready(function() {
                $("button").click(function() {
                    x = $("p").position();
                    alert("Left position: " + x.left + " Top position: " + x.top);
                });
            });
        </script>
        <p>This is a paragraph.</p>
        <button>获得 p 元素的位置坐标</button>
    
    (6)、scrollLeft()和scrollTop()

    scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

    <script type="text/javascript">
            $(document).ready(function() {
                $(".btn1").click(function() {
                    $("div").scrollTop(100);
                });
                $(".btn2").click(function() {
                    alert($("div").scrollTop() + " px");
                });
            });
        </script>
        <div style="border:1px solid black;width:200px;height:200px;overflow:auto">
            This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
            is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
            is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
        </div>
        <button class="btn1">把 scroll top offset 设置为 100px</button>
        <br />
        <button class="btn2">获得 scroll top offset</button>
    
    展开全文
  • jQuery---jq基础了解(语法,特性),JQ和JS区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ​JQuery是...

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    一丶什么是JQuery

    JQuery:

    ​      JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率

          js库是包含了把复杂的功能封装到简单的方法中

    img

    JQuery的两大特性:

    ​      链式编程:可以.的形式实现多个功能

    ​      隐式迭代:在方法的内部进行遍历循环,而不是我们自己再进行循环,简化操作,方便调用

    ​      更好的兼容性:JQuery自动做了浏览器的兼容问题

    JQuery的引入:

    ​      压缩(XXX.min.js)与未压缩

    // 1. 压缩过的文件更小,不占据空间,利于网络传输,可读性不高
    
    // 2. 未压缩的文件占据空间,不利于网络传输,可读性高

          引入:导入文件一定要在自定义script标签之上

    <!-- 导入文件一定要在自定义script标签之上 -->
    <!-- 引入Jq文件 -->
        <script src="jquery3.4.1.min.js"></script>
    
        <script>
            // 自定义JQ/js代码
        </script>
    
    
    
    //在控制台输入jQuery
        //结果如下,则表示引入JQ成功
        ƒ (e,t){return new k.fn.init(e,t)}

          相比较下,Js原生的效率要高于JQuery的效率,有时候需要写大量的原生js代码,提高执行效率.

    二丶JQuery的入口函数和$符

    入口函数:

    /* 文档加载完毕 */
        //方式一:
            $(document).ready(function(){
                //文档加载完毕
                alert('加载完毕');
            });
    
        //方式二:
            $(function(){
               //文档加载完毕 
                alert('加载完毕');
            });
        
        //方式三:
            $(window).ready(function(){
                //文档加载完毕
                alert('加载完毕');
            });

    JQ入口函数和js入口函数对比

    /* 区别一:书写方式不一样 */
        //js的入口函数只能书写一次,多次会存在 事件 覆盖现象
        //jq的入口函数可以出现多次,不限次数
    
    /* 区别二:执行时机不同 */
        //js的入口函数是在所有的文件资源加载完毕之后,才执行.资源包括:页面文档,外部的js文件,外部的css文件,图片等.  (dom树资源加载完毕+文件资源加载完毕)
    
        //JQuery的入口函数,是在文档加载完成后就执行.即Dom树加载完成之后就可以操作dom.不要等到外部所有的资源都加载完毕. (dom树资源加载完毕)
    
    
    /* 相同: */
        //文档的加载顺序:从上到下下,边解析边执行

    JQuery的$

    ​      $和jQUery具有一样的意义,是jQUery占用了这两个变量

    //jQUery+() :  实例化一个JQ对象
        jQuery('#id')
        k.fn.init {}
    
    //$+() : 实例化一个JQ对象
        $('#id')
        k.fn.init {}
    
    //判断$符和jQuery的值和类型是否相同
        $===jQuery
        true
    
    //总结: jQuery和$符就是一个变量,存放类地址

    三丶JQuery和JS的Dom对象对比

    区别:

    ​      jQuery获取元素的jq对象,包括dom树,还有一些方法

    ​      原生js只获取dom对象

    /* js获取对象 */
        // id选择器,类选择器,标签选择器
            document.getElementById('app')
            // 直接获得一个标签对象
                <div id="app">
    
    /* jQuery获取jq对象 */
        // id选择器,类选择器,标签选择器
            $('#app')
            // 获取一个jq对象,包括一些方法
                Object [ div#app ]  <prototype>:Object { jquery: "3.4.1", constructor: k(), length: 0, … }

    相互转换:

    /* jQuery对象 转换成 js对象 */
            
        //方式一: jQuery对象[index];   index为索引,推荐此方式
            var obj=$('#sel');
            jQuery[0];   //js对象
    
        //方式二: jQuery对象.get(index);
            var obj=$('#sel');
            obj.get(0);   //js对象
    
    /* js对象 转换成 jQuery对象 */
        //方式一 : $(js对象)
        var p_obj=document.getElementById('p1');
        $(p_obj);  //JQ对象
    
    
        //方式二 : jquery(js对象)
        var p_obj=document.getElementById('p1');
        jquery(p_obj);  //JQ对象

    四丶JQuery的选择器

    基本选择器:

    <body>
        <div>
            <input type='text' id='inp' class='inp-class' />
        </div>
    </body>
     
    
    /* id选择器 */
        //语法 : $('#id');
        var id=$('#inp');//得到一个对象
    
    
    /* 标签选择器 :tagName代表标签名*/
        //语法 :$('tagName')
        var inp_tag_attr=$('input');//得到一个数组
        
    
    /* 类选择器  : className */
        //语法 :$('.className')
        var inp_cls_attr=$('.inp-class');//得到一个数组
    
    
    
    /* 通配符选择器 */
        //语法 :$('*')
        var all_attr=$('*');
    
    
    /* 交集选择器 */
        //语法 :$('div.inp-class')
        var attr1=$('div.inp-class'); //得到一个数组
    
    /* 并集选择器 */
        //语法 :$('#inp.inp-class')
        var el=$('#inp.inp-class');

    ​ 示例代码:?

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                float: left;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div id="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div></div>
        <script type="text/javascript" src="jquery3.4.1.js"></script>
        <script type="text/javascript">
            //入口函数
            $(function(){
                //三种方式获取jquery对象
                var jqBox1 = $("#box");
                       var jqBox2 = $(".box");
                var jqBox3 = $('div');
                //操作标签选择器
                jqBox3.css('width', '100');
                jqBox3.css('height', 100);
                jqBox3.css('background-color', 'red');
                jqBox3.css('margin-top', 10);
                //操作类选择器(隐式迭代,不用一个一个设置)
                        jqBox2.css("background", "green");
                        jqBox2.text('哈哈哈')
    
                        //操作id选择器
                        jqBox1.css("background", "yellow");
    
            })
        </script>
    
    </body>
    </html>
    

    img

    层级选择器:

    /* 后代选择器: 空格  */   
        // 语法: $('x y');   
        // 找到 X标签 的所有的后代(子子孙孙) y标签
        
    
    /* 儿子选择器: 大于号 */
        // 语法: $('x > y');
        // 找到 x标签 的子标签(儿子,嵌套标签) y标签
    
    
    /* 毗邻(兄弟)选择器: 加号 ( 必须是相邻的才会被找出来) */
        // 语法: $('x + y');
        // 找到 x标签下的 紧密相邻的元素 y标签
    
    /* 弟弟选择器: 波浪号 */  
        // 语法: $('x ~ y');
        // 找出 x标签下 所有的弟弟的 y标签
    

    ​      示例代码:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <script src="jquery-3.3.1.js"></script>
        <script>
            $(function () {
                //获取ul中的li设置为粉色
                //后代:儿孙重孙曾孙玄孙....
                var jqLi = $("ul li");
                jqLi.css("margin", 5);
                jqLi.css("background", "pink");
    
                //子代:亲儿子
                var jqOtherLi = $("ul>li");
                jqOtherLi.css("background", "red");
            });
        </script>
    </head>
    <body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <ol>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ol>
    </ul>
    </body>
    </html>
    

    img

    属性选择器:

    $('[href]');   //找到所有含有href属性的标签
    
    
    $('tag[href]');  //找到所有tag标签且包含href属性的标签 
    
    
    $('选择器[属性名="abc"]'); //找到所有 选择器且 属性名的值为abc  的标签
    
    
    $('选择器[属性名$="abc"]'); //找到所有 选择器且 属性名的值为abc结尾 的标签
    
    
    $('选择器[属性名^="abc"]'); //找到所有 选择器且 属性名的值为abc开头 的标签
    
    
    $('选择器[属性名*="abc"]'); //找到所有 选择器且 属性名的值含有abc 的标签
    
    
    $('选择器[属性1][属性名2="abc"]'); //拥有属性1,且属性二的值='xxx',符合前面选择器要求 的标签
    

    ​      示例代码:?

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
             <div id="box">
                <h2 class="title">属性元素器</h2>
                <!--<p class="p1">我是一个段落</p>-->
                <ul>
                    <li id="li1">分手应该体面</li>
                    <li class="what" id="li2">分手应该体面</li>
                    <li class="what">分手应该体面</li>
                    <li class="heihei">分手应该体面</li>
    
                </ul>
    
                <form action="" method="post">
    
                    <input name="username" type='text' value="1" checked="checked" />
                    <input name="username1111" type='text' value="1" />
                    <input name="username2222" type='text' value="1" />
                    <input name="username3333" type='text' value="1" />
                    <button class="btn-default">按钮1</button>
                    <button class="btn-info">按钮1</button>
                    <button class="btn-success">按钮1</button>
                    <button class="btn-danger">按钮1</button>
    
    
                </form>
            </div>
        </body>
        <script src="jquery-3.2.1.js"></script>
        <script type="text/javascript">
            
            $(function(){
                //标签名[属性名] 查找所有含有id属性的该标签名的元素
                $('li[id]').css('color','red');
                
                //匹配给定的属性是what值得元素
                $('li[class=what]').css('font-size','30px');
                //[attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素
                $('li[class!=what]').css('font-size','50px');
                
                //匹配给定的属性是以某些值开始的元素
                $('input[name^=username]').css('background','gray');
                //匹配给定的属性是以某些值结尾的元素
                $('input[name$=222]').css('background','greenyellow');
                
                //匹配给定的属性是以包含某些值的元素
                $('button[class*=btn]').css('background','red')
            
                
            })
        
        </script>
    </html>
    

    img

    五丶JQuery的筛选器

    基本筛选器:

    :firs  //第一个
    :last  //最后一个
    :eq(index) //索引等于index的元素
    
    :even  //匹配索引为偶数的元素,索引从0开始,返回数组
    :odd   //匹配索引为奇数的元素,索引从0开始,返回数组
    
    :gt(index)  //匹配大于指定索引的元素 ,返回数组
    :lt(index)  //匹配小于指定索引的元素 ,返回数组
    
    :not(元素选择器) // 不含有   该选择器标签,得到本身标签
    :has(元素选择器) // 是否含有 该选择器.得到本身标签
    

    表单筛选器:

    /* type筛选器 */
    :text
    :password
    :file
    :radio
    :checkbox
    :submit
    :rest
    :button
    
    //注意:date特殊,不存在date筛选器
    
    // 用法:
        $(':text'); //匹配 input标签type为text的标签
    
    
    /* 其他属性筛选器 */
    :enabled
    :disabled
    :checked
    :selected
    
    // 用法:
        $(':enabled'); //匹配 属性值为 enabled标签
    
    // 注意: input标签type为CheckBox也具有 checked属性.
        $(':checked')
        jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)]
    

    六丶JQuery筛选方法

    //找所有兄弟 
        $('选择器').siblings(); //不包含自己,返回一个数组
        //进一步筛选: $('选择器').siblings('选择器');
    
    
    
    //找弟弟
        $('选择器').next();     //找下一个弟弟,返回一个jq对象
        $('选择器').nextAll();  // 找所有弟弟,返回一个数组
        $('选择器1').nextUntil('选择器2'); //直到找到 选择器2的标签 就结束查找,不包含本身,返回一个数组
    
    
    
    
    //找哥哥
        $('选择器').prev();     //找上一个哥哥,返回一个jq对象
        $('选择器').prevAll();  // 找所有哥哥,返回一个数组
        $('选择器1').prevUntil('选择器2'); //直到找到 选择器2的标签 就结束查找,不包含本身,返回一个数组
    
    
    
    //找祖辈
        $("选择器").parent();  // 找一个父亲,返回一个jq对象
        $("选择器").parents()  // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到),返回一个数组
        $("选择器").parentsUntil('body') // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。
    
    
    
    //找儿子
        $("选择器").children();  // 找所有的儿子们
    
    
    /* 过滤 */
        $("div").first() // 获取匹配的第一个元素
        $("div").last() // 获取匹配的最后一个元素
        $("div").eq(n) // 索引值等于指定值的元素,n是索引
    
        $("div").not() // 从匹配元素的集合中删除与指定表达式匹配的元素
        $("div").has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
    
    
        $("div").find("p");      //后代选择器,在所有div标签中找后代的p标签
        $("div").filter(".c1");  // 交集选择器,从结果集中过滤出有c1样式类的
    
    
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
             <div id="box">
                <p class="p1">
                    <span>我是第一个span标签</span>
                    <span>我是第二个span标签</span>
                    <span>我是第三个span标签</span>
                </p>
                <button>按钮</button>
            </div>
            <ul>
                <li class="list">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </body>
        <script src="jquery-3.2.1.js"></script>
        <script type="text/javascript">
            
            //获取第n个元素 数值从0开始
            $('span').eq(1).css('color','#FF0000');
            
            //获取第一个元素 :first :last    点语法  :get方法 和set方法
            $('span').last().css('color','greenyellow');
            $('span').first().css('color','greenyellow');
            
            //查找span标签的父元素(亲的)
            $('span').parent('.p1').css({"width":'200px','height':'200px',"background":'red'});
            
            //选择所有的兄弟元素(不包括自己)
                      $('.list').siblings('li').css('color','red');
    
                      
                    //查找所有的后代元素
                       $('div').find('button').css('background','yellow');
    
                    
                    //不写参数代表获取所有子元素。
                       $('ul').children().css("background", "green");
                       $('ul').children("li").css("margin-top", 10);
                       
            
        </script>
    </html>
    

    转载于:https://www.cnblogs.com/dengl/p/11366593.html

    展开全文
  • 后代选择器又称包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在最前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就称为外层标签后代。 语法规范: 元素1 元

    复合选择器复合选择器——后代选择器,子选择器,并集选择器和伪类选择器

    复合选择器是简历在基础选择器之上的,对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素。复合选择器由两个或多个基础选择器通过不同的方式组合而成的。 常用的复合选择器包括;后代选择器、子选择器、并集选择器、伪类选择器等等

    后代选择器

    后代选择器又称包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在最前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就称为外层标签的后代。

    语法规范:

    元素1 元素2 {样式声明}
    

    表示选择元素1里面的所有元素2;元素1和元素2之间用空格隔开。 元素1是父级,元素2是子级,最终的选择是元素2。元素2可以是元素1的儿子或者孙子的等,只需要是元素1的子级。

    例如:

    ol li {
    	color: red;
    }
    

    后代选择器中的元素1和元素2可以是任意的基础选择器。

    子选择器

    子元素选择器只能选择作为某元素最近一级的子元素。

    语法

    元素1>元素2 {样式声明}
    

    表示选择元素1里面的所有直接后代元素2。元素1和元素1之间必须有">"隔开。

    并集选择器

    并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。

    元素1,元素2 {样式声明}
    

    并集选择器是个选择器通过英文逗号连接而成,任何形式的选择器都可以作为并集选择器的一部分。表示元素1和元素2都进行改变。

    最会一个选择器之后不需要加逗号

    伪类选择器

    伪类选择器可以向其他选择器加一些特殊的效果,比如给链接添加特殊效果,或选择第一个n个元素.

    伪类选择器书写时用":"。

    链接伪类选择器

    a:link 选择所有未被访问的链接

    a:visited选择所有已被访问的链接

    a:hover选择鼠标指针位于其上的链接

    a:active选择活动链接(鼠标正在按下未弹起时的链接)

    链接伪类的注意事项

    1、为了确保生效,按照link、visited、hover、active的顺序声明。

    2、a链接在浏览器中有默认样式,所以给一般需要给链接单独指定样式。

    :focus伪类选择器

    :focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器主要针对于表单元素。

    例如:

    inout:focus {
    	background-color:yellow;
    }
    
    展开全文
  •  概念:后代选择器又叫包含选择器  为什么要用复合选择器?因为基础选择器不够强大,不能快速高效准确精细完全页面style设置。复合选择器是两个或多个基础选择器组合而成。  作用:用来选择元素或者元素...
  • 在不改变函数调用方式的基础上在函数的前,后添加功能,这就是装饰器的作用!!!! import time from functools import wraps #functools.wraps 的作用是将原函数对象的指定属性复制给包装函数对象, 默认有 module、...
  • jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。 一、jQuery简介 ...jQuery 库包含以下特性: ●HTML 元素选取 ●HTML 元素操作 ●CSS 操作 ●HTML 事件函数 ●JavaScr...
  • jQuery是一个JavaScript函数库,是一个轻量级"写少,做多"JavaScript库,包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX ...
  • CSS的选择器

    2020-10-13 21:55:32
    CSS选择器介绍 CSS概念:css是层叠样式表(cascading style sheets)简称,也是一种标记语言,专注去做结构呈现用。 CSS作用:美化网页,布局页面。 语法规范: 所有样式,都包含在< style >标签内...
  • css中的选择器

    2015-10-27 23:44:00
    一个选择器可能只是一个单一元素名称,也可能是包含复杂上下文模式规则集合。如果一个元素满足一个选择器所有条件,我们就称这个选择器选中了该元素。 下面这张表格概要展示了CSS2.1的选择器语法: 2....
  • 基础选择器包含四种类型的选择器:标签选择器、类选择器、id选择器、通配符选择器 (下面更精彩哦,各位小伙伴^ - ^!) 标签选择器 标签选择器(元素选择器)是指用于HTML标签名称作为选择器,按标签名称分类,为页面...
  • jq库包含的功能: ​ html元素获取【getElementByXxxx】 ​ html元素操作【增删改查】 ​ css操作 ​ html事件函数 ​ js特效和动画 ​ 操作DOM ​ ajax 使用jq好处: ​ a.将之前js代码简化 ​ b.不需要...
  • CSS复合选择器笔记

    2020-09-16 22:54:48
    后代选择器(descendant selector)又称为包含选择器。 后代选择器可以选择作为某元素后代元素。 语法结构: 元素1 元素2 { 样式声明 } /*选择元素1里面所有元素2*/ 例: ol li{ color: pink } 元素1与元素2...
  • 05 css复合选择器

    2021-01-25 16:07:29
    后代选择器又称为包含选择器, 可以选择父元素里面子元素,中间用逗号分隔 当标签发生嵌套时,内部标签就成为外部标签后代 元素1 元素2 { 样式声明 } 上述语法表示选择元素1里面所有元素2 元素2可以是儿子...
  • CSS复合选择器

    2020-05-25 15:52:39
    后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签后代。 语法: 元素1 元素2 {样式声明} 上述...
  • CSS选择器

    2019-09-26 21:11:11
    包含选择器;⑥兄弟选择器;⑦子选择器;⑧选择器组合。 下面对每个详细解释一下: (1)元素选择器: 元素选择器是最简单、最常用选择器。语法格式如下: E{...}/*其中E代表有效HTML元素名*/ 其实E...
  • CSS 属性选择器的深入挖掘 原文:CSS 属性选择器的深入挖掘CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较...
  • CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解 ...} 表示是从h1开始里面包含的所有em元素变成红色,h1为祖先,其他em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器。...
  • CSS复合选择器

    2020-12-29 17:46:11
    交集选择器选择元素必须是由第一个选择器指定元素类型,该元素必须包含第二个选择器对应 ID 名或类名。交集选择器选择元素样式是三个选择器样式,即第一个选择器; 语法: 元素选择器 . 类选择器| #ID ...
  • 什么是 jQuery ?...jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示:除此之外,Jqu...
  • css层次选择器的理解

    千次阅读 2017-10-15 15:43:45
    } 表示是从h1开始里面包含的所有em元素变成红色,h1为祖先,其他em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器。 (2)语法:h1>em{color:red;} 仅仅选择直接子元素em,子元素...
  • 后代选择器也成包含选择器,用来选择特定元素后代。 如下图案例所示: div h2 { color:red; font-size: 18px; } 不管h2元素是div元素子元素、孙辈元素或者更深层次关系,也就是说不管h2是div多少辈后代...
  • 关于jQuery学习笔记参考网站是:http://www.runoob.com/jquery/jquery-tutorial.html jQuery 简介 jQuery是一个JavaScript函数库...jQuery库包含以下功能:HTML 元素选取、HTML 元素操作、CSS 操作、HTML

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 614
精华内容 245
关键字:

包含选择器的语法是