前端之jQuery

jQuery

jQuery介绍

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

  2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优势

  1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

  2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

  3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

  4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

  5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

  6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

  7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

他与dom中的：document.getElementById("i1").innerHTML;效果一样

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

1 var $variable = jQuery对像
2 var variable = DOM对象
3 $variable[0]    //jQuery对象转成DOM对象
View Code

拿上面那个例子举例，jQuery对象和DOM对象的使用：

1 $("#i1").html();    //jQuery对象可以使用jQuery的方法
2 $("#i1")[0].innerHTML;    // DOM对象使用DOM的方法
View Code

jQuery基础语法

1.id选择器：

1 $("#d1") //选择ID
2 <div id="d1" style="background-color: red;">
3     sdfsdfsdfsdfsdfasdfadf
4     <input type="text" id="i1">
5     <input type="button" value="开始" id="start" onclick="start();">
6     <input type="button" value="结束" id="end" onclick="end();">
7 </div>
View Code

2.标签选择器：

1 $("div")    //选择标签
2 <div id="d1" style="background-color: red;">
3     sdfsdfsdfsdfsdfasdfadf
4     <input type="text" id="i1">
5     <input type="button" value="开始" id="start" onclick="start();">
6     <input type="button" value="结束" id="end" onclick="end();">
7 </div>
View Code

3.class选择器：

1 $(".d1")    //根据class选择
2 <div class="d1">d1</div>
View Code

4.配合使用：

$("div.c1")  // 找到有div标签中class为d1的标签
View Code

5.所有元素选择器：

1 $("*")
View Code

6.组合选择器：

1 $("#id, .className, tagName")    //$("#l1,.d1,input")
View Code

7.层级选择器：

1 $("x y");// x的所有后代y（子子孙孙）
2 $("x > y");// x的所有儿子y（儿子）
3 $("x + y")// 找到所有紧挨在x后面的y
4 $("x ~ y")// x之后所有的兄弟y
View Code

8.基本选择器：

 1 :first // 第一个
 2 :last // 最后一个
 3 :eq(index)// 索引等于index的那个元素
 4 :even // 匹配所有索引值为偶数的元素，从 0 开始计数
 5 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
 6 :gt(index)// 匹配所有大于给定索引值的元素
 7 :lt(index)// 匹配所有小于给定索引值的元素
 8 :not(元素选择器)// 移除所有满足not条件的标签
 9 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
10 
11 //例子
12 $("div:has(h1)")// 找到所有后代中有h1标签的div标签
13 $("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
14 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签
15 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
View Code

自定义模态框，使用jQuery实现隐藏和弹出:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>自定义模态框</title>
 8   <style>
 9     .cover {
10       position: fixed;
11       left: 0;
12       right: 0;
13       top: 0;
14       bottom: 0;
15       background-color: darkgrey;
16       z-index: 999;
17     }
18     .modal {
19       width: 600px;
20       height: 400px;
21       background-color: white;
22       position: fixed;
23       left: 50%;
24       top: 50%;
25       margin-left: -300px;
26       margin-top: -200px;
27       z-index: 1000;
28     }
29     .hide {
30       display: none;
31     }
32   </style>
33 </head>
34 <body>
35 <input type="button" value="弹" id="i0">
36 
37 <div class="cover hide"></div>
38 <div class="modal hide">
39   <label for="i1">姓名</label>
40   <input id="i1" type="text">
41    <label for="i2">爱好</label>
42   <input id="i2" type="text">
43   <input type="button" id="i3" value="关闭">
44 </div>
45 <script src="jquery-3.3.1.min.js"></script>
46 <script>
47   var tButton = $("#i0")[0];
48   tButton.onclick=function () {
49     var coverEle = $(".cover")[0];
50     var modalEle = $(".modal")[0];
51 
52     $(coverEle).removeClass("hide");
53     $(modalEle).removeClass("hide");
54   };
55 
56   var cButton = $("#i3")[0];
57   cButton.onclick=function () {
58     var coverEle = $(".cover")[0];
59     var modalEle = $(".modal")[0];
60 
61     $(coverEle).addClass("hide");
62     $(modalEle).addClass("hide");
63   }
64 </script>
65 </body>
66 </html>
自定义模态框，使用jQuery实现隐藏和弹出

9.属性选择器：

 1 [attribute]
 2 [attribute=value]// 属性等于
 3 [attribute!=value]// 属性不等于
 4 //
 5 jQuery 使用 XPath 表达式来选择带有给定属性的元素。
 6 $("[href]") 选取所有带有 href 属性的元素。
 7 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
 8 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
 9 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
10 // 示例
11 <input type="text">
12 <input type="password">
13 <input type="checkbox">
14 $("input[type='checkbox']");// 取到checkbox类型的input标签
15 $("input[type!='text']");// 取到类型不是text的input标签
16 
17 //表单常用的筛选
18 :text
19 :password
20 :file
21 :radio
22 :checkbox
23 
24 :submit
25 :reset
26 :button
27 
28 //例子
29 $(":checkbox")  // 找到所有的checkbox
View Code

10.表单对象属性：

 1 :enabled
 2 :disabled
 3 :checked
 4 :selected
 5 
 6 //例子
 7 <form>
 8   <input name="email" disabled="disabled" />
 9   <input name="id" />
10 </form>
11 
12 $("input:enabled")  // 找到可用的input标签
13 
14 //找到选择的option
15 <select id="s1">
16   <option value="beijing">北京市</option>
17   <option value="shanghai">上海市</option>
18   <option selected value="guangzhou">广州市</option>
19   <option value="shenzhen">深圳市</option>
20 </select>
21 
22 $(":selected")  // 找到所有被选中的option
View Code

筛选器

1.下一个元素

1 $("#id").next()
2 $("#id").nextAll()
3 $("#id").nextUntil("#i2")
View Code

2.上一个元素

1 $("#id").prev()
2 $("#id").prevAll()
3 $("#id").prevUntil("#i2")
View Code

3.父亲元素

1 $("#id").parent()
2 $("#id").parents()  // 查找当前元素的所有的父辈元素
3 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
View Code

4.兄弟和儿子元素

1 $("#id").children();// 儿子们
2 $("#id").siblings();// 兄弟们
View Code

5.查找元素

1 $("#id").find()// 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
2 .first()// 获取匹配的第一个元素
3 .last()// 获取匹配的最后一个元素
4 .not()// 从匹配元素的集合中删除与指定表达式匹配的元素
5 .has()// 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
View Code

6.左侧菜单栏实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>左侧菜单</title>
 6     <style>
 7         .left {
 8             position: fixed;
 9             left:0;
10             top:0;
11             width: 20%;
12             height: 100%;
13             background-color: rgb(47,53,61);
14         }
15         .right {
16             width: 80%;
17             height: 100%;
18         }
19         .menu {
20             color: white;
21         }
22         .title {
23             text-align: center;
24             padding: 10px 15px;
25             border-bottom: 1px solid #23282e;
26         }
27         .title a {
28             text-decoration: none;
29             color: white;
30         }
31         .items {
32             background-color: #181c20;
33         }
34         .item {
35             padding:5px 10px;
36             border-bottom: 1px solid #23282e;
37         }
38         .hide {
39             display: none;
40         }
41     </style>
42 </head>
43 <body>
44 <div class="left">
45     <div class="menu">
46         <div class="title"><a href="#">菜单一</a></div>
47         <div class="items">
48             <div class="item">11</div>
49             <div class="item">22</div>
50             <div class="item">33</div>
51         </div>
52     </div>
53     <div class="menu">
54         <div class="title"><a href="#">菜单二</a></div>
55         <div class="items">
56             <div class="item">11</div>
57             <div class="item">22</div>
58             <div class="item">33</div>
59         </div>
60     </div>
61     <div class="menu">
62         <div class="title"><a href="#">菜单三</a></div>
63         <div class="items">
64             <div class="item">11</div>
65             <div class="item">22</div>
66             <div class="item">33</div>
67         </div>
68     </div>
69     <div class="menu">
70         <div class="title"><a href="#">菜单四</a></div>
71         <div class="items">
72             <div class="item">11</div>
73             <div class="item">22</div>
74             <div class="item">33</div>
75         </div>
76     </div>
77 </div>
78 <div class="right" ></div>
79 <script src="jquery-3.3.1.min.js"></script>
80 <script>
81     //查找标签
82     var $titleEle = $(".title");
83     $titleEle.on("click",function () {
84         $(this).next().toggleClass("hide");
85         $(this).next().sibling(".items").addClass("hide")
86     })
87 </script>
88 </body>
89 </html>
View Code

标签操作

样式操作

1 addClass();// 添加指定的CSS类名。
2 removeClass();// 移除指定的CSS类名。
3 hasClass();// 判断样式存不存在
4 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
View Code

CSS

1 css("color","red")//DOM操作：tag.style.color="red"
2 //实例
3 $("p").css("color", "red"); //将所有p标签的字体设置为红色
4 //位置
5 offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
6 position()// 获取匹配元素相对父元素的偏移
7 scrollTop()// 获取匹配元素相对滚动条顶部的偏移 (回滚首页按钮)
8 scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
View Code
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
回到首页按钮：
 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>位置相关示例之返回顶部</title>
 8   <style>
 9     .c1 {
10       width: 100px;
11       height: 200px;
12       background-color: red;
13     }
14 
15     .c2 {
16       height: 50px;
17       width: 50px;
18 
19       position: fixed;
20       bottom: 15px;
21       right: 15px;
22       background-color: #2b669a;
23     }
24     .hide {
25       display: none;
26     }
27     .c3 {
28       height: 100px;
29     }
30   </style>
31 </head>
32 <body>
33 <div class="c1"></div>
34 <div class="c3">1</div>
35 <div class="c3">2</div>
36 <div class="c3">3</div>
37 <div class="c3">4</div>
38 <div class="c3">5</div>
39 <div class="c3">6</div>
40 <div class="c3">7</div>
41 <div class="c3">8</div>
42 <div class="c3">9</div>
43 <div class="c3">10</div>
44 
45 <button id="b2" class="btn btn-default c2 hide">返回顶部</button>
46 <script src="jquery-3.3.1.min.js"></script>
47 <script>
48     // 当屏幕滚轮向下滚动的时候就触发scroll事件
49   $(window).scroll(function () {
50       // 判断 window 距离屏幕顶部的距离是否大于100
51     if ($(window).scrollTop() > 100) {
52       $("#b2").removeClass("hide");
53     }else {
54       $("#b2").addClass("hide");
55     }
56   });
57 
58   $("#b2").on("click", function () {
59       // 点击返回顶部按钮的时候，让屏幕滚动到最上面
60     $(window).scrollTop(0);
61   })
62 </script>
63 </body>
64 </html>
首页按钮

尺寸：

 1 height()
 2 width()
 3 innerHeight()
 4 innerWidth()
 5 outerHeight()
 6 outerWidth()
 7 
 8 //例子
 9 <html>
10 <head>
11     <meta charset="utf-8" />
12 </head>
13 <body>
14 <p id="p1" style="background-color:yellow">This is a paragraph.</p>
15 <button class="btn1">改变高度</button>
16 <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
17 <script>
18     var $botm = $(".btn1");
19     $botm.on("click",function () {
20         $("#p1").height(50);
21     });
22 </script>
23 </body>
24 </html>
View Code

文本操作

 1 //html代码
 2 html()       // 取得第一个匹配元素的html内容
 3 html(val)    // 设置所有匹配元素的html内容
 4 
 5 //文本值
 6 text()// 取得所有匹配元素的内容
 7 text(val)// 设置所有匹配元素的内容
 8 
 9 //值
10 val()// 取得第一个匹配元素的当前值
11 val(val)// 设置所有匹配元素的值
12 val([val1, val2])// 设置checkbox、select的值
13 
14 //示例
15 <label for="c1">女</label>
16 <input name="gender" id="c1" type="radio" value="0">
17 <label for="c2">男</label>
18 <input name="gender" id="c2" type="radio" value="1">
19 
20 //获取checkbox或者radio的值
21 $("input[name='gender']:checked").val()
View Code
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>jQuery val示例</title>
 8 </head>
 9 <body>
10 
11 
12 <label for="s1">城市</label>
13 <select id="s1">
14   <option value="beijing">北京市</option>
15   <option value="shanghai">上海市</option>
16   <option selected value="guangzhou">广州市</option>
17   <option value="shenzhen">深圳市</option>
18 </select>
19 <hr>
20 <label for="s2">爱好</label>
21 <select id="s2" multiple="multiple">
22   <option value="basketball" selected>篮球</option>
23   <option value="football">足球</option>
24   <option value="doublecolorball" selected>双色球</option>
25 </select>
26 
27 <script src="jquery-3.3.1.min.js"></script>
28 <script>
29   // 单选下拉框
30   $("#s1").val("shanghai");
31   // 多选下拉框
32    $("#s2").val(["basketball", "football"]);
33 </script>
34 </body>
35 </html>
val赋值案例
 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>文本操作之登录验证</title>
 8   <style>
 9     .error {
10       color: red;
11     }
12   </style>
13 </head>
14 <body>
15 
16 <form action="">
17   <div>
18     <label for="input-name">用户名</label>
19     <input type="text" id="input-name" name="name">
20     <span class="error"></span>
21   </div>
22   <div>
23     <label for="input-password">密码</label>
24     <input type="password" id="input-password" name="password">
25     <span class="error"></span>
26   </div>
27   <div>
28     <input type="button" id="btn" value="提交">
29   </div>
30 </form>
31 <script src="jquery-3.3.1.min.js"></script>
32 <script>
33   $("#btn").click(function () {
34     var username = $("#input-name").val();
35     var password = $("#input-password").val();
36 
37     if (username.length === 0) {
38       $("#input-name").siblings(".error").text("用户名不能为空");
39     }
40     if (password.length === 0) {
41       $("#input-password").siblings(".error").text("密码不能为空");
42     }
43   })
44 </script>
45 </body>
46 </html>
登陆校验

属性操作

 1 //用于ID或者自定义属性：
 2 attr(attrName)// 返回第一个匹配元素的属性值
 3 attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
 4 attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
 5 removeAttr()// 从每一个匹配的元素中删除一个属性
 6 
 7 //实例
 8 <!DOCTYPE html>
 9 <html lang="zh-cn">
10 <head>
11     <meta charset="UTF-8">
12     <meta http-equiv="X-UA-Compatible" content="IE=edge">
13     <meta name="viewport" content="width=device-width, initial-scale=1">
14     <title>属性操作实例</title>
15 </head>
16 <body>
17 
18 <a id="a1" href="http://www.baidu.com">点我直达！</a>
19 <button id="b1">设置连接</button>
20 <input id="i1" type="checkbox">
21 <script src="jquery-3.3.1.min.js"></script>
22 <script>
23     var $link = $("#b1");
24     $link.on("click",function () {
25         $("#a1").attr("href","http://www.qq.com");
26     })
27 </script>
28 </body>
29 </html>
View Code

用户checkbox和radio的方法

1 prop() // 获取属性
2 removeProp() // 移除属性注意：
View Code

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

1 <input type="checkbox" value="1">
2 <input type="radio" value="2">
3 <script>
4   $(":checkbox[value='1']").prop("checked", true);
5   $(":radio[value='2']").prop("checked", true);
6 </script>
注意
posted @ 2018-03-19 19:01  健林  阅读(163)  评论(0)  编辑  收藏  举报