JQuery
JQuery
JQuery 是一个js框架，是对js一种封装
Jquery 的导入：jquery是一个第三方js库，使用时需要导入
<script src="jquery.min.js"></script>
$(function(){})
$(function(){}) 表示当文档加载完后就执行匿名函数 function
其由两部分组成 $( ); 和 function(){ }
常见方法
1）通过jquery对象的 val() 获取值
alert($("#input1").val())；
2） 通过html() 获取html元素内部的内容，如果该元素内部有嵌套标签和内容，则一并获取
alert($("#d1").html());
3）通过text() 获取html元素内部的内容，如果该元素内部有嵌套标签和内容，则只要内容不要标签
alert($("#d1").text());
CSS
1）增加class： 通过 addClass() 增加一个样式中的class
<script> $(function(){ $("#d").addClass("pink"); }); </script> <style> .pink{ background-color:pink; } </style> <div id="d"> abc </div>
基本方法就是：事先在css中用选择器选择一个不存在的class（这里选择的是pink），然后用jquery为某个html元素增加该class属性（这里增加pink）
2）删除class：通过 removeClass() 删除某个html元素的某个class
$("#d").removeClass("pink");
3）切换class：通过 toggleClass() 切换一个html元素的class
切换指的是：如果存在该class就删除；如果不存在该class就添加
$("#d").toggleClass("pink");
4）css函数：通过css函数直接设置样式
$("#d").css("font-size", "14px");
$(".box").css({"width":"200px", "color":"blue"});
这两种方法都可以设置样式，但需要注意引号；前者设置单一属性，后者设置多属性；
Jquery选择器
1）元素选择器：根据标签名选择所有该标签元素
$("div").addClass("pink");
2）id选择：
$("#id1").addClass("pink");
3）class选择：
$(".mybox").addClass("pink");
4）层级选择：选择id为d2的div下面的所有span
$("div#d2 span").addClass("pink");
5）最先最后：
$("div:first").addClass("pink");
$("div:last").addClass("pink");
用 selector：first 和 selector：last 选择满足选择器条件的第一个和最后一个元素
6）奇偶：
$("div:odd").toggleClass("pink");
$("div:even").toggleClass("green");
选择满足选择器条件的奇数元素和偶数元素。从0开始计数，0为偶数
7）可见性：
$( selector：hidden) 和 $( selector：visible) 表示选择满足选择器条件的 可见 元素。
8）属性：
/* $(selector[attribute]) 满足选择器条件的有某属性的元素 $(selector[attribute=value]) 满足选择器条件的属性等于value的元素 $(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素 $(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素 $(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素 $(selector[attribute*=value]) 满足选择器条件的属性包含value的元素 */ $("div[id]").addClass("pink"); //选择有id属性的div $("div[id^='pin']").addClass("pink");//选择有id属性，且id属性的值以pin开头的元素
9）选择表单对象：
/* 表单对象选择器 指的是选中form下会出现的输入元素 :input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括 textarea,select和button :button 会选择type=button的input元素和button元素 :radio 会选择单选框 :checkbox会选择复选框 :text会选择文本框，但是不会选择文本域 :submit会选择提交按钮 :image会选择图片型提交按钮 :reset会选择重置按钮 */
10）根据表单对象属性进行选择：
/* :enabled会选择可用的输入元素 注：输入元素的默认状态都是可用 :disabled会选择不可用的输入元素 :checked会选择被选中的单选框和复选框 注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option :selected会选择被选中的option元素 */
11）当前元素选择：
在监听函数中使用 $(this)，则会选择出发该事件的当前组建
例子
利用 jquery 实现上述表格
<style> table{ border-collapse:collapse; width:50%; } .gary{ background: #e3e3e3; } tr.head{ border-bottom-style:solid; border-bottom-color:#c4c4c4; border-bottom-width: 2px; } tr{ border-bottom-style:solid; border-bottom-color:#c4c4c4; border-bottom-width: 1px; } td{ width:25%; } </style> <script src="jquery.min.js"></script> <script> $(function(){ $("tr:odd").addClass("gary"); }) </script> <table> <tr class="head"> <td>id</td> <td>名称</td> <td>血量</td> <td>伤害</td> </tr> <tr class="odd"> <td>1</td> <td>gareen</td> <td>340</td> <td>58</td> </tr> <tr> <td>2</td> <td>teemo</td> <td>320</td> <td>76</td> </tr> <tr class="odd"> <td>3</td> <td>annie</td> <td>380</td> <td>38</td> </tr> <tr> <td>4</td> <td>deanbrother</td> <td>400</td> <td>90</td> </tr> </table> <br/>
在载入整个html文档后，利用jquery选择器选择所有的偶数tr，为它们添加 gary 类即可。
筛选器
筛选器的作用是，在已经通过选择器选出元素后，在此基础上进一步进行筛选
1）第一个、最后一个、第n个：
$("div").first().addClass("pink"); /*选择第一个元素*/
$("div").last().addClass("pink"); /*选择最后一个*/
$("div").eq(4).addClass("pink"); /*选择第四个*/
2）父、祖先：
$("#currentDiv").parent().addClass("pink"); /*选择最近的一个父元素*/
$("#currentDiv").parents().addClass("pink"); /*选择所有祖先元素*/
3）儿子、后代
$("#currentDiv").children().addClass("pink");/*选择所有的儿子元素，即所有的第一层嵌套*/
$("#currentDiv").find("div").addClass("pink");/*筛选出符合选择器的后代元素*/
注：find( selector) 必须使用参数selector
4）同级元素
$("#currentDiv").siblings("div").addClass("pink");
选择自己的所有同级元素，不包括自己。
属性
1）attr(属性名) 获取属性值： alert( $("div").attr("align") );
2）attr(attr, value) 修改属性： $("div").attr("align", "left");
3）removeAttr(attr) 删除属性：$("div").removeAttr("align");
4）prop 与 attr 的区别：其一，attr可以获取自定义属性值，prop不可；
其二，对于选择框的checked属性，attr只能获取初始值，而prop可以获取经过选择后的变化的值，且返回true|false的布尔型
