码迷,mamicode.com
首页 > 其他好文 > 详细

基础,层次,选择器

时间:2019-12-20 22:19:51      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:tle   har   focus   last   属性   结构   on()   ready   head   

基础,层次,选择器

1.基本选择器

1.标签选择器

$("标签名")

        $("p").html() //获取p标签对象,是jquery对象形式的
        $("p").length

2.类选择器

$(".class值")

3.id选择器

$("#id值")

3.并集选择器 逗号隔开

$(".class值,#id值")

4.交集选择器(同时存在)

$("class值id值")

$("p.myStyle").html():选中 即是p标签,并且class的值是myStyle

注意:不能出现歧义
错误写法 $(".myStylep").html()
交集选择器 在交接处 只能是.或#开头的选择器

5.全局选择器

$("*")

选中全部元素

2.层次选择器(只取后面的哪些元素)

? 相邻选择器 "+"

? $("选择器1+选择器2")

? 同辈选择器 "~"

? $("选择器1~选择器2")

? 后代选择器 空格

? $("选择器1 选择器2")

? 子代选择器 ">"

? $("选择器>选择器2")

3.属性选择器 [...]

$("[属性名]")

    $("[class]") : // 选中全部元素中 有class属性的 元素

$("[属性名=属性值]")
    $("[class=xxx]")  
    $("[class='xxx']")    

$("[class!=a]") // 不等于, 包含两种: 有class但值不是a,   没有class

$("[class^=a]") // class以a开头的元素
$("[class$=a]") // class以a结尾的元素
$("[class*=a]") // class有a的元素

4.过滤选择器

? 过滤选择器的一些方法 和其他函数类型,例如 $("ul>li:first")等价于$("ul>li").first()

? 有些不同,例如, 可以$("ul>li:odd") ;错误$("ul>li").odd();

:first 最开头那一个
:last 最后那一个
:even 偶数
:odd 奇数

:eq(index) 第index个

:gt(index) >index的全部元素
:lt(index) <index的全部元素
:not(选择器) 除了...以外
:header 选中所有的标题元素 h1 h2


:focus 获取当前焦点的元素

5.可见性选择器

? :visible 选中所有可见的元素
? :hidden 选中所有隐藏的元素

例:

<html>
    <head>
        <title>my title</title>
        <meta charset="utf-8"/>
        <!--引用 -->
        <script type="text/javascript" src="jQuery/jquery-3.4.1.js">
        </script>
        <!--使用 -->
        <script type="text/javascript" >
            //alert("hello");
            /*$(document).ready(function(){//加载函数也称初始化函数
                alert("hello jquery");
                
            });*/
            //当网页中的dom(结构出来了并不需要内容)元素全部加载完毕后 立刻执行
            //onload:javascript,初始化函数,当网页中的dom元素(关联图片,视图,资源)全部加载完毕后 立刻执行
            
            /*$(document).ready( function(){
            alert("hello js");
            });
            
            $(function(){
            alert("hello 123");
            });
            
            function init()
            {
            
                alert("init...");
            }*/
            
            $( function(){
                var $title = $("#myTitle");
                //alert($title.html()+"jquery");
                //alert($title[0].innerHTML+"111");
                //alert($title.get(0).innerHTML+"222");
                //alert( $("p").html());//标签选择器 $("标签名")
                    //alert( $("p").length);
                    //alert($(".myTitle").html()+"555");//类选择器
                    //alert($("#myTitle").html()+"333");//id选择器
                    //alert($(".myTitle,#myTitle,#myTitle3 ").length );//并集选择器
                    //alert($("p.myTytle").length );//交集选择器 错误写法$(".myStylep").html()
            
                        //alert($("*").length );//全局选择器
                    
                    //层次选择器+  $("选择器1+选择器2")相邻只取后面的
                        //alert($("#b+li").html() );
                        //alert($("#b+li").length);
                    //同辈选择器~  $("选择器1~选择器2") 同辈只取后面的
                        //alert($("#b~li").html() );
                        //alert($("#b~li").length);
                    //后代选择器 空格 $("选择器1 选择器2")
                        //alert($("body li").length);
                        //alert($("body>li").length);//不行
                    //子代选择器 > $("选择器1>选择器2")
                        //alert($("ul>li").length);
                    
                    //属性选择器 [...]
                    // $("[属性名]") $("[name]"):选中全部元素中 有name属性的元素 
                        //alert($("[class]").html());
                        //alert($("[class='xxx']").html());//选中class=xxx的
                            //$("[class !=a]") 不等于 包含两种: 有calss但值不是a 没有class
                            //$("[class ^=a]")  class以a开头的元素
                            //$("[class $=a]")  class以a结尾的元素
                            //$("[class *=a]")  class有a的元素
                        
                        
            });     
             
            /*function init()
            {
                var title = document.getElementById("myTitle");
                //alert( title.innerHTML  );
                alert( $(title).html()+"123"  );
            }*/
            </script>
            <style>
                <!--.myTitle{
                color:red;
                
                }-->
            </style>
            
    </head>
    
    
    <!--<body onload="init()">-->
    <body >
    <p id="myTitle" >你最喜欢的颜色是?</p>
    <p class="myStyle" >你最喜欢的颜色是2?</p>
    <p id="myTitle3" >你最喜欢的颜色是3?</p>
            
        <ul>
        
            <li>aaa</li>
            <li id="b">bbb</li>
            <li>ccc</li>
            <li>ddd</li>
            <li>ee</li>
            <li>ff</li>
        </ul>
            
    </body >


</html>

基础,层次,选择器

标签:tle   har   focus   last   属性   结构   on()   ready   head   

原文地址:https://www.cnblogs.com/x-i-n/p/12075208.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!