zoukankan      html  css  js  c++  java
  • JavaScript(15)jQuery 选择器

    jQuery 选择器
    选择器同意对元素组或单个元素进行操作。
    jQuery 元素选择器和属性选择器同意通过标签名、属性名或内容对 HTML 元素进行选择。


    在 HTML DOM 术语中:选择器同意对 DOM 元素组或单个 DOM 节点进行操作。

    jQuery 元素选择器
    jQuery 使用 CSS 选择器来选取 HTML 元素。
    $("p") 选取 <p> 元素。
    $("p.intro") 选取全部 class="intro" 的 <p> 元素。
    $("p#demo") 选取全部 id="demo" 的 <p> 元素。

    jQuery 属性选择器
    jQuery 使用 XPath 表达式来选择带有给定属性的元素。
    $("[href]") 选取全部带有 href 属性的元素。


    $("[href='#']") 选取全部 href 属性的值等于 "#" 的元素。
    $("[href!='#']") 选取全部 href 值不等于 "#" 的元素。
    $("[href$='.jpg']") 选取全部 href 值以 ".jpg" 结尾的元素。

    jQuery CSS 选择器
    jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。


    以下的样例把全部 p 元素的背景颜色更改为红色:

    $("p").css("background-color","red");

    上面的看完了我也不知道选择器是什么。。。

    来点自己的理解和总结。。。
    选择器语法:$("......")

    也能够这样分类:
    ① 选取全部元素:$("*")(注意里面是”星号“)
    ② 选取class:$(".class名") (注意前面有个”点“)
    ③ 选取id:$("#id名")
    ④ 选取元素:$("标签名")
    ⑤ 选取属性:$("[属性名]")
    ⑥ 依据特征来选取元素:$(":特征")(注意前面有个”冒号“)


    这六种选择器还能够组合一下,产生很多其它的选择器。
    比方:④②、④⑥
    还能够是:④④⑥、④③②(同类型之间要用“空格”隔开。如:$("ul li:first")、$("div#intro .head"))

    选取当前 HTML 元素:$(this)

    嵌套选择器
    如:选取指定标签中的其他标签中的元素:$(标签名 *)
    (注意指定的标签中一定要有其他标签,否则没有效果。

    道理就是我为我家狗狗取名叫小狗,但实际是我家根本没有狗狗。

    。。



    假设要进一步选择css属性:$("......").css("......")

    $("[属性名='#']") 选取全部属性的值等于 "#" 的元素。
    $("[属性名!='#']") 选取全部属性的值不等于 "#" 的元素。


    $("[属性名$='.jpg']") 选取全部属性的值以 ".jpg" 结尾的元素。



    提示:
    依据实践,某些浏览器使用 * 的处理速度缓慢。
    不要使用数字开头的 ID 名称!

    在某些浏览器中可能出问题。
    不要使用数字开头的类名!在某些浏览器中可能出问题。



    详细使用时,能够參考“jQuery 选择器參考手冊”。看看有哪些选择器。

    这篇写得比較短,但事实上花费的时间比較多。看了非常多样例。

    认为如今还是不要每一个都看一遍。以后用到的话边用边学,然后能够在这里补充。



    最后还是贴段代码吧。好像代码生动形象直观了当。。

    (太懒了,我仅仅想贴一份大杂烩代码(涉及到覆盖)。。

    。)

    <html>
    
    <head>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript"> 
     
    $(document).ready(function(){
        $(":header").css("background-color","grey");
    
        $("div *").css("background-color","blue");
        $("p *").css("background-color","purple");
    
        $("p").css("background-color","yellow");
    
        $("ul li:first").css("background-color","pink");
        $("div#choose .introtoo").css("background-color","green");
    });
     
    </script>
    </head>
    
    <body>
    
    <html>
    <body>
    
    <h1>Welcome to My Homepage</h1>
    
    <p class="intro">My name is Donald</p>
    <p>I live in Duckburg</p>
    <p>My best friend is Mickey</p>
    
    <div id="choose">
    <p class="introtoo">My name is Donald, too</p>
    Who is your favourite:
    <ul>
    <li>Goofy</li>
    <li>Mickey</li>
    <li>Pluto</li>
    </ul>
    </div>
    
    </body>
    </html>
    
    </body>
    
    </html>

    结果:

    Welcome to My Homepage

    My name is Donald

    I live in Duckburg

    My best friend is Mickey

    My name is Donald, too

    Who is your favourite:
    • Goofy
    • Mickey
    • Pluto

  • 相关阅读:
    常见错误及解决方案
    使用7zip压解各种文件的经常使用命令
    《鸟哥的Linux私房菜-基础学习篇(第三版)》(六)
    一起talk C栗子吧(第一百二十四回:C语言实例--内置宏)
    逻辑学和计算理论相关概念
    书评第003篇:《0day安全:软件漏洞分析技术(第2版)》
    解释器模式
    面试复习重点——数据结构、操作系统、计算机网络、数据库。
    我们凭什么年薪达到30万以上?
    测试工作中的问题清单
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5112875.html
Copyright © 2011-2022 走看看