JavaScript学习笔记8-jQuery入门介绍、css选择器复习
2015-09-11 10:45
756 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <a>click me</a> <script type="text/javascript"> if(document.getElementById("hello")) { document.getElementById("hello").style.color = "red"; } </script> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.4.4.js"></script> </head> <body> <a id="hello" style="color:blue">click me</a> <script type="text/javascript"> //alert($("#hello").css("color")); 读 //alert($("#hello").css("color", "red")); 写 //如果此时 删去a的id属性 //alert($("#hello"))那么返回object对象 //alert($("#hello")[0]); 返回空 alert($("#hello").get(0)); </script> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="jquery-1.4.4.js"></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"; } else { myTrs[i].style.backgroundColor = "blue"; } } } */ $(function() { $("#table1 tbody tr:even").css('background', 'red'); $("#table1 tbody tr:odd").css('background', 'blue'); }); </script> </head> <body> <table id="table1" border="1" align="center" width="80%"> <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> <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> <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> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <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> </html>
CSS 选择器(复习)
其中类选择器应用最多,如果“.”前面没有元素,则表示应用到当前页面里所有id为dream的元素。如果前面有元素,则表示应用到 元素名为“div” id为“note”的元素上。
相关文章推荐
- jquery mobile
- jquery.validate使用攻略
- jquery中的ajax异步上传
- 《XMPP高级编程 使用JavaScript和jQuery》
- jQuery进行简单验证的正则表达式
- jQuery 实现checkBox全选效果
- jquery中的ajax同步和异步详解
- jquery在线手册,datatable(记录,防忘记)
- jQuery 获取屏幕高度、宽度
- 22款基于jQuery的响应式图片滑块插件
- MVC中使用Ajax提交数据 Jquery Ajax方法传值到action
- jQuery js 互转
- jquery 动态事件的监听(非live)
- JQuery中$.ajax()方法参数详解
- 判断Jquery是否被引用
- jQuery操作元素css样式的三种方法
- jQuery瀑布流效果
- jquery文本框改变事件
- jQuery源码之$.data()数据缓存
- jQuery学习笔记——弹出对话框