jquery 初学笔记(二)

原创 2012年03月28日 02:03:11
接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”的元素


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JQuery的初学笔记——和原生JS的区别

最近摸索着学习JavaScript,从W3School上学习了原生的JS,后来又开始学习JQuery,觉得先入为主的思想在我身上体现的太强烈了,总是在用JQuery的时候敲成原生的写法,可能还是对JQ...

jQuery学习笔记(二)基础事件

一.绑定事件 在JavaScript 课程的学习中,我们掌握了很多使用的事件,常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseove...

jquery插件开发学习笔记(二)

写在前面我认为,今天的这个插件在写法上已经比较符合jquery插件开发的“正统”流程。在各个方面都考虑得比较完善。习惯了这种思路之后,对于开发功能完备的插件是大有帮助的。 相比较与第一个插件来说,插...

jQuery Mobile笔记二

不断学习中,内容会根据进度不断补充和调整,内容来自书籍,网络和本人实践,如有错误欢迎指正! 6、按钮 6.1 链接按钮 (1)默认按钮,填充其外层容器的整个宽度   data-ro...

jQuery学习笔记(二)选择器 事件

选择器: $(document).ready(function() { $("button").click(function() { $("p").css("background-c...

JQuery笔记二 :动画效果【蓝鸥HTML5出品】

JQuery笔记二 :动画效果【蓝鸥HTML5出品】

jQuery Mobile笔记二

不断学习中,内容会根据进度不断补充和调整,内容来自书籍,网络和本人实践,如有错误欢迎指正! 6、按钮 6.1 链接按钮 (1)默认按钮,填充其外层容器的整个宽度   data-role="...
  • mociml
  • mociml
  • 2012-07-30 18:37
  • 9407

慕课网jQuery学习笔记(二)

blur与focus事件  Focus()和focusin()之间的本质区别: 是否支持冒泡处理 举个简单的例子    其中input元素可以触发focus()事件 div是inp...

jquery笔记二

节点操作 $obj.append(div)   //把div插入到$obj内结尾 div.appendTo($obj) //把div插入到$obj内结尾 $objs.after(...

Struts2学习笔记(二)使用jQuery—Ajax技术的简单Demo

关于struts2的搭建,在Struts2学习笔记(一)中已经
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)