关闭

jquery 初学笔记(二)

494人阅读 评论(0) 收藏 举报
接jquery(一)

/////////////jQuery选择器

(Basic:基本选择器、Level:层次选择器、Filter:过滤选择器、Form:表单选择器,操作form元素)

(下面给出的例子只是列举具体的某些元素作为标记的实例)

:Basic:基本选择器

$(“#test”)= document.getElementById(“test”);// 从上往下获取单个元素,忽略后面的

$(“#test”).text();//此方法返回文本 =  $(“#test”)[0].innerText 转换为dom文档的属性

$(“#test”).html();//返回= $(“#test”)[0].innerHTML

$(document).ready(function()

         {

                   alert($("#test").text());// 获取第一个id元素

                   alert($("#test").html());

                   alert($("#test")[0].innerText);//转为document对象,用户属性表示

                   alert($("#test")[0].innerHTML);

         });

<body>

         <a id="test"href="#"><b>www.baidu.com</b></a>

         <!-- html 一般不允许id重复,此处用来测试 -->

         <a id="test"href="#"><b>www.google.com</b></a>

</body>

$(“.test”) 所有元素属性 class=”test”的集合

$(“p”) 选取所有<p>元素

$(“*”) 匹配所有元素集合

$(“div, p, span.test”) 选取 所有<div>、<p>、<span class=”test”>的元素集合

:Level:层次选择器

<div>

         <span id=”span1”></span>

<span id=”span2”></span>

<a><spanid=”span3”></span></a>

</div>

//选中id=span1/span2/ span3 后代 :儿子、孙子等等

$(“div span”) (后代)选择div中的所有span元素

$(“div > span”) // 选中id=span1/span2;span3不会被 选中

$(“.myClass + div”)// 选中 class=”myClass”后的第一个 div; 如下选中id=”div2”的div元素

(不推荐):可以使用$(“.myClass”).next(“div”) 代替

<div class=”one”>

         <span id=”span1”></span>

<span id=”span2”></span>

<a><spanid=”span3”></span></a>

</div>

<divid=”div2”></div>

(不推荐)$(“#two ~ div”)// 选取 id=”two”的元素后面的兄弟元素

可以使用$(“#two”).nextAll()代替 $(“#two”).siblings(“div”);寻找同辈的元素包括前面的

如:id=”three”和 four会被选中

<divid=”two”>

         <span id=”span1”></span>

<span id=”span2”></span>

<a><spanid=”span3”></span></a>

</div>

<divid=”three”>  

</div>

<divclass=”four”>        

</div>

Filter:过滤选择器

1.基本过滤器

$(“div:first”) // 选中所有div元素的第一个div元素

$(“div:last”) // 选中所有div元素的最后一个div元素

$(“input:not(.myClass)”) // 选中class !=”myClass”的input元素

$(“input:even”)  // 选中索引为偶数的input元素

$(“input:odd”)  // 选中索引为奇数的input元素

$(“input:eq(index)”)  // 选中索引等于index的input元素,index从0开始

$(“input:gt(index)”)  // 选中索引大于index的input元素,不包括index

$(“input:lt(index)”)  // 选中索引小于index的input元素,不包括index

$(“:header”) // 选中所有标题元素,如<h1>…

$(“div:animated”) // 选中div中所有动画元素

2、内容过滤器

$(“div:contains(‘我’)”) //选中含有文本“我”的div元素

$(“div:emtpy”) // 选中不含有子元素(包括文本)的div元素

$(“div:parent”) // 选中包含子元素(包含文本)的div元素

$(“div:has(p)”) // 选中含有<p>元素的div元素

3、可见性过滤器

$(“:hidden”) // 选中所有不可见的元素 type=”hidden”,visibility=”hidden”,display=”none”,等只要是不可见的元素 $(“div:hidden”) // 选中不可见的div元素

$(:visible) // 选取可见的

4、属性过滤器

$(“div[title]”) // 选中属性含有title的div,title没有显示设置不会被选中

$(“div[title=test]”) // 选中属性title=test的所有div

$(“div[title!=test]”) // 选中属性title!=test的所有div,没有属性title的也会被选中

$(“div[title^=test]”) // 选中属性title值以test的开头的所有div

$(“div[title$=test]”) //  选中属性title值 以test的结尾的所有div

$(“div[title*=test]”) //  选中属性title值 包含test的所有div

$(“div[id][title^=te][title$=st]”) // 选中包含属性id,并且以te开头,st结尾的title的所有div

$(“div.one :nth-child(2)”)// 选中 包含class=”one”的 div元素的第2个子元素 ,nth-child(index)所有从1开始

$(div.one :first-child) // 等价于$(“div.one:nth-child(1)”)

$(div.one :last-child) // class=”one”的div元素最后一个子元素

$(div.one :only-child) // class=”one”的div元素唯一的一个子元素

5、表单对象属性过滤器

$(“#form1 :enabled”) // 选取id=”form1”的表单内的所有可用的元素

$(“#form1 :disabled”) // 选取id=”form1”的表单内的所有不可用的元素

:checked // 选中所有被选中的元素($(“input :checked”) 一般用于单选框、复选框)

:selected// 所有被选中的下拉列表 $(“select :selected”)

:input  // $(“:input”) // 选中所有<input>/<>textarea>/<select>/<button>元素

:text // $(“:text”)// 选中所有type=”text”的单行文本

:password // $(“:password”)//…

:radio //所有的单选按钮

:image、:checkbox、:submit、:reset、:button、:file、:hidden、同上

注意:$(“#form1:input”) // 表单选择器,

获取form1表单中所有input>/<>textarea>/<select>/<button>元素

        $(“#form1 input”) // 层次选择器 ,获取<input>

            $(“.myClass:hidden”)// class=”myClass”的子元素中的隐藏元素

        $(“.myClass:hidden”)// 包含所有隐藏元素中class=”myClass”的元素


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:60036次
    • 积分:1026
    • 等级:
    • 排名:千里之外
    • 原创:42篇
    • 转载:15篇
    • 译文:1篇
    • 评论:3条
    最新评论