jQuery_基础3
<script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript"> $(function() {var p = $("p");//有这样一种命名规范:jquery对象命名 $p 加一$符号 表示jquery对象 不加表示dom对象 var li = $("ul li:eq(1)");//第二个livar title = p.attr("title");//attr();一个参数:属性的名字返回属性的值(读操作). 两个参数:属性的name属性的值,写入操作 //上面那句=p[0].title//取得tilte属性的值var title2 = li.attr("title");var text = li.text(); alert(title);alert(title2);alert(text);li.attr("title", "myTitle");//传两个参数就是写操作 }); </script> </head> <body> <p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body> var addItems = function() { /* document.getElementById("div1").innerHTML = "";//最快的清空方式.每次appendChild之前清空.也可以用remove方法 //但是innerHTML="" 最佳实践var value = parseInt(document.getElementById('itemsNumber').value);for(var i = 0; i < value; i++){//参数:标签的名字var input = document.createElement("input");//设置属性,什么样的input.input.setAttribute("type", "text");var br = document.createElement("br");document.getElementById("div1").appendChild(input);//往div1标签下附加子元素document.getElementById("div1").appendChild(br);//这些JS的操作不会反馈到右键查看源代码//可以通过firebug查看,右键源代码不会显示附加的代码}*/ document.getElementById("div1").innerHTML = ""; var value = parseInt($("#itemsNumber").val());var str = "";for(var i = 0; i < value; i++){str += "<input type='text'><br>";}$("#div1").append(str); } </script> </head> <body> <input type="text" id="itemsNumber"> <input type="button" id="btn" value="click" onclick="addItems();"><div id="div1"></div> </body> <script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript"> $(function() { //附加两条li到后面 $("ul").append("<li title='abc'>hello</li>") .append("<li title='xyz'>world</li>");//第二种写法 附加一条li到后面$("<li title='abc'>hello</li>").appendTo($("ul")); }); </script> </head> <body><p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body><script type="text/javascript">$(function(){var li1 = $("<li title='hello'>hello</li>");var li2 = $("<li title='hello'>world</li>");var li3 = $("<li title='hello'>hello world</li>");//附加到最后一个li后面$("ul").append(li1);//附加到第一个li前面$("ul").prepend(li2);//附加到指定位置 $("ul li:eq(4)").after(li3);});</script> </head> <body><p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body><script type="text/javascript">$(function(){//将第3个节点插入到第5个节点后$("ul li:eq(2)").insertAfter("ul li:eq(4)");});</script> </head> <body><p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body><script type="text/javascript">$(function(){//remove方法会返回被移除的节点的jQuery对象var removedLi = $("ul li:eq(3)").remove(); removedLi.appendTo($("ul"));//$("ul li"):获得后代元素//$("ul li").remove("li[title != 2]");$("ul li:eq(3)").empty(); //清空元素中的内容});</script> </head> <body> <p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body><script type="text/javascript">/*var addMore = function(){var div = document.getElementById("div1");var br = document.createElement("br");var input = document.createElement("input");var button = document.createElement("input");input.setAttribute("type", "file");button.setAttribute("type", "button");button.setAttribute("value", "Remove");//每次删除的对象不一样. 删除当前对象 button.onclick = function(){div.removeChild(br);div.removeChild(input);div.removeChild(button);//把自己也要删除掉}div.appendChild(br);div.appendChild(input);div.appendChild(button);}*/var count = 0;$(function(){$("input[type=button]").click(function(){var br = $("<br>");var input = $("<input type='file'>");var button = $("<input type='button' value='Remove" + (++count) + " '>");$("#div1").append(br).append(input).append(button);button.click(function(){br.remove();input.remove();button.remove();});});});</script> </head> <body><input type="file"> <input type="button" value="more..."><div id="div1"></div> </body><script type="text/javascript"> $(function() {$("ul>li").click(function(){//当前对象赋值一份附加到ul上面//this:当前所用的对象//$(tihs):转成jquery对象//clone(true):克隆出来的对象拥有被克隆对象的事件$(this).clone(true).appendTo("ul");}); });</script> </head> <body> <p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body><script type="text/javascript">$(function(){//将整个的p元素替换掉. 两种方法等效//$("p").replaceWith("<a href='http://www.google.com'>Google.com</a>");$("<a href='http://www.google.com'>Google.com</a>").replaceAll("p");});</script> </head> <body><p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body><script type="text/javascript">$(function(){//包在所有元素外面//$("p").wrap("<a href='http://www.google.com'><b></b></a>");//包在最内层文本外面$("p").wrapInner("<a href='http://www.google.com'><b></b></a>");});</script> </head> <body><p title="hello world">您认为圣思园培训好不好呢？</p><br><p title="hello world">您认为圣思园培训好不好呢？</p><br><p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body><script type="text/javascript">$(function(){$("input:eq(0)").click(function(){//给多个属性赋值$("p").attr({"title":"welcome", "hello": "world"});});$("input:eq(1)").click(function(){//1个参数表示读取alert($('p').attr("hello"));});$("input:eq(2)").click(function(){//删除属性$('p').removeAttr("title");});});</script> </head> <body><input type="button" value="button1"><input type="button" value="button2"><input type="button" value="button3"><br><p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body><html> <head><style type="text/css">.high{font-weight: bold;color:red}.another{font-style:italic;color:green}</style> <script type="text/javascript" src="jquery-1.4.4.js"></script><script type="text/javascript"> $(function() { //索引位置为0的inut$("input:eq(0)").click(function(){alert($('p').attr("class"));}); $("input:eq(1)").click(function(){ //新加一个class. 如果原来就存在则替换掉原来的.$("p").attr("class", "high");});$("input:eq(2)").click(function(){ //对p元素附加一个css.原来就有的话 追加 $("p").addClass("high");});$("input:eq(3)").click(function(){//移除class中某个属性$("p").removeClass("high");});$("input:eq(4)").click(function(){//移除class$("p").removeClass();});$("input:eq(5)").click(function(){//如果有class为annother的. 则移除,如果没有则增加annother这个class$("p").toggleClass("another");});$("input:eq(6)").click(function(){//alert($('p').hasClass('another'));alert($('p').is('.another'));}); });</script> </head> <body><input type="button" value="button1"><input type="button" value="button2"><input type="button" value="button3"><input type="button" value="button4"><input type="button" value="button5"><input type="button" value="button6"><input type="button" value="button7"><p title="hello world" name="code"><script type="text/javascript"> $(function() {$("input:eq(0)").click(function(){//<b>您认为圣思园培训好不好呢？</b>console.info($("p").html());});$("input:eq(1)").click(function(){//您认为圣思园培训好不好呢？console.info($("p").text());});$("input:eq(2)").click(function(){//给p标签附上HTML代码$("p").html('<a href="http://www.google.com">hello world</a>');});$("input:eq(3)").click(function(){//给p标签附上文本$("p").text('<a href="http://www.google.com">hello world</a>');});$("input:eq(4)").click(function(){//button5console.info($(this).val());});$("input:eq(5)").click(function(){//相当于标签里的value=""$(this).val('hello world');}); });</script> </head> <body><input type="button" value="button1"><input type="button" value="button2"><input type="button" value="button3"><input type="button" value="button4"><input type="button" value="button5"><input type="button" value="button6"><br> <p title="hello world"><B>您认为圣思园培训好不好呢？</B></p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li> </body><script type="text/javascript">$(function(){//输入框获得焦点后触发 jquery中没有on前缀了. js中是onfocus$("#username").focus(function(){var value = $(this).val();// this.defaultValue 此时this是dom的this. 表示页面加载完的值if(value == this.defaultValue){$(this).val('');}});//blur 焦点离开$('#username').blur(function(){var value = $(this).val();if(value == ''){$(this).val(this.defaultValue);}});//输入框获得焦点后触发 jquery中没有on前缀了. js中是onfocus$("#password").focus(function(){var value = $(this).val();if(value == this.defaultValue){$(this).val('');}});//blur 焦点离开$('#password').blur(function(){var value = $(this).val();if(value == ''){$(this).val(this.defaultValue);}});}); </script> </head> <body><input type="text" id="username" value="用户名"><br><input type="password" id="password" value="aaaaaa"><br><input type="button" value="我是一个按钮"> </body>$(function(){//获得body下面的所有孩子. 不包括孙子var v1 = $("body").children();//p的孩子var v2 = $("p").children();//ul的孩子var v3 = $("ul").children();console.info(v1.length);//2console.info(v2.length);//0console.info(v3.length);//6for(var i = 0; i < v3.length; i++){//jquery对象转成了dom对象console.info(v3[i].innerHTML);}})</script> </head> <body> <p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body><script type="text/javascript">$(function(){//同辈的下一个元素var v1 = $("p").next();console.info(v1.html());//上一个同辈元素var v2 = $('p').prev();console.info(v2.html());//上下所有的同辈元素var v3 = $('p').siblings();console.info(v3.length);});</script> </head> <body> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> <ul> <li title="1">bb</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> <p title="hello world">您认为圣思园培训好不好呢？</p> <ul> <li title="1">aa</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> <ul> <li title="1">好</li> <li title="2">很好</li> <li title="3">非常好</li> <li title="4">特别好</li> <li title="5">太好了</li> <li title="6">好的无法描述了</li></ul> </body><script type="text/javascript">//js中默认的事件处理:冒泡. 单击里面的元素,外层也会处理. 向外寻找var method1 = function(){console.info("div clicked");}var method2 = function(event){console.info(event);console.info("span clicked");}var method3 = function(){console.info("body clicked");}</script></head><body onclick="method3();"><div id="content" onclick="method1();">外层div元素<span onclick="method2(event);">内层span元素</span>外层div元素</div><div id="msg"></div></body><script type="text/javascript"> var startTime = new Date().getTime(); $(document).ready(function(){test1(); }) function test1(){ var endTime2 = new Date().getTime(); var a = endTime2 - startTime; $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("#div1"); } function test2(){ var endTime1 = new Date().getTime(); var b = endTime1 - startTime; $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("#div1"); }</script></head><!-- //onload:页面全部加载完毕,外部文件(图片,css,js)也要全部加载完.才执行dom的onload//jquery的ready:执行时机比dom的onload早很多,dom已准备好就执行. 图片未加载前执行--><body onload="test2();"><img src="http://www.shengsiyuan.com/Images/Ad/N.jpg" style="width:200px;height:200px;"/><img src="http://www.infoq.com/resource/skyscraper/250/InfoQ%20Banner%20-%20ME4S.gif" style="width:200px;height:200px;"/><div id="div1"></div></body>