jQuery学习(2)
<script type="text/javascript"> //给网页中所有的<p>元素添加onclick事件 $("p").click(function(){ alert($(this).text()); //$(this).text("abc");//改变值 }); //使一个特定的表格隔行变色 //table:eq(0)表示找到第一个表格 $("table:eq(0) tr:even").css("background","red"); //$("table:gt(0) tr:odd").css("background","red"); </script>
<!DOCTYPE html> <html> <head> <title>formObjectFilter.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.js"> </script> </head> <body> <h1>XXXXX</h1> <h2>XXXXXXXXXXXXXX</h2> <h3>XXXXXXXXXXXXXXXXXXXXXXXXX</h3> <input type="button" value="利用 jQuery 对象的 val()方法改变表单内 type=text 可用<input>元素的值" id="b1"/> <input type="button" value="利用 jQuery 对象的 val()方法改变表单内 type=text 不可用<input>元素的值" id="b2"/> <input type="button" value="利用 jQuery 对象的 length 属性获取多选框中的个数" id="b3"/> <input type="button" value="利用 jQuery 对象的 text() 方法获取下拉框中的内容" id="b4"/> <br/> <input type="text" value="篮球1"/> <input type="text" value="篮球2"/> <input type="text" value="篮球3" disabled="true"/> <input type="text" value="篮球4" disabled="true"/> <br/> <input type="checkbox" value="爱好1"/>爱好1 <input type="checkbox" value="爱好2"/>爱好2 <input type="checkbox" value="爱好3"/>爱好3 <input type="checkbox" value="爱好4"/>爱好4 <br/> <select name="job" size=9 multiple="multiple"> <option value="选项1">选项1^^</option> <option value="选项2">选项2^^</option> <option value="选项3">选项3^^</option> <option value="选项4">选项4^^</option> <option value="选项5">选项5^^</option> <option value="选项6">选项6^^</option> </select> <select id="hsp" name="edu"> <option value="博士">博士^^</option> <option value="硕士">硕士^^</option> <option value="本科">本科^^</option> <option value="小学">小学^^</option> </select> </body> <script type="text/javascript"> //利用 jQuery 对象的 val()方法改变表单内 type=text 可用<input>元素的值 $("#b1").click(function(){ $("input[type=text]:enabled").val("XXXXXX"); }); //利用 jQuery 对象的 val()方法改变表单内 type=text 不可用<input>元素的值 $("#b2").click(function(){ $("input[type=text]:disabled").val("XXXXXXX"); }); //利用 jQuery 对象的 length 属性获取多选框中的个数 $("#b3").click(function(){ alert($("input[type=checkbox]:checked").length); }); //利用 jQuery 对象的 text() 方法获取下拉框中的内容 $("#b4").click(function(){ //alert($("select option:selected").text()); $("select option:selected").each(function(){ alert($(this).text()); }); }); </script> </html>
得到标签类型的个数
<!DOCTYPE html> <html> <head> <title>formFilterselecter2.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.js"> </script> </head> <body> <input type="button" value="button1" /> <input type="button" value="button1" /> <input type="button" value="button1" /> <input type="button" value="button1" /> </body> <script type="text/javascript"> alert($(":button").length);//得到所有的button alert($("button").length);//得到<button/>按照元素标签取值 alert($("input[type='button']").length); </script> </html>
选择器本身是不难的，难在选择。
1.选择id=yy的元素？
使用基本选择器
2.选择所有div元素
使用简单选择器里的element
3.选择所有p元素和span元素？
多个选择器
4.选择所有隐藏的div
可见性
下面代码可以输出被选中的checkbox个数。
$("#b1").click(function(){
alert($("input[type='checkbox']:checked").length);
});
jquery中的DOM操作
HTML DOM
CSS DOM
快速入门案例
创建节点：
js dom 创建 p var mypnode=document.createElement("p");
jquery 去创建 p var mypnode=$("<p/>");
或者 var mypnode=$("<p></p>");
如果<p></p>有内容， var mypnode=$("<p>我是中国人</p>");
运行时碰到一个小问题：
原因是将代码
var $li=$("<li/>");
错写成了
var $li=("<li/>");
步骤
①创建节点
②添加文本
.text()
③添加属性
.attr("名字","属性的值");
④挂载到指定的元素下
append()//注意这里不是appendchild()
完整代码如下所示：
<body> <ul id="city"> <li>北京</li> <li>上海</li> </ul> </body> <script type="text/javascript"> //增加<li id="tj" name="tianjin">天津</li> //创建<li></li> var $li=$("<li/>"); //var $li=$("<li>天津</li>"); //设置文本 <li>天津</li> $li.text("天津"); //设置属性 $li.attr("id","tj");//attr("id"),表示得到id值，如果attr("id","tj")表示创建 //<li d="tj" name="tianjin">天津</li> $("#city").append($li); </script>
添加属性。
内部插入节点
A.append(B);把B加到A后面
A.appendTo(B);把A加到B后面
$li.appendTo("#city");
prepend():向每个匹配的元素的内部的开始出插入内容。
$li.text("发达城市");
$("#city").prepend($li);
after()和before()
/after(content):在每个匹配的元素之后插入内容，反恐这个元素就会自动消失 //$("#sh").after($("#fk")); //before(content):在每个匹配的元素之前插入内容 //$("#sh").before($("#fk")); //insertAfter(content):把所有匹配的元素插入到另一个指定的元素集合的后面 $("#sh").insertAfter($("#fk"));//这个功能和after()功能相反
测试html
<p name="p1">Hello</p>How are<p>you</p>
删除js代码
//从DOM中删除所有匹配的元素 //把所有p元素和p元素的子元素一起去掉 //$("p").remove(); $("#sh").remove(); $("p").empty();//清空节点-情况元素中的所有后代节点（不包含属性节点） alert($("p").attr("name"));
删除节点
步骤①找到你要删除的元素节点
调用remove()，不需要找的父节点。
清空某个节点的子节点
empty(),它自己要被保留。
复制节点
clone()：克隆匹配的DOM元素，返回值为克隆后的副本，但此时的节点不具有任何行为。
$("button").click(function(){
alert("XXXX");
});
//$("button").clone().prependTo($("p"));
$("button").clone(true).prependTo($("p"));
替换节点
$("p").replaceWith("<p>新</p>");
prependTo是放在前面。
$("p").replaceWith("<button>new</button>");
还有replaceAll();
属性操作
attr():获取属性和设置属性
jQuery中有很多方法都是一个函数实现获取和设置。如：attr(),html(),text(),val(),height(),width(),css()等
removeAttr():删除指定元素的指定属性
<body> <input type="text" title="abc" value="abc" id="input1"/> <input type="button" value="abc" id="button1"/> </body> <script type="text/javascript"> /* $("#input1").attr("type","button"); $("#button1").attr("type","text"); $("#button1").attr("title","abc"); */ $("#button1").css("background","red"); </script>
样式操作
<!DOCTYPE html> <html> <head> <title>removeElement.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script> <style type="text/css"> .one{ background:red; } .two{ background:blue; } </style> </head> <body> <input type="button" value="所以获取class和设置class都可以使用attr()方法来完成" id="b1"/> <input type="button" value="追加样式:addClass()" id="b2"/> <input type="button" value="移除样式:removeClass() ---从匹配的元素中删除全部或指定的class" id="b3"/> <input type="button" value="切换样式：toggleClass() -- 控制样式上的重复切换，如果类名存在则删除它，不存在则添加它" id="b4"/> <input type="button" value="判断是否含有某个样式：hasClass() --- 判断元素中是否含有某个class。如果有，则返回true，否则返回false" id="b5"/> <div id="first" > first </div> <div id="second"> second </div> </body> <script type="text/javascript"> //所以获取 class 和设置 class 都可以使用attr()方法来完成 $("#b1").click(function(){ $("#first").attr("class","one"); }); //追加样式：addClass() $("#b2").click(function(){ $("#first").addClass("two"); }); //移除样式:removeClass() ---从匹配的元素中删除全部或指定的class $("#b3").click(function(){ $("#first").removeClass(); }); //切换样式：toggleClass() -- 控制样式上的重复切换，如果类名存在则删除它，不存在则添加它 $("#b4").click(function(){ $("#first").toggleClass("one"); }); //判断是否含有某个样式：hasClass() --- 判断元素中是否含有某个class。如果有，则返回true，否则返回false $("#b5").click(function(){ alert($("#first").hasClass("one")); }); </script> </html>
<body> <input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br/> <input type="password" value="" id="b2"/><br/> <input type="button" value="登录" id="b3"/><br/> <br/> </body> <script type="text/javascript"> $("#b1").focus(function(){ var curValue=$(this).val(); if(curValue==this.defaultValue){ $(this).val(""); } }); $("#b1").blur(function(){ //获取当前值 var curValue=$(this).val(); if($.trim(curValue)==""){ $(this).val(this.defaultValue); } }); </script>
<!DOCTYPE html> <html> <head> <title>test.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script> </head> <body> <input type="button" value="使单选下拉框的'2号'被选中" id="input1"/><br> <input type="button" value="使多选下拉框中的'2号'和'5号'被选中"/><br> <input type="button" value="使复选框的'复选2'和'复选4'被选中"/><br> <input type="button" value="使单选框的'单选2'被选中"/><br> <br/> <select id="one"> <option>1号</option> <option>2号</option> <option>3号</option> </select> <select id="many" multiple="multiple" style="height:120px;"> <option selected="selected">1号</option> <option>2号</option> <option>3号</option> <option>4号</option> <option>5号</option> <option selected="selected">6号</option> </select> <input type="checkbox" name="c" value="check1"/>复选1 <input type="checkbox" name="c" value="check2"/>复选2 <input type="checkbox" name="c" value="check3"/>复选3 <input type="checkbox" name="c" value="check4"/>复选4 <br/> <input type="radio" name="r" value="radio1"/>单选1 <input type="radio" name="r" value="radio2"/>单选2 <input type="radio" name="r" value="radio3"/>单选3 </body> <script type="text/javascript"> $(document).ready(function(){ //使单选下拉框的'2'号被选中 $("#input1").click(function(){ $("#one").val("2号"); }); //使多选下拉框选中的'2号'和'5号'被选中 $("input:eq(1)").click(function(){ $("#many").val(["2号","5号"]); }); //使复选框的'复选2'和'复选4'被选中 $("input:eq(2)").click(function(){ $("input[type='checkbox']").val(["check2","check4"]); //说明["check2","check4"]是一个数组 }); //使单选框的'单选2'被选中 $("input:eq(3)").click(function(){ $("input[type=radio]").val(["radio2"]);//必须用[] }); }); </script> </html>
常用的遍历节点方法
取得匹配元素的所有子元素组成的集合:children()。该方法只考虑子元素而不考虑任何后代元素。
取得匹配元素后面紧邻的同辈元素的集合：next();
取得匹配元素前面紧邻的同辈元素的集合：prev();
取得匹配元素前后所有的同辈元素:siblings()
代码如下所示：
<!DOCTYPE html> <html> <head> <title>removeElement.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery.js"></script> </head> <body> <input type="button" id="b2" value="查找所有子元素"> <input type="button" id="b3" value="获取后面的同辈元素"> <input type="button" id="b4" value="获取前面的同辈元素"> <div> ccccccccccccccccccccc </div> <div class="one"> <div id="one" > XXXXXXXXXXXXXXX one </div> <div id="two" > XXXXXXXXXXXXXXX two </div> <div id="three" > XXXXXXXXXXXXXXX three </div> <div id="four" > XXXXXXXXXXXXXXX four </div> </div> <div> ttttttttttttttt </div> </body> <script type="text/javascript"> //查找所有子元素 $("#b2").click(function(){ $(".one").children().each(function(index,data){ alert(index+" "+$(data).text()); }); }); //获取后面的同辈元素 $("#b3").click(function(){ $(".one").next().each(function(index,data){ alert(index+" "+$(data).text()); }); }); //获取前面的同辈元素 $("#b4").click(function(){ $(".one").prev().each(function(index,data){ alert(index+" "+$(data).text()); }); }); </script> </html>
