jQuery学习- 内容选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内容选择器</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
        $(function(){
        //利用:contains获取包含指定文本内容的组件    ,取得包含b的段落
//        $("p:contains(b)").css("border","2px solid red");

        //查找拥有子元素为input且类型为text的div对象
//        $("div:has(input[type=‘text‘])").css("border","2px solid orange");

        //标出拥有子元素 ,非空元素,利用:parent选择器 获取所有非空元素
//        $("*:parent").css("border","2px solid orange");

        //标出所有空元素,利用 :empty
//        $("*:empty").css("border","2px solid blue");

        //获取表单下所有输入元素
//        $(":input").css("border","2px solid orange");
        //获取所有按钮
//        $(":button, :submit, :reset").css("border","2px solid orange");
        //利用:disable 获取所有不可用表单元素
        $(":disable").css("border","2px dottle red");

        })
        //
        </script>
    </head>
    <body>
        <div>
            <p>
                aaaaaaaaaaaaaaaaaaaaaa
            </p>
            <p>
                bbbbbbbbbbbbbbbbbbbbbb
            </p>
            <p>
                ccccccccccccccccccccccccc
            </p>
        </div>
        <div>
            name:<input type="text" />
        </div>
        <div>
            <input type="button" value="sumbit" />
        </div>
        <div>
            <input type="button" value="ca"  disabled="disabled"/>
        </div>
        <p>

        </p>
        <form>

            <input type="button" value="formbutton"  disabled="disabled"/>
        </form>
    </body>
</html>
时间: 2024-10-26 04:06:21

jQuery学习- 内容选择器的相关文章

jQuery学习之------选择器

a.id选择器 <div id="test1"></div> var div1=$("#test1");                //同css的写法一样id选择器用#号实现 div1.css('color','red'); b.class选择器: <div class="test2"></div> var div2=$(".test2");                 

jQuery的内容选择器

JQuery中的内容选择器 JQuery中的内容选择器有四个: :contains(text) 匹配包含给定文本的元素 :empty 匹配所有不包含子元素或者文本的空元素 :has(selector) 匹配含有选择器所匹配的元素的元素 :parent 匹配含有子元素或者文本的元素 具体例子如下: <div></div> <div> <span></span> </div> <div>我是一个div</div>

JQuery学习笔记-选择器-(一)

选择器的简单使用 <%-- Created by IntelliJ IDEA. User: cxspace Date: 16-8-25 Time: 下午2:29 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html&

Jquery学习笔记 - 选择器

Jquery选择器与CSS选择器非常相似,CSS选择器提供诸多功能,同时两者在解析上均采用从右向左解析,因为在建立Render Tree时,若采用自左向右解析,没词匹配不成功均需要退回再进行匹配,而反向解析利用排除法,逐步缩小元素候选集,优化了从子元素找父元素的过程,对于大量元素很有效(所以采用通配符很低效) CSS的基础选择器: 群组选择器:selector1, selector2, selector3... 简单选择器:ID" #id ",标签" tag ",类

jquery学习:选择器&amp;dom操作

分类; 1.基本选择器 1.标签选择器(元素选择器) *  语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 *  语法:$("#id的属性值")  获得与指定id属性值匹配的元素 3.类选择器 *  语法:$(".class的属性值")  获得与指定的class属性值匹配的元素 4.并集选择器: *  语法:$("选择器1,选择器2....")  获得多个选择器选中的所有元素 $(function (){ /

JQuery学习笔记-选择器-1

在jQuery中 $()方法等价于jQuery()方法,前者比较常用,是后者的简写.一般只有在$()与其它语言冲突时才会使用jQuery()方法. parent > child选择器的范围,它所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈,它的调用格式:$("parent > child"),child参数获取的元素都是parent选择器的子元素,它们之间通过">"符号来表示一种层次关系. prev + next选择器就可以查找与&

jQuery学习之选择器

jQuery选择器总结:http://www.cnblogs.com/onlys/articles/jQuery.html

jQuery学习- 子选择器与可见性选择器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>子选择器与可见性选择器</title> <script src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ //出现在其父元

jQuery学习&lt;五&gt; — — 选择器(下)

七.子元素过滤选择器 :nth-child : $("ul li:nth-child(2)") 将所有ul中第二个li作为Dom对象放进jQuery包装集并返回 $("ul li:nth-child(odd)") 将所有ul中第奇数个li(从1开始)元素作为Dom对象放进jQuery包装集并返回,注意这里是从1开始.基本过滤器中eq是从0开始 :first-child : $("ul li:first-child") 将所有ul中的第一个li元素