jquery $()选择器

$() 得到元素,等价于jQuery() 是其的简写形式。只有当$()和其它语言冲突时会会使用jQuery()。

$(“#id”) 通过id找到元素

html(“内容”) 更改元素innerHTML内容

[cce_js]
<div id="divtest">div的内容</div>
        <div id="default"></div>
        <script type="text/javascript">
            $("#default").html($("#divtest").html());
        </script>
[/cce_js]

#(“元素名”) 通过元素名找到元素

css(“命令”,”内容”) 改变或提取元素CSS样式

attr(“属性”,”值”) 改变或提取元素属性内容;

[cce_js]
<button id="btntest">点我</button>
        <script type="text/javascript">
            $("button").attr("disabled","true");
        </script>
[/cce_js]

$(“.类名”) 通过元素类名找元素

[cce_js]
<div class="red">立正,向我这边看齐</div>
        <div class="green">我先歇歇脚</div>
        
        <script type="text/javascript">
            var $redHTML = $(".red").html();
            $(".green").html($redHTML);
        </script>
[/cce_js]

$(“*”) 获取页面上所有元素也可以获取其它元素中的子元素,注意这个选择器在某些浏览器处理时会缓慢。

如:$(“div *”) 获取div下的所有子元素

$(“sele1,sele2,selen”) 多重选择,可以输入多个选择器,每个选择使用,号分隔。

[cce_js]
 <div class="red">选我吧!我是red</div>
        <div class="green">选我吧!我是green</div>
        <div class="blue">选我吧!我是blue</div>
        
        <script type="text/javascript">
            $(".red,.green").html("hi,我们的样子很美哦!");
        </script>
[/cce_js]

$(“父元素 后代元素”) 层次选择器,快速定位某一层的一个或多个元素,父和后代元素之前使用空格格开。

[cce_js]
<div>
            <p>
               <label></label>
            </p>
            <label></label>
        </div>
        
        <script type="text/javascript">
            $("div label").css("background-color","blue");
        </script>
[/cce_js]

 

$(“父元素>子元素”) 获取父的子元素。中间使用>号

[cce_js]
 <div>
            码农家族
            <p>
                <label></label>
            </p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("div>label").css("border", "solid 5px red");
        </script>
[/cce_js]

$(“prev + next”) 获取相邻下一个元素

[cce_js]
<div>
            码农家族
            <label></label>
            <p></p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("p+label").css("background-color","red");
        </script>
[/cce_js]

#(“prev ~ siblings”) 获取prev之多个同辈元素

 

[cce_js]
 <div>
            码农家族
            <label></label>
            <p></p>
            <label></label>
            <label></label>
        </div>
        <label></label>
        
        <script type="text/javascript">
            $("p~label").css("border", "solid 1px red");
            $("p~label").html("我们都是p先生的粉丝");
        </script>
[/cce_js]

:first 过滤选择器,获取元素集合中第一个元素

:last 过滤选择器,获取元素集合中最后一个元素

$(“li:first”) 获取第一个li元素

:ep(index) 选择任意一个标签元素,index是索引号,从0开始;

[cce_js]
 <div>改变中间行"葡萄"背景颜色:</div>
        <ol>
        <li>橘子</li>
        <li>香蕉</li>
        <li>葡萄</li>
        <li>苹果</li>
        <li>西瓜</li>
        </ol>
        
        <script type="text/javascript">
            $("li:eq(2)").css("background-color", "#60F");
        </script>
[/cce_js]

:contains(“text”) 获取包含text文字信息的元素

[cce_js]
<div>改变包含"jQuery"字符内容的背景色:</div>
        <ol>
            <li>强大的"jQuery"</li>
            <li>"javascript"也很实用</li>
            <li>"jQuery"前端必学</li>
            <li>"java"是一种开发语言</li>
            <li>前端利器——"jQuery"</li>
        </ol>
        
        <script type="text/javascript">
            $("li:contains('jQuery')").css("background", "green");
        </script>
[/cce_js]

:has(“元素名”) 获取包含所有元素名的元素。

[cce_js]
 <div>改变包含"label"元素的背景色:</div>
        <ol>
            <li><p>我是P先生</p></li>
            <li><label>L妹纸就是我</label></li>
            <li><p>我也是P先生</p></li>
            <li><label>我也是L妹纸哦</label></li>
            <li><p>P先生就是我哦</p></li>
        </ol>
        
         <script type="text/javascript">
            $("li:has('label')").css("background-color", "blue");
        </script>
[/cce_js]

:hidden 获取不可见的元素

val() 获取参数中value的值。

[cce_js]
 <h3>显示隐藏元素的内容</h3>
        <input id="hidstr" type="hidden" value="我已隐藏起来"/>
        <div></div>
        
        <script type="text/javascript">
        var $strHTML = $("input:hidden").val();
        $("div").html($strHTML);
    </script>
[/cce_js]

:visible 获取所有可见的元素

[cce_js]
<ul>
            <li style="display:none">橘子</li>
            <li style="display:block">香蕉</li>
            <li style="display:">葡萄</li>
            <li>苹果</li>
            <li style="display:none">西瓜</li>
        </ul>
        
        <script type="text/javascript">
            $("li:visible").css("background-color","blue");
        </script>
[/cce_js]

[属性名=属性值] 属性选择器,获取相同属性的元素

$(“li:[title=’thb’]”)

[cce_js]
<ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="水果">苹果</li>
            <li title="水果">西瓜</li>
        </ul>
        
        <script type="text/javascript">
            $("li[title='蔬菜']").css("background-color", "green");
        </script>
[/cce_js]

[属性名!=属性值] 属性选择器,获取不包含属性名或不相同属性值的元素

[cce_js]
<ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="水果">苹果</li>
            <li title="水果">西瓜</li>
        </ul>
        
        <script type="text/javascript">
            $("li[title!='蔬菜']").css("background-color", "green");
        </script>
[/cce_js]

[属性名*=属性值] 属性选择器,获取包含属性值的多个元素。

[cce_js]
<ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="人参果">小西红柿</li>
            <li title="水果">西瓜</li>
        </ul>
        
        <script type="text/javascript">
            $("li[title*='果']").css("background-color", "green");
        </script>
[/cce_js]

:first-child 获取每个父元素的子元素是一个集合

[cce_js]
 <h3>改变每个"蔬菜水果"中第一行的背景色</h3>
        <ol>
            <li>芹菜</li>
            <li>茄子</li>
            <li>萝卜</li>
            <li>大白菜</li>
            <li>西红柿</li>
        </ol>
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>苹果</li>
            <li>西瓜</li>
        </ol>
        
        <script type="text/javascript">
            $("li:first-child").css("background-color", "green");
        </script>
[/cce_js]

:last-child 获取每个父元素的最后一个子元素是一个集合。

[cce_js]
 <h3>改变每个"蔬菜水果"中最后一行的背景色</h3>
        <ol>
            <li>芹菜</li>
            <li>茄子</li>
            <li>萝卜</li>
            <li>大白菜</li>
            <li>西红柿</li>
        </ol>
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>苹果</li>
            <li>西瓜</li>
        </ol>
        
        <script type="text/javascript">
           $("li:last-child").css("background-color", "blue");
        </script>
[/cce_js]

 

发表评论

邮箱地址不会被公开。