初级jQuery的使用
浏览数：15 /
时间：2015年06月09日
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../Scripts/jquery-1.7.1.min.js"></script> <link href="../Themes/default.css" rel="stylesheet" /> <script type="text/javascript"> $(document).ready(function () {//文档加载完后执行，这句必须写，否则将会不执行 $(".level1>a").click(function () { //$(this).addClass("current") // .next().show() //.parent().siblings().children("a").removeClass("current") //.next().hide(); $(this).next().show()//当前元素的下一级元素显示ul .parent().siblings()//当前元素的父类元素的兄弟元素li .children().next().hide();//父级元素的儿子元素的下一级元素 return false; }); $("#cr").click(function () { if ($(this).is(":checked")) { alert("感谢你注册我们的网站！"); } }); }); //$(".demo").click(function () {//这样写根本不会运行，要运行必须写在ready（）里面，或者写在body里面 // alert("jQuery Demo！"); //}); function demo() { alert("点击我!"); }; </script> </head> <body> <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none">衬衫</a> <ul class="level2"> <li><a href="#none">短袖衬衫</a></li> <li><a href="#none">长袖衬衫</a></li> <li><a href="#none">短袖T恤</a></li> <li><a href="#none">长袖T恤</a></li> </ul> </li> <li class="level1"> <a href="#none">卫衣</a> <ul class="level2"> <li><a href="#none">开襟卫衣</a></li> <li><a href="#none">套头卫衣</a></li> <li><a href="#none">运动卫衣</a></li> <li><a href="#none">童装卫衣</a></li> </ul> </li> <li class="level1"> <a href="#none">裤子</a> <ul class="level2"> <li><a href="#none">短裤</a></li> <li><a href="#none">休闲裤</a></li> <li><a href="#none">牛仔裤</a></li> <li><a href="#none">免烫卡其裤</a></li> </ul> </li> </ul> <!-- <ul class="menu"> <li class="level1"> <a href="#none">衬衫</a> <ul class="level2"> <li><a href="#none">短袖衬衫</a></li> <li><a href="#none">长袖衬衫</a></li> <li><a href="#none">短袖T恤</a></li> <li><a href="#none">长袖T恤</a></li> </ul> </li> <li class="level1"> <a href="#none">卫衣</a> <ul class="level2"> <li><a href="#none">开襟卫衣</a></li> <li><a href="#none">套头卫衣</a></li> <li><a href="#none">运动卫衣</a></li> <li><a href="#none">童装卫衣</a></li> </ul> </li> <li class="level1"> <a href="#none">裤子</a> <ul class="level2"> <li><a href="#none">短裤</a></li> <li><a href="#none">休闲裤</a></li> <li><a href="#none">牛仔裤</a></li> <li><a href="#none">免烫卡其裤</a></li> </ul> </li> </ul>--> </div> <div> <input type="checkbox" id="cr" /><label for="cr">我已经阅读了上面制度.</label> <p class="demo">jQuery Demo</p> <script type="text/javascript"> $(".demo").click(function () { alert("jQuery Demo！"); }); </script> <p class="demo" onclick="demo();">点击我</p> <div id="tt">test</div> <script type="text/javascript"> $(‘#tt‘).css("color", "red");//可以修改属性.attr可以修改特性 </script> <table id="tb"> <tbody> <tr> <td>第一行</td> <td>第一行</td> </tr> <tr> <td>第二行</td> <td>第二行</td> </tr> <tr> <td>第三行</td> <td>第三行</td> </tr> <tr> <td>第四行</td> <td>第四行</td> </tr> <tr> <td>第五行</td> <td>第五行</td> </tr> <tr> <td>第六行</td> <td>第六行</td> </tr> </tbody> </table> <input type="checkbox" value="1" name="check" checked="checked" /> <input type="checkbox" value="2" name="check" /> <input type="checkbox" value="3" name="check" checked="checked" /> <input type="button" value="你选中的个数" id="btn" /> <script type="text/javascript"> //第一种方法 //window.onload = function () {//页面所有元素加载完毕 // var btn = document.getElementById("btn"); //获取id为btn的元素(button) // btn.onclick = function () { //给元素添加onclick事件 // var arrays = new Array(); //创建一个数组对象 // var items = document.getElementsByName("check"); //获取name为check的一组元素(checkbox) // for (i = 0; i < items.length; i++) { //循环这组数据 // if (items[i].checked) { //判断是否选中 // arrays.push(items[i].value); //把符合条件的 添加到数组中. push()是javascript数组中的方法. // } // } // alert("选中的个数为：" + arrays.length); // } //} //第二种方法 $("#btn").click(function () { var items = $("input[name=‘check‘]:checked"); var array = []; //array = eval(items); $(‘input:checkbox:checked‘).each(function () { array.push($(this).val()); }); alert("选中的个数为：" + items.length+array[0]); }) </script> <form> <label>Name:</label> <input name="name" /> <p> <label>Newsletter:</label> <input name="newsletter" /> <input name="newsletter" /> </p> <input name="newsletter" /> </form> <script type="text/javascript"> var tid = $("form > input"); var i = tid; </script> <input name="none" /> </div> </body> </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
