jQuery中的遍历节点（作用与选择器类似）

来源：互联网发布：最小的windows 编辑：程序博客网时间：2024/06/05 07:14
jQuery代码如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">  .big{font-size:30px;}  .import{color:red;}</style><script type="text/javascript" src="../js/jquery-1.11.1.js"></script><script type="text/javascript">  //页面加载之后调用这个函数  //其作用等价于window.onload = function(){}  //注意：jQuery对象最好用$命名  $(function(){//1.jQuery读写节点//1.1读写内容(双标签中间的内容)html()=innerHTML包含标签       text()=innerTextvar a = $("p:eq(0)").html();var b = $("p:eq(0)").text();a = $("p:eq(0)").html("jQuery对<u>DOM</u>操作提供了支持");console.log(a);//包含标签console.log(b);//1.2读写值(表单控件有值--文本域和下拉选)//val()=valuevar c = $("input:button:eq(0)").val();//获取第一个buttonvar d = $(":button:first").val("BBB");console.log(c);//1.3读写属性()//attr("属性名")  getAttribute("属性名")//attr("属性名","属性值")  getAttribute("属性名","属性值")var e = $("img:eq(0)").attr("src");console.log(e);$("img:eq(0)").attr("src","../images/01.jpg");//2.jQuery增删节点//创建节点var $li1 = $("<li>杭州</li>");//是jQuery对象var $li2 = $("<li>苏州</li>");console.log($li1);//增加节点$("ul").append($li1).append($li2);var $li3 = $("<li>成都</li>");$("ul").prepend($li3);var $li4 = $("<li>下一个兄弟</li>");$("#gz").after($li4);var $li5 = $("<li>上一个兄弟</li>");$("#gz").before($li5);//删除节点//删除最后一个城市(苏州)$("li:last").remove();//清空节点内容//$("#gz").empty();//或者$("$gz").html("")//3.遍历节点：查找某节点的亲戚//有时候调用别人的方法得到一个节点,对其进行一些操作,又要对此节点的亲戚//进行操作,无法使用选择器,则只能调用这样的方法//假设当前获取了广州该节点var $li = $("#gz");var $prev = $li.prev();//上一个兄弟console.log($prev);var $next = $li.next();//下一个兄弟console.log($next);var $parent = $li.parent();//父亲ulconsole.log($parent);var $children = $("ul").children();//ul的所有孩子console.log($children);var $siblings = $li.siblings();//广州的所有兄弟console.log($siblings);//假设调用别人方法得到了ulvar $ul = $("ul");//获取列表的孩子做进一步处理(下标大于2的孩子)var $child = $ul.find("li:gt(2)");console.log($child);//4.样式操作相关方法//添加样式(返回值任然是jQuery对象)$("p").eq(0).addClass("big").addClass("import");//删除样式//$("p:eq(0)").removeClass("import");//删除所有样式removeClass()$("p").eq(0).removeClass();//判断元素是否包含某样式var flag = $("p:first").hasClass("import");//trueconsole.log(flag);  });  function bbb(btn){//对第一个段落切换样式(若有该样式则删除,若没有则添加)$("p:first").toggleClass("big");  }</script></head><body>  <p>jQuery对<b>DOM</b>操作提供了支持</p>  <p>    <input type="button" value="AAA"/>  </p>  <p>    <img src="../images/05.jpg" />  </p>    <ul>    <li>北京</li>    <li>上海</li>    <li id="gz">广州</li>    <li>深圳</li>    <li>天津</li>  </ul>  <input type="button" value="大大大" onclick="bbb(this);"/></body></html>
0 0