关闭

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

1755人阅读 评论(0) 收藏 举报
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]")--------------------------->namebar的<input>元素
$("input[@type=radio][@checked]")--------------->typeradio的<input>元素
$("li").not("ul")------------------------------->li下没有包含ul节点的节点元素
$("span[@id]")---------------------------------->包含id属性的<span>元素
$("[@id=span1]")-------------------------------->id为span1的节点元素

l属性过滤选择器
�$("div[id]")选取有id属性的<div>
�$("div[title=test]")选取title属性为“test”的<div>,JQuery中没有对getElementsByName进行封装,用$("input[name=abc]")
�$("div[title!=test]")选取title属性不为“test”的<div>
�还可以选择开头、结束、包含等,条件还可以复合。(*)
l表单对象选择器(过滤器):
�$("#form1:enabled")选取id为form1的表单内所有启用的元素
�$("#form1:disabled")选取id为form1的表单内所有禁用的元素
�$("input:checked")选取所有选中的元素(Radio、CheckBox)
$("select option:selected")选取所有选中的选项元素(下拉列表)

l$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样,$("input")只获得<input>
l$(":text")选取所有单行文本框,等价于$("input[type=text]")
$(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

$(select,queryContext)
例子:        
//$("td",$("#mytr"))相对该行tr下的搜有td            
$("td",$("#mytr")).css("background","green");

l使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到其他节点(元素)中:
l       varlink = $("<a href='http://www.baidu.com'>百度</a>");
l       $("div:first").append(link);
l$()创建的就一个jQuery对象,可以完全进行操作
�var link = $("<a href='http://www.baidu.com'>百度</a>");
�link.text("百毒");
�$("div:first").append(link);
lA.append(C)方法.将 C对象 追加到 A对象中
用来在元素的末尾追加一个子元素。
创建出的元素没有append到界面之前无法用选择器找到的,就像数据没有insert到数据库之前无法select出来的。
lA.appendTo(C)。将对象A 移到对象C 中。
$("#select1option:selected").remove().appendTo($("#select2")) ;

     $("#select1option:selected").appendTo($("#select2")) ;

lafter,在元素之后添加元素(添加兄弟)。
before:在元素之前添加元素(添加兄弟).

l使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到其他节点(元素)中:
l       varlink = $("<a href='http://www.baidu.com'>百度</a>");
l       $("div:first").append(link);
l$()创建的就一个jQuery对象,可以完全进行操作
�var link = $("<a href='http://www.baidu.com'>百度</a>");
�link.text("百毒");
�$("div:first").append(link);
lA.append(C)方法.将 C对象 追加到 A对象中
用来在元素的末尾追加一个子元素。
创建出的元素没有append到界面之前无法用选择器找到的,就像数据没有insert到数据库之前无法select出来的。
lA.appendTo(C)。将对象A 移到对象C 中。
$("#select1option:selected").remove().appendTo($("#select2")) ;

     $("#select1option:selected").appendTo($("#select2")) ;

lafter,在元素之后添加元素(添加兄弟)。
before:在元素之前添加元素(添加兄弟)

l替换节点:
l$("br").replaceWith("<hr/>");
l将<br/>替换为<hr/>
l
l包裹节点
lwrap()方法用来将所有元素逐个用指定标签包裹:
l$("b").wrap("<fontcolor='red'></font>") 将所有粗体字红色显示

l属性:pageX、pageY、target获得触发事件的元素(冒泡的起始,和this不一样)、which如果鼠标事件获得按键(1左键,2中键,3右键)。altKey、shiftKey、ctrlKey获得alt、shift、ctrl否按下,为bool值。keyCode、charCode属性发生事件时的keyCode(键盘码,小键盘的1和主键盘的keyCode不一样)、charCode(ASC码)。
l移除事件绑定:bind()方法即可移除元素上所有绑定的事件,如果unbind("click")则只移除click事件的绑定。bind:+=;unbind:-=
l一次性事件:如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定:

lanimate:anmite内部设置的多个值同步变化的,链式的animate依次动画的。
l例子:animate({ left: 0, top: 0, width: 300,height: 300 })、.animate({opacity: 0 }).animate({ opacity: 1 })。
l还可以指定增量,$(“#div1”).animate({height: “+=100” }); //如果+=、-=等增量形式要写成字符串,因为JavaScript不认识这种语法

处理Json eg:
[
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"},
{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"},
{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"}
]


完整代码:

<script>
var UserList = [
{"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"},
{"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"},
{"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"}
];
alert(UserList[0].Name.FirstName);
</script>

事实上除了使用"."引用属性外,我们还可以使用下面语句:

alert(UserList[0]["Name"]["FirstName"]); 或者 alert(UserList[0].Name["FirstName"]); 
sbHtml.Append("[");
            foreach (MODEL.Area model in list)
            {
                sbHtml.Append("{AID:" + model.AID + ",AName:'" + model.AName + "'},");
            }
            sbHtml.Remove(sbHtml.Length - 1, 1).Append("]");

页面获取json对象:

                        var jsonArr = eval("(" + msg + ")");
                        alert("Totalrec:" + jsonArr[0].Totalrec);
                        alert("Totalpage:" + jsonArr[0].Totalpage);

                        //填充文献类型部分
                        var cateTemp = "";
                        json = eval(jsonArr[1]);
                        for (var perObj in json) {
                            cateTemp = cateTemp + "<li>" + perObj + "(<a>" + json[perObj] + "</a>)</li>";
                            //alert(cateTemp);
                        }

0
0

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