jquery选择器总结[初步]
1.Jquery简介
Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
2.JQuery与html的分离举例
不用再网页中加入如：onclick之类的事件来调用函数了，直接引入JQuery类库和自己编写的JQuery代码就可以了;
$<html> <head> <title>jquery测试</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> <style type="text/css"> .checkCss{ color:blue; } .redioCss{ color:red; } </style> <script type="text/javascript"> //该函数在网页加载介绍后自动生成 $(function(){ // $("#XXX") 获得id=XXX的所有Jquery对象 $("#subt").click(function(){ // $("XXX") 获得XXX标签名的所有Jquery对象 alert("input 标签的对象个数为："+$("input").length); // $("XXX[name='YYY']") 获得XXX标签名下name='YYY'的所有Jquery对象 // val()获得属性值 alert("name='userName'的输入框内容为："+$("input[name='userName']").val()); // 注意获得value值的第二种方式 alert("name='note'的输入框内容为："+$("input[name='note']").attr("value")); alert("下拉菜单被选中项的文本为："+$("#sex option:selected").text()); alert("下拉菜单被选中项的值为："+$("#sex").val()); alert("复选框选中的个数为："+$("input[name='check']:checked").length); if($("input[name='check']:checked").length>0){ var allCheckValue=""; var allCheckText=""; $("input[name='check']:checked").each(function(){ allCheckValue+=$(this).val()+" "; allCheckText+=$(this).parent(".checkCss").text()+" "; }); alert("复选框选中的文本为："+allCheckText+" 值为："+allCheckValue); } if($("input[name='status']:checked").length>0){ alert("单选框选中的文本为："+$("input[name='status']:checked").parent(".redioCss").text()+" 值为："+$("input[name='status']:checked").val()); } }); }); </script> </head> <body> 姓名：<input type="text" name="userName" width="250"><br> 性别：<select id="sex" name="userSex" style="width: 155"> <option value="1">男</option> <option value="2">女</option> <option value="3">不男不女</option> </select><br> 爱好：<span class="checkCss"><input type="checkbox" name="check" value="1">旅游</span> <span class="checkCss"><input type="checkbox" name="check" value="2">音乐</span><br> <span class="checkCss"><input type="checkbox" name="check" value="3">体育</span> <span class="checkCss"><input type="checkbox" name="check" value="4">文学</span><br> 状态：<span class="redioCss"><input type="radio" name="status" value="1">在职</span> <span class="redioCss"><input type="radio" name="status" value="2">离职</span><br> 简介：<input type="text" name="note" width="250"><br> <input type="button" value="提交" id="subt"><br> </body></html>
