jQuery_基础2
if(document.getElementById("hello")) {document.getElementById("hello").style.color = "red";//如果没上面的if判断 ,没对应的id 会报错,get不到dom对象 } <script type="text/javascript"> alert("test!!"); alert($("#hello").css("color","red"));//读一个参数 写两个参数,方法名同一个(jquery调用css方法 通常做法) alert($("#hello").css("color")); alert($("#hello")[0].innerHTML);//转成dom对象 alert($("#hello").get(0));//转成dom对象 //当没有id时,获取不到,但还是一个对象,dom会报错.jquery不会报错,一个空的对象. length:获取到dom对象的个数,每个jquery对象都有的属性 </script><script type="text/javascript">/* window.onload = function() {var myTable = document.getElementById("table1");//逐层遍历 var myTBody = myTable.getElementsByTagName("tbody")[0]; var myTrs = myTBody.getElementsByTagName("tr");for(var i = 0; i < myTrs.length; i++){if(i % 2 == 0){myTrs[i].style.backgroundColor = "red";//css中:style="background-color" JS中要去掉横线,横线后的首字母变大写}else{myTrs[i].style.backgroundColor = "blue";}} }*///两种方法 上面的原生JS方法,下面的jquery方法 $(function() {$("#table1>tbody tr:even").css('background', 'red');$("#table1>tbody tr:odd").css('background', 'blue'); }); </script> <body><table id="table1" border="1" align="center" width="80%"><tbody><!-- tbody:表示表格的实际内容 --> <tr><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr> <tr><td>world</td><td>world</td><td>world</td><td>world</td></tr> <tr><td>welcome</td><td>welcome</td><td>welcome</td><td>welcome</td></tr> <tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr> <tr><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td></tr> <tr><td>ccccc</td><td>ccccc</td><td>ccccc</td><td>ccccc</td></tr> <tr><td>ddddd</td><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr> <tr><td>eeeee</td><td>eeeee</td><td>eeeee</td><td>eeeee</td></tr> <tr><td>fffff</td><td>fffff</td><td>fffff</td><td>fffff</td></tr></tbody></table> </body><script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript">/* window.onload = function() {var btn = document.getElementById("myButton");btn.onclick = function(){var count = 0;var checkboxs = document.getElementsByName("myCheck");for(var i = 0; i < checkboxs.length; i++){if(checkboxs[i].checked){count++;}}alert("number: " + count);} }*/$(function(){$("#myButton").click(function(){alert("选中个数： " + $('input[name="myCheck"]:checked').length);});});</script> </head> <body> <input type="checkbox" name="myCheck" checked="checked"> <input type="checkbox" name="myCheck"> <input type="checkbox" name="myCheck" checked="checked"> <input type="checkbox" name="myCheck"> <input type="checkbox" name="myCheck"> <br><br> <input type="button" value="click me" id="myButton"> </body> <head> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.4.4.js"></script><script type="text/javascript"> $(document).ready(function(){alert($("a").length);//如果获取的是根据id来的 length就为1,如果根据标签来的有几个就显示几个alert($("#test1").html());alert($("#test1").text());alert($("#test1").length);alert($("#test1").val);alert($(".test2").length);//根据class来 有几个就显示几个});</script> </head> <body><a id="test1" href="http://www.google.com"><b><B>google</B></b></a><a id="test1" href="http://www.yahoo.com">yahoo</a> </body> $(document).ready(function() { //button1的按钮 点击 响应click(JS中叫onclick)$("#button1").click(function(){//id为one的标签 背景颜色改为红色$("#one").css("background", "red");}); $("#button2").click(function(){ //根据class找.底层隐藏了循环$(".mini").css("background", "green");}); $("#button3").click(function(){ //根据div查找$("div").css("background", "orange");});$("#button4").click(function(){//所有的$("*").css("background", "blue");});$("#button5").click(function(){$("span, #two, .mini").css("background", "pink");}); }); $(document).ready(function() {$("#button1").click(function(){//body 下面的所有div(子元素,孙子元素,所有后代),$('body div'):单引双引都可以$('body div').css("background", "red");});$("#button2").click(function(){//body下的div子元素,仅限子元素.孙子元素不算$('body>div').css("background", "blue");});$("#button3").click(function(){//class为one的下一个div元素(可能有很多个下一个,下一个class也为one的情况下)//下面两种写法等价//$('.one + div').css("background", "green");$('.one').next('div').css("background", "green");});$("#button4").click(function(){//id为two后的所有兄弟元素,下面两种写法等价//$("#two ~ div").css("background", "orange");//$('#two').nextAll('div').css("background", "orange");//id为two的所有兄弟元素. 与前后顺序无关.$('#two').siblings('div').css("background", "orange");}); });//$(document) 可以写成 $() 默认是document $(document).ready(function() {$("#button1").click(function(){//选择第一个div$("div:first").css("background", "red");});$("#button2").click(function(){//最后一个div$("div:last").css("background", "blue");});$("#button3").click(function(){//索引为偶数的div.隐藏的也参与$("div:even").css("background", "green");});$("#button4").click(function(){//索引位置为奇数的div$("div:odd").css("background", "orange");});$("#button5").click(function(){//索引为3的元素$("div:eq(3)").css('background', "pink");});$("#button6").click(function(){//class不为one的div$("div:not(.one)").css('background', "yellow");}); $("#button7").click(function(){//索引大于3的div$("div:gt(3)").css('background', "#abcdef");})$("#button8").click(function(){//索引小于3的素有元素$("div:lt(3)").css('background', "#fedcba");})$("#button9").click(function(){//选取标题元素:h1-h6 6个$(":header").css('background', "#cdefab");}) });$(function() {$("#button1").click(function(){//外面双引号则里面单引号 或者 相反//文案包含:test222$("div:contains('test222')").css("background", "red");}); $("#button2").click(function(){ //不包含文本内容,不包含空,或者不包含子元素的div$("div:empty").css("background", "green");});$("#button3").click(function(){//class为mini$("div:has(.mini)").css("background", "blue");});$("#button4").click(function(){//和empty对立$("div:parent").css("background", "#abaaee");}); }); <script type="text/javascript"> $().ready(function() {$("#button1").click(function(){alert($('div:hidden').length);alert($('input:hidden').length);//方法链. 把不可见的div变为可见//show();里面的参数:时间,整个显示动作的时间$('div:hidden').show(1000).css("background", "blue");});$("#button2").click(function(){//可见的div$('div:visible').css("background", "green");}); }); $(function() {$("#button1").click(function(){//含有title属性的div$('div[title]').css("background", "green");}); $("#button2").click(function(){ //含有title=test属性的div$("div[title=test]").css("background","red");});$("#button3").click(function(){//title不等于test的div,包含不含title属性的div$("div[title!=test]").css("background","pink");});$("#button4").click(function(){//含有 tilte=以test开头的div$("div[title^=test]").css("background","pink");});$("#button5").click(function(){//含有title=以st结尾的div$("div[title$=st]").css("background","pink");});$("#button6").click(function(){//含有title=*st*的div$("div[title*=st]").css("background","pink");});$("#button7").click(function(){//含有属性id ,tilte,并且title的属性值以t开头,并且以t结尾的div$("div[id][title^=t][title$=t]").css("background","pink");}); });$(function(){$("#button1").click(function(){//class为one的div 下面的 第二个子元素//nth:表示第几个. 英文中以th结束$('div.one :nth-child(2)').css("background", "red");});$('#button2').click(function(){//每个父元素下的第一个子元素$('div.one :first-child').css('background', 'green');});$('#button3').click(function(){//class为one的div的最后一个子元素$('div.one :last-child').css('background', 'pink');});$('#button4').click(function(){//如果class为one的div下就一个子元素则选中此子元素$('div.one :only-child').css('background', 'orange');});}); $(function() {$("#button1").click(function(){//id为form1 下的input孙子 css不为test 并且可用$("#form1 input:not(.test):enabled").val("hello world");});$("#button2").click(function(){//id为form1 下的input孙子 css不为test 并且不可用$("#form1 input:not(.test):disabled").val("welcome");});//表单选择器.多选框$(":checkbox").click(function(){//html方法相当于 dom的innerHTML.$("div").html('<font color="blue"><b>' + $('input:checked').length +'</b></font>');});//change:改变选项的时候$('select:first').change(function(){var str = '';//each:遍历被选中的元素$('select:first :selected').each(function(){//$(this):将dom的this变成jquery的thisstr += $(this).text() + ",";});$('div:last').html('<b>' + str + '</b>');}); });$(function(){alert($('#form1 :text').length);//type="text"的 alert($('#form1 :password').length);//type="password"的 alert($('#form1 :radio').length);//单选按钮alert($('#form1 :checkbox').length);//多选按钮alert($('#form1 :submit').length);//提交按钮alert($('#form1 :input').length);//不仅仅input元素alert($('#form1 input').length);//form1下的所有input标签,标签的名字.});$(function(){alert($('.test').length);//class //加空格找后代元素alert($('.test :hidden').length); //选择class为test的元素下的的子标签中样式为hidden的后代标签alert($('.test:visible').length); //可见并且class为test的元素});</script> </head> <body> <div >dddd</div> </div> <div style="display:none">eeee</div> </body>