继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JQuery入门总结(三)【选择器、方法、Json】

所谓伊人_在水一方
关注TA
已关注
手记 273
粉丝 23
获赞 169

         l两种方式:[index]和.get(index)  l1.JQuery对象内部包含一个数组对象,可以通过[index]的方法,来得到相应的DOM对象

    var $txtName=$("#txtName");

     alert($txtName.val());

     var txtName= $txtName[0];

     alert(txtName.value);

l2.Jquery本身提供,通过.get(index)方法,得到相应的DOM对象

    var txtName=$txtName.get(0);

     alert(txtName.value);


 


lJQuery选择器用于查找满足条件的元素。  l基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和tagName来查找dom元素  l  l1.$("#id") : id选择器,document.getElementById("id");  l2.$("div") :元素选择器document.getElementByTagName("div");  l3.$(".myClass") : 类选择器,返回所有class="myClass"的元素  l4.$("*") : 返回所有元素,多用于结合上下文搜索  l5.$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素  
 



l如果想通过DOM元素之间的层次关系来获取特定的元素,如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器  l1.ancestor descendant


    $("form input") : 在给定的祖先元素下匹配所有后代元素,这个下面讲的parent > child 区分

l2.parent > child

    $("form > input"): 在给定的父元素下匹配所有子元素。要区别后代元素和子元素。

l3.prev + next

    $("lable + input ") : 匹配所有紧接在prev后的next元素

l4.prev ~ siblins

    $("form ~ input") : 匹配prev元素之后的所有siblings元素注意:在匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配。


 


l1、使用html()方法读取或者设置元素的innerHTML:  lalert($("#btn1").html());  l$("#btn1").html("hello");  l2、使用text()方法读取或者设置元素的innerText:  lalert($("#btn1").text());  l$("#btn1").text("hello");  l3、使用attr()方法读取或者设置元素的属性,对于JQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。  l       alert($(“#img1").attr("href"));  l       $("#btn1").attr("href","http://www.rupeng.com");         l4、使用removeAttr("href")删除属性。删除的属性在源代码中看不到,这是和清空属性的区别。“查看源文件”只能看服务器上下载下来的那份  
 



lnext()方法用于获取节点之后的挨着的第一个兄弟元素,$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有兄弟元素,$(".menuitem").nextAll("div")  lprev、prevAll兄弟中之前的元素。  lsiblings()方法用于获取所有同辈元素(前后都拿到),$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。  l案例:选中的p变色$(this).css();$(this).siblings().css()  l案例:评分控件。prevAll,this,nextAll  l重申问题,不要$().click=function;好多时候能.出来;不要在引用js的代码里再写代码。  
 



l:first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");  l:last 选取最后一个元素。$("div:last")选取最后一个<div>  l:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>  l:even、:odd,选取索引是奇数、偶数的元素:$("input:even")选取索引是奇数的<input>  l:eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>  l$("tr:gt(1):lt(5)")组合选择器是按照表达式从前向后进行数据过滤。  lslice (start,end) 获取下标范围内元素
        $(this) ------------------>当前元素  $("p") ------------------->所有<p>元素  $("input")---------------->所有input元素  $(".intro")--------------->所有class="intro"的元素  $("p.intro")-------------->所有class="intro"的<p>元素  $("#intro")--------------->id="intro"的第一个元素  $("ul>li")---------------->ul下的所有li节点  $("ul li:first")---------->每个<ul>的第一个<li>元素  $("[href$='.jpg']")------->所有带有以".jpg"结尾的href属性的属性  $("div#intro.head")------->id="intro"的<div>元素中的所有class="head"的元素  
   $("li[a:contains('Register')]")----------------->内容包含Register的<a>元素  $("input[@name=bar]")--------------------------->name是bar的<input>元素  $("input[@type=radio][@checked]")--------------->type是radio的<input>元素  $("li").not("ul")------------------------------->li下没有包含ul节点的节点元素  $("span[@id]")---------------------------------->包含id属性的<span>元素  $("[@id=span1]")-------------------------------->id为span1的节点元素    
     l属性过滤选择器:  


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP