jquery基础
一、jquery简介
jQuery是使用JavaScript语言编写的函数库。它提供如下主要功能：
- 方便定位文档中的元素节点
- 方便修改节点内容及显示样式
- 方便处理用户操作事件
- 方便为页面添加动态效果；如淡入淡出
- 更便捷的AJAX应用接口
jQuery库有development和production版的区别。要使用jQuery，需在HTML页面中使用<script>进行导入。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。聚焦引入jquery
<body>
<script>
方法一：
$(document).ready(function() {
//让鼠标聚焦
$("input[name=userName]").focus();
})
方法二：
$().ready(function() {
//让鼠标聚焦
$("input[name=userName]").focus();
})
方法三：
jQuery(function() {
//让鼠标聚焦
jQuery("input[name=userName]").focus();
})
</script>
用户名：<input type="text" name="userName" /><br/>
年龄：<input type="text" name="age" /><br/>
</body>
导入jquery：
<script type="text/javascript" src="文件路径"></script>
jQuery对象具有集合性质，一个jQuery对象中可能包含多个DOM节点。jQuery对象的length属性和size()方法会返回其中包含的DOM节点的个数。如果需要获得jQuery对象中的DOM节点对象，可使用get(index)方法。如果要将普通的DOM节点转换为jQuery对象，可使用$( )函数：$(DOM对象)
dom对象和jquery对象之间的转化
<script type="text/javascript"> $(function(){ //查找用户名 //dom对象 var domObj = document.getElementsByName("userName")[0]; //dom对象转成jquery对象 console.log($(domObj)); //输出控制台 /* console.log(domObj); */ //jqurey对象 var jqueryObj = $("input[name=userName]") //输出控制台 /* console.log(jqueryObj); */ //jquery对象转成dom对象 console.log(jqueryObj.get(0)); }); </script> <body> 用户名:<input type="text" name="userName"/><br> 年龄:<input type="text" name="age"/> </body>
两个对象转换后浏览器的结果：
二、选择和过滤
选择
id选择器，class选择器，标签选择器
<script type="text/javascript"> $(function () { //id选择器 //查找id为user的文本框，并设置样式 $("#user").css("background","#ff0000"); //查找class为age的文本框，并设置样式 $(".age").css("background","#00ff00"); //标签选择器 $("span").css({ "font-size":"50px", "color":"#ff0000", }); }) </script> <body> <input type="text" name="userName" id="user" /><br /> <input type="text" name="age" class="age" /><br /> <span>Hello World!</span> </body>
同时给多个标签加样式：群组选择器 ( , )
<script type="text/javascript"> $(function () { //给table，tr，td设置样式 $("table,tr,td").css({ "border":"solid 1px #ff0000", "border-collapse":"collapse", "width":"120px", "text-align":"center", }); }); </script> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </table> </body>
选择所有元素：通配选择器 ( * )
<script type="text/javascript"> $(function () { //选择body下的所有元素，并设置背景 $("body *").css({ "background":"#aa4499", }); }); </script> <body> <div>123</div> <p>456</p> <span>789</span> </body>
查找input元素：标签选择器
<script type="text/javascript"> $(function() { //查找input元素，jquery天生具有集合性 console.log($("input")); //输出长度 console.log("input的长度:" + $("input").length); //输出长度 console.log("input的长度:" + $("input").size()); }) </script> <body> 账号：<input type="text" name="account" /><br /> 用户名：<input type="text" name="userName" /><br /> 性别：<input type="radio" name="gender" value="1" />男 <input type="radio" name="gender" value="0" />女<br /> 密码：<input type="password" name="pwd" /><br /> <p>我是一个段落</p> </body>
选择紧挨着的第一个兄弟 ( + )
<script type="text/javascript"> $(function () { //给h1后面的第一个兄弟p设置样式 $("h1+p").css({ "background":"#00ff00", }); }); </script> <body> <h1>This is heading</h1> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> <p>This is paragraph</p> </body>
选择所有兄弟 ( ~ )
<script type="text/javascript"> //给div下面的所有兄弟input标签加样式 $(function () { $("#div2~input").css({ "background":"#dd4499", "color":"#000000", }); }); </script> <body> <div>div1</div> <div id="div2">div2</div> <input type="text" name="userName" /><br /> <input type="text" name="age" /><br /> <input type="button" value="点我" /><br /> <p>Hello World!</p> </body>
给指定的兄弟加样式 :eq( )
<script type="text/javascript"> $(function () { //给div2后面的指定兄弟input标签加样式 $("#div2~input:eq(1)").css({ "background":"#dd4499", "color":"#000000", }); }); </script> <body> <div>div1</div> <div id="div2">div2</div> <input type="text" name="userName" /><br /> <input type="text" name="age" /><br /> <input type="button" value="点我" /><br /> <p>Hello World!</p> </body>
给后代设置样式(所有子孙)
<script type="text/javascript"> $(function () { //给div的后代span设置样式 $("#container span").css({ "background":"#aa1188", "color":"#ffffff", }); }); </script> <body> <div id="container"> <span>div span</span> <div> <span>div div span</span> </div> </div> </body>
选择第一个子 >
<script type="text/javascript"> $(function () { //给div的第一个儿子设置样式 $("#container>span").css({ "background":"#00ff00", "color":"#000000", }); }); </script> <body> <div id="container"> <span>div span</span> <div> <span>div div span</span> </div> </div> </body>
过滤 (过滤器都以:开始)
1.基本过滤
<body>
<table>
<thead>
<!-- 0 -->
<tr>
<td>编号</td>
<td>名称</td>
<td>分类</td>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr>
<td>001</td>
<td>苹果</td>
<td>水果</td>
</tr>
<!-- 2 -->
<tr>
<td>002</td>
<td>土豆</td>
<td>蔬菜</td>
</tr>
<!-- 3 -->
<tr>
<td>003</td>
<td>菜刀</td>
<td>厨具</td>
</tr>
<!-- 4 -->
<tr>
<td>004</td>
<td>香蕉</td>
<td>水果</td>
</tr>
</tbody>
</table>
<table>
<thead>
<!-- 5 -->
<tr>
<td>编号</td>
<td>名称</td>
<td>分类</td>
</tr>
</thead>
<tbody>
<!-- 6 -->
<tr>
<td>001</td>
<td>苹果</td>
<td>水果</td>
</tr>
<!-- 7 -->
<tr>
<td>002</td>
<td>土豆</td>
<td>蔬菜</td>
</tr>
<!-- 8 -->
<tr>
<td>003</td>
<td>菜刀</td>
<td>厨具</td>
</tr>
<!-- 9 -->
<tr>
<td>004</td>
<td>香蕉</td>
<td>水果</td>
</tr>
</tbody>
</table>
</body>
给第一个tr设置背景色 tr:first 编号从0开始
$(function () { $("tr:first").css({ "background":"#ff0000", }); });
给最后一个tr设置背景色 tr:last
$(function () { $("tr:last").css({ "background":"#00ff00", }); });
给偶数行,设置背景色 tr:even 编号从0开始
$(function () { $("tr:even").css({ "background":"#0000ff", }); });
给奇数行,设置背景色 tr:odd 编号从0开始
$(function () { $("tr:odd").css({ "background":"#0000ff", }); });
编号大于三的tr，设置背景色 :gt(3) 编号从0开始，不包含3
$(function () { //让编号>3的tr,设置背景色：great than $("tr:gt(3)").css({ "background":"pink", }); });
编号小于三的tr，设置背景色 :lt(3) 编号从0开始，不包含3
$(function () { //让编号<3的tr,设置背景色：litter than $("tr:gt(3)").css({ "background":"pink", }); });
编号等于三的tr，设置背景色 :eq(3)
$(function () { //让编号=3的tr,设置背景色：equals $("tr:eq(3)").css({ "background":"#dd4411", "color":"#000000", }); });
2.根据节点包含的内容进行过滤
包含元素的(区分大小写) :contains( )
<script type="text/javascript"> $(function () { //包含元素的，区分大小写 $("div:contains(W)").css({ "background":"#ff0000", }); }); </script> <body> <div>hello world!</div> <div>hello World!123</div> </body>
查找不含子元素的 :empty
<script type="text/javascript"> //查找不含子元素和文本的div，并设置样式 $(function () { $("div:empty").css({ "background":"#ff0000", "width":"300px", "height":"300px", }); }); </script> <body> <div></div> <div> </div> <div>Hello World!</div> <div>Hello <span>World!</span></div> </body>
因为第二个div包含空格，所以不会加样式，浏览器效果为：
包含span元素的 :has(span)
<script type="text/javascript"> $(function () { //div下面包含span元素的 $("div:has(span)").css({ "background":"#00ff00", }); }); </script> <body> <div>Hello World!</div> <div>Hello <span>World!</span></div> </body>
3.根据节点的可见性进行过滤
获取元素的值 :visible 可见 :hidden 不可见
<script type="text/javascript"> $(function () { //获取可见的input元素的值 var v1 = $("input[type=text]:visible").val(); //获取隐藏的input元素的值 //方法一 var v2 = $("input:hidden:eq(0)").val(); //方法二 var v2_1 = $("input[type=text]:hidden").val(); //获取隐藏域的值 var v3 = $("input:hidden:eq(1)").val(); //输出v1,v2.v3 document.write("v1:" + v1 + "<br />"); document.write("v2:" + v2 + "<br />"); document.write("v2_1:" + v2_1 + "<br />"); document.write("v3:" + v3 + "<br />"); }); </script> <body> <input type="text" value="我是可见的input元素" /><br /> <input type="text" value="我是隐藏的input元素" style="display: none;" /><br /> <input type="hidden" value="我是隐藏域" /><br /> <input type="button" value="我是按钮" /><br /> </body>
4.根据节点的属性进行过滤
- [attribute] 包含给定属性
- [attribute=value] 给定的属性是某个特定值 例: $("input[name='newsletter']")
- [attribute!=value] 给定的属性不是某个特定值。 例: $("input[name!='newsletter']")
其它类似的：
- [attribute ^= value] 给定的属性其值以value开始。
- [attribute $= value] 给定的属性其值以value结束。
- [attribute *= value] 给定的属性其值中包含有value。
<body>
<form action="/servlet_demo_anno/userServlet?" method="get"> <!-- /servlet_demo_anno/userServlet?account=zhangsan&pwd=123 -->
Account:<input type="text" name="account"/><br><!-- zhangsan -->
Password:<input type="password" name="pwd"/><br><!-- 123 -->
验证码:<input type="text" name="verifyCode"><img src="/servlet_demo_anno/verifyServlet"/><br />
<input type="submit" value="登录1">
<input type="submit" value="登录2">
<input type="button" value="按钮">
</form>
</body>
给密码框设置背景色: =
<script type="text/javascript"> $(function () { //给密码框设置背景色 $("input[name = pwd]").css({ "background":"#ff0000", }); }); </script>
给不是密码的文本框，设置背景色: !=
<script type="text/javascript"> $(function () { //给不是密码的文本框，设置背景色 $("input[type = text][name != pwd]").css({ "background":"#ff0000", }); }); </script>
设置有value属性的节点，设置背景色: [value]
<script type="text/javascript"> $(function () { //给不是密码的文本框，设置背景色 $("input[value]").css({ "background":"#ff0000", }); }); </script>
名字以ac开头，设置背景色: ^=
<script type="text/javascript"> $(function () { //名字以ac开头，设置背景色 $("input[name ^= ac]").css({ "background":"#ff0000", }); }); </script>
value属性值里面，以2结尾的: $=
<script type="text/javascript"> $(function () { //value属性值里面，以2结尾的 $("input[value $= 2]").css({ "background":"#ff0000", }); }); </script>
value属性里面，含有“录”的: *=
<script type="text/javascript"> $(function () { //value属性里面，含有“录”的 $("input[value *= 录]").css({ "background":"#ff0000", }); }); </script>
5.节点作为儿子节点的角度进行过滤
根据节点的属性进行过滤
<body>
<table>
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>分类</td>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>苹果</td>
<td>水果</td>
</tr>
<tr>
<td>002</td>
<td>土豆</td>
<td>蔬菜</td>
</tr>
<tr>
<td>003</td>
<td>菜刀</td>
<td>厨具</td>
</tr>
<tr>
<td>004</td>
<td>香蕉</td>
<td>水果</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>分类</td>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>苹果</td>
<td>水果</td>
</tr>
<tr>
<td>002</td>
<td>土豆</td>
<td>蔬菜</td>
</tr>
<tr>
<td>003</td>
<td>菜刀</td>
<td>厨具</td>
</tr>
<tr>
<td>004</td>
<td>香蕉</td>
<td>水果</td>
</tr>
</tbody>
</table>
</body>
选取父节点的第2个孩子，编号从1开始 :nth-child(2)
1 <script type="text/javascript"> 2 $(function () { 3 //选取父节点的第2个孩子,编号从1开始 4 $("tr:nth-child(2)").css({ 5 "background":"#ff0000", 6 }); 7 }); 8 </script>
选择父节点的第一个孩子,编号从1开始 :first-child
<script type="text/javascript"> $(function () { //选择父节点的第一个孩子,编号从1开始 $("tr:first-child").css({ "background":"#ff0000", }); }); </script>
父节点的最后一个孩子,编号从1开始 :last-child
<script type="text/javascript"> $(function () { //父节点的最后一个孩子,编号从1开始 $("tr:last-child").css({ "background":"#ff0000", }); }); </script>
父节点的唯一孩子,编号从1开始 :only-child
<script type="text/javascript"> $(function () { //父节点的唯一孩子,编号从1开始 $("tr:only-child").css({ "background":"#ff0000", }); }); </script>
父节点的偶数顺序孩子,编号从1开始 :nth-child(even)
<script type="text/javascript"> $(function () { //父节点的偶数顺序孩子,编号从1开始 $("tr:nth-child(even)").css({ "background":"#ff0000", }); }); </script>
父节点的奇数顺序孩子,编号从1开始 :nth-child(odd)
<script type="text/javascript"> $(function () { //父节点的奇数顺序孩子,编号从1开始 $("tr:nth-child(odd)").css({ "background":"#ff0000", }); }); </script>
满足方程式的节点的孩子，编号从0开始 :nth-child(2n)
<script type="text/javascript"> $(function () { //满足方程式的节点的孩子，编号从0开始 $("tr:nth-child(2n)").css({ "background":"#ff0000", }); }); </script>
满足方程式的节点的孩子，编号从0开始 :nth-child(2n+1)
<script type="text/javascript"> $(function () { //满足方程式的节点的孩子，编号从0开始 $("tr:nth-child(2n+1)").css({ "background":"#ff0000", }); }); </script>
6.根据节点状态进行过滤
:checked 被选中 (复选框、单选框等) 例：$("input:checked")
:enabled 可用 例：$(“#form1 input[type=button]:enabled”)
:disabled 不可用 例：$("#form1 input[type=button][id!=btnTest]:disabled")
:selected 被选中(针对select的option元素) 例：$("select option:selected")
选中的复选框消失 :checked
<script type="text/javascript"> $(function () { //选中的复选框消失 $("input[name = hobby]:checked").hide(); }); </script> <body> 爱好: <input type="checkbox" value="1" name="hobby">篮球 <input type="checkbox" value="2" name="hobby">足球 <input type="checkbox" value="3" name="hobby" checked="checked">羽毛球 <input type="checkbox" value="4" name="hobby">网球 <input type="checkbox" value="5" name="hobby">java </body>
没有选中的复选框消失 :not(:checked)
<script type="text/javascript"> $(function () { //没有选中的复选框消失 $("input[name = hobby]:not(:checked)").hide(); }); </script> <body> 爱好: <input type="checkbox" value="1" name="hobby">篮球 <input type="checkbox" value="2" name="hobby">足球 <input type="checkbox" value="3" name="hobby" checked="checked">羽毛球 <input type="checkbox" value="4" name="hobby">网球 <input type="checkbox" value="5" name="hobby">java </body>
可用的和不可用的增加样式 :enable :disable
<script type="text/javascript"> $(function () { //给可用的按钮添加背景色 $("input[type = button]:enabled").css({ "background":"#ff0000", }); //给不可用的且名字不为btn3的按钮添加样式 //方法一 $("input[type = button][name != btn3]:disabled").css({ "background":"#ff0000", }); //方法二 $("input[type = button]:disabled:eq(0)").css({ "background":"#ff0000", }); }); </script> <body> <input type="button" value="按钮1"> <input type="button" value="按钮2" disabled="disabled" name="btn2"> <input type="button" value="按钮3" disabled="disabled" name="btn3"> </body>
选中的和没有选中的 :selected
<script type="text/javascript"> $(function () { //让选中的option的字体变大 $("select option:selected").css({ "font-size":"40px", }); //让没有选中的option,改变其背景色 $("select option:not(:selected)").css({ "background":"#ff7788", }); }); </script> <body> 专业： <select name="major" multiple="multiple"> <option>-------请选择--------</option> <optgroup label="数学系"></optgroup> <option>数学一</option> <option>数学二</option> <option>数学三</option> <optgroup label="计算机系"></optgroup> <option selected="selected">计算机科学与技术</option> <option>大数据</option> <option>软件工程</option> </select> </body>
三、修改css属性及样式
1、和CSS类相关的方法：
- addClass(“className”)
- removeClass(“className”) //去掉CSS类。 如果没有参数则去掉所有CSS类
- hasClass(“className”) //判断是否含有特定的CSS类
- toggleClass(“class_name”); //交替添加或删除CSS类
2、和CSS样式属性相关的方法：
- css(“propertyName”) //获取样式属性值
- css(“propertyName”,”propertyValue”) //设置样式属性值
注： 属性名支持连字符表示法和驼峰表示法。
3、设置一组样式属性值
- css({“propertyName1”:”propertyValue1”,” propertyName2”:” propertyValue2”})
CSS类相关的方法
<style type="text/css"> .style1{ background-color: orange; } .style2{ width: 260px; height: 300px; } </style> <script type="text/javascript"> $(function () { //给按钮注册一个单击事件 $("button").on("click",function (){ //单击的动作 //判断style1有没有样式类，有就删除，没有就添加 if($("input[name = userName]").hasClass("style1")){ //删除 $("input[name = userName]").removeClass("style1"); }else { //添加 $("input[name = userName]").addClass("style1"); } }); //给toggle按钮注册一个单击事件 $("input[type = button]").click(function () { //添加或者删除两个样式类 $("input[name = userName]").toggleClass("style1"); $("input[name = userName]").toggleClass("style2"); }); }); </script> <body> <input type="text" name="userName" /> <button>按钮</button> <input type="button" value="toggle" /> </body>
点击按钮，则input标签背景变为橘色，效果如图：
再次点击按钮input标签，则背景会消失。
点击toggle，则会出现style2的样式，效果如图：
toggle按钮在两者之间进行切换，在点击toggle按钮会回到初始状态，如图：
CSS样式属性相关的方法（给标签设置样式和获取样式）
<script type="text/javascript"> $(function () { //设置背景色 $("input[name = userName]").css({ "background":"#ff0000", }); //获取背景色 console.log($("input[name = userName]").css("background")); }); </script> <body> <input type="text" name="userName" /> <p>hello world</p> </body>
四、文档处理
1、更改元素节点的属性
addClass() 和 removeClass() 函数本身就是更改元素的 class 属性。
2、对于元素的内置属性，可使用prop函数进行获取和设置(jQuery1.6以前使用attr函数，此函数现在用于设置和获取元素的自定义属性)：
prop(‘attrName’) ;
prop(‘attrName’,’value’) ;
prop(‘attrName’, function(index, oldAttr)) ; 第二个参数是返回属性值的函数，index为当前元素的索引值，oldAttr为原先的属性值；
removeProp(‘attrName’) ;
内置属性
<script type="text/javascript"> $(function() { //给按钮注册一个单击事件 $("input[value= 按钮]").click(function () { //将option的value属性统一改成它的下标 $("select option").prop("value",function (index,old) { //输出老的value属性值 /* console.log(old); */ //输出index:当前option的序号:0-7 /* console.log(index); */ return old.substring(5); //当点击按钮的时候，将option的value值改为数字1-8 }); }); }); </script> <body> <select> <option value="index1">项目1</option><!-- 0 --> <option value="index2">项目2</option> <option value="index3">项目3</option> <option value="index4">项目4</option> <option value="index5">项目5</option> <option value="index6">项目6</option> <option value="index7">项目7</option> <option value="index8">项目8</option> </select> <input type="button" value="按钮"> </body>
获取input标签的checked属性
<script type="text/javascript"> $(function () { //默认找第一个input标签的checked属性，有true，无false(即使其他input有checked属性) console.log($("input[name = hobby]").prop("checked")); //获取第二个复选框的checked属性 /* console.log($("input[name = hobby]:checked").prop("checked")); */ //获取第二个复选框的checked属性 /* console.log($("input[name = hobby]:eq(1)").prop("checked")); */ }); </script> <body> <input type="checkbox" name="hobby" value="1" />篮球 <input type="checkbox" name="hobby" value="2" checked="checked" />足球 <input type="checkbox" name="hobby" value="3" />网球 </body>
修改属性值的样式
<style type="text/css"> div{ border: 1px solid black; width: 80%; height: 250px; } .back{ background-color: gray; } .font{ font-size: 64px; color: yellow; } .reset{ font-size: 32px; color: blue; } </style> <script type="text/javascript"> $(function () { //给按钮注册一个单击事件 $("button").click(function () { //将名为class的属性值的样式改成reset的样式 $("div").prop("class","reset") }); }); </script> <body> <div class="back font">Hello World!</div> <button>按钮</button> </body>
3、设置一组属性值
$("#container a").prop({"href":"http://www.baidu.com","title":"百度"});
修改子元素的属性值
<script type="text/javascript"> $(function () { //点击按钮,执行修改p的子元素a的href属性(点击按钮后，控制台会变成谷歌.com) $("button").click(function () { //方法一 $("p a").attr("href","http://www.google.com"); //方法二 $("p a").prop("href","http://www.google.com"); }); }); </script> <body> <p>Hello world<a href="http://www.baidu.com">你好</a></p> <button>点我</button> </body>
4、修改/获取元素节点的内容
- html() //获取或设置元素中的html内容
- text() //获取或设置元素中的文本内容
- val() //获取或设置输入性控件的值。如:文本框,单选按钮,复选框和下拉列表等
5、添加HTML元素内容
after(content) //在节点之后插入内容。 参数content可以是HTML片段和DOM节点，如果是页面已存在的DOM节点或jQuery对象，则是移动操作
【示例】在div元素后面插入百度的超链接
$("div").after("<a href='http://www.baidu.com' title='百度'>百度</a>");
类似的函数：
before( )
append( ) //节点内部追加
prepend( ) //节点内部前置
另外，还有一些反转方式的方法：
insertAfter( )、insertBefore( )、appendTo( )、prependTo( )
6、empty() //删除元素所有子节点，清空节点中的内容 例：$(“ul li:eq(1)”).empty();
7、remove() //删除元素节点 例：$(“ul li:eq(1)”).remove();
8、筛选节点
next()，prev() //获取下一个或前一个兄弟节点。
children() //获取元素的子节点，不包括孙子及其他后代节点。
siblings() //获取前后所有兄弟节点。
parent() //获取父节点；
parents() //获取所有祖先节点。
9、对集合的遍历，可使用：
obj.each(function(index){
// 函数中的this关键字指向DOM节点
});
或者使用：
$.each(ch,function(index,data){
// data引用了每个DOM节点
});
五、事件处理
更多精彩
