首页 > 代码库 > jQuery

jQuery

一 jQuery

1 简介

jQuery是一个“写得更少,但做得更多”的轻量级JavaScript库。jQuery极大地简化了JavaScript编程。

  • 它是轻量级的js(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
  • jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documentsevents、实现动画效果,并且方便地为网站提供AJAX交互。
  • jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

2 jQuery对象

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

      比如: 

      $("#test").html()   意思是指:获取IDtest的元素内的html代码。其中html()jQuery里的方法 

      这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; 

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错

约定:如果获取的是 jQuery 对象那么要在变量前面加上$. 

var $variable = jQuery 对象

var variable = DOM 对象

 3 jQuery基本语法

$(selector).action()

二 jQuery选择器

http://jquery.cuishifeng.cn/index.html

1 基本选择器

 $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

 

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

 

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

 

$("*").css("color","red").css("background-color","#8eb031");

$("#div2").css("color","red");

$(".div1").css("width","200px").css("background-color","#8eb031");

$("p").css("font-weight","700");

$(".div1,#div2").hide();

 

//防止文档在完全加载(就绪)之前运行jQuery代码

$(document).ready(function(){

--- jQuery functions go here ----

});

 2 层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

空格:后代选择器

> :子代选择器

+ :毗邻,即下一个紧邻的元素

~ :

3 属性选择器

$(‘[id="div1"]‘)   $(‘["alex="sb"][id]‘)

 

$("[class=‘div1‘]").hide();

$("[id=‘div2‘]").hide();

$("[alex=‘ss‘]").hide();  // 支持自定义属性选择

4 表单选择器

 $("[type=‘text‘]")----->$(":text")   注意只适用于input标签

两种方式均表示:所有 type="text" 的 <input> 元素。

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域 
$("input:checked")    //所有选中的元素
$("select option:selected")    //select中所有选中的option元素

 三 jQuery筛选器

1 过滤筛选器

$("li").eq(2)        // 列表中的第3个元素(index从0开始)。

$("li").first()        // 列表中的第一个元素。

$("ul li").hasclass("test")  // 查看指定的元素是否拥有test类。

2 查询筛选器

$("div").children()      //div中的每个子元素,第一层
$("div").find("span")    //div中的包含的所有span元素,子子孙孙
$("p").next()          //紧邻p元素后的一个同级元素
$("p").nextAll()         //p元素之后所有的同级元素
$("#test").nextUntil("#test2")  //id为"#test"元素之后到id为‘#test2‘之间所有的同级元素,不包括自己和最后一个元素
$("p").prev()            //紧邻p元素的前一个同级元素
$("p").prevAll()         //p元素之前所有的同级元素
$("#test").prevUntil("#test2")  //id为"#test"元素之前到id为‘#test2‘之间所有的同辈元素,不包括自己和最后一个元素

$("p").parent() //每个p元素的父元素 
$("p").parents() //每个p元素的所有祖先元素,body
$("#td1").parentsUntil("#td2") //id为"#td1"元素到id为‘#td2‘之间所有的父级元素,掐头去尾 
$("div").siblings() //所有的同级元素,不包括自己 

 3 实例

菜单隐藏与显示

技术分享
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="jquery-3.1.1.js"></script>
 7     <script>
 8         function show(self) {
 9             $(self).next().removeClass(hide);
10             $(self).parent().siblings().children(".con").addClass(hide);
11         }
12     </script>
13     <style>
14         *{
15             margin: 0 auto;
16         }
17 
18         .menu{
19             float: left;
20             height: 600px;
21             background-color: #0081c2;
22             width: 20%;
23         }
24 
25         .content{
26             float: left;
27             height: 600px;
28             background-color: #9aaece;
29             width: 80%;
30         }
31 
32         .title{
33             line-height: 30px;
34             color: #fff;
35             background-color: #015e98;
36             padding-left: 10px;
37             border-bottom: solid 1px #3A557A;
38         }
39 
40         .con div{
41             padding-left: 13px;
42         }
43 
44         .hide{
45             display: none;
46         }
47     </style>
48 </head>
49 <body>
50     <div class="left">
51         <div class="menu">
52             <div class="item">
53                 <div class="title" onclick="show(this)">集群管理</div>
54                 <div class="con">
55                     <div>集群管理</div>
56                     <div>主机管理</div>
57                     <div>虚拟机管理</div>
58                 </div>
59             </div>
60             <div class="item">
61                 <div class="title" onclick="show(this)">视图管理</div>
62                 <div class="con hide">
63                     <div>集群视图</div>
64                     <div>主机视图</div>
65                     <div>虚拟机视图</div>
66                 </div>
67             </div>
68             <div class="item">
69                 <div class="title" onclick="show(this)">系统管理</div>
70                 <div class="con hide">
71                     <div>用户管理</div>
72                     <div>规则管理</div>
73                     <div>系统设置</div>
74                 </div>
75             </div>
76         </div>
77     </div>
78     <div class="content"></div>
79 </body>
80 </html>
View Code

 四 jQuery属性

  • attr()          // 返回或设置被选元素的属性值
  • removeAttr()       // 从每一个匹配的元素中删除一个属性
  • prop()                 // 设置或返回匹配元素的属性值    select,check,radio标签用prop,其它用attr。
  • removeProp()    //  用来删除由.prop()方法设置的属性集
$("img").attr("src");

$("img").attr({ src: "test.jpg", alt: "Test Image" });

$("img").removeAttr("src");

$("input[type=‘checkbox‘]").prop("checked");

 五 jQuery中CSS类操作

  • addClass()             // 为每个匹配的元素添加指定的类名。
  • removeClass()      //  从所有匹配的元素中删除全部或者指定的类。
$("p").addClass("selected");

$("p").removeClass("selected");

 六 jQuery中HTML代码/文本/值 操作

  • html()            // 获取第一个匹配元素的HTML内容。不加参数获取值,加参数设置值
  • text()             // 获取匹配元素中所有内容,不渲染。不加参数获取值,加参数设置值
  • val()              // 获得匹配元素的当前值。不加参数获取值,加参数设置值

 七 jQuery位置操作

  • offset()        // 获取匹配元素距离文档top和left的距离。offset().top,offset().left
  • position       // 获取匹配元素相对父元素的距离(偏移)。
  • scrollTop()   // 获取匹配元素相对滚动条顶部的偏移。
  • scrollLeft()   // 获取匹配元素相对滚动条左侧的偏移。

八 jQuery尺寸操作

  • height()    // 当前元素自身的高度
  • width()     // 当前元素自身的宽度
  • innerHeight()   // 自身高度 + padding
  • innerWidth()    // 自身宽度 + margin
  • outerHeight()  // 默认参数为false
    • 参数为false时,自身高度 + padding + border
    • 参数为true时,自身高度 + padding + border + margin  
  • outerWidth()   // 默认参数为false
    • 参数为false时,自身宽度 + padding + border
    • 参数为true时,自身宽度 + padding + border + margin  

获取文档高度:    $(document).height()

获取窗口高度:     $(window).height()

技术分享
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="jquery-3.1.1.js"></script>
 7 </head>
 8 <body>
 9     <input type="button" value="全选" onclick="selectall()">
10     <input type="button" value="取消" onclick="cancel()">
11     <input type="button" value="反选" onclick="reverse()">
12     <table border="1">
13         <tr>
14             <td><input type="checkbox"></td>
15             <td>111111</td>
16         </tr>
17         <tr>
18             <td><input type="checkbox"></td>
19             <td>222222</td>
20         </tr>
21         <tr>
22             <td><input type="checkbox"></td>
23             <td>333333</td>
24         </tr>
25         <tr>
26             <td><input type="checkbox"></td>
27             <td>444444</td>
28         </tr>
29     </table>
30 <script>
31     function selectall() {
32 //        obj = document.body;
33 //        obj.a = 1
34 //        obj.b = 2
35 //        obj.attributes = { ‘id‘:xx, ‘‘:‘‘}
36 //        obj.attributes.type = 123
37 //        obj.a = 123;
38         // select,check,radio prop  obj.checked = True
39         // <div alex=‘name‘></div>
40 //        $("table :checkbox").attr("checked",true)
41         $("table :checkbox").prop("checked",true)
42     }
43 
44     function cancel() {
45 //        $("table :checkbox").attr("checked",false);     // 不成功
46         $("table :checkbox").prop("checked",false);
47 //        $("table :checkbox").removeAttr("checked")
48 //        $("table :checkbox").removeProp("checked")    // 不成功
49     }
50     
51     function reverse() {
52         $("table :checkbox").each(function () {
53             if ($(this).prop("checked")){
54                 $(this).prop("checked",false)
55             }else {
56                 $(this).prop("checked",true)
57             }
58         })
59     }
60 </script>
61 </body>
62 </html>
复选框正反选
技术分享
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="jquery-3.1.1.js"></script>
 7     <style>
 8         *{
 9             margin: 0;
10         }
11 
12         #div1{
13             position: fixed;    /*position固定住div1*/
14             background-color: #cc3300;
15             height: 1000px;
16             width: 100%;
17         }
18 
19         #div2{
20             position: fixed;
21             background-color: #a2a2a2;
22             top: 0;
23             right: 0;
24             bottom: 0;
25             left: 0;
26             opacity: 0.7;
27         }
28 
29         #div3{
30             position: absolute;   /*绝对定位*/
31             height: 300px;
32             width: 200px;
33             background-color: brown;
34             top: 50%;
35             left: 50%;
36             margin-left: -100px;
37             margin-top: -150px;
38         }
39 
40         .hide{
41             display: none;
42         }
43     </style>
44 </head>
45 <body>
46     <div id="div1">
47         <input type="button" value="点击" onclick="show()">
48     </div>
49     <div id="div2" class="div hide"></div>
50     <div id="div3" class="div hide">
51         <input type="button" value="确定" onclick="ok()">
52     </div>
53 <script>
54     function show() {
55         $("#div2,#div3").removeClass("hide");
56     }
57     function ok() {
58         $("#div2,#div3").addClass("hide");
59     }
60 </script>
61 </body>
62 </html>
模态对话框简单版
技术分享
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="jquery-3.1.1.js"></script>
 7     <script>
 8         function tab(self) {
 9                var str=$(self).attr("xxx");   // 获取元素属性
10                $("#"+str).removeClass("hide").siblings().addClass("hide");  // 通过"#"+str字符串拼接得到关联的标签
11                $(self).addClass("current").siblings().removeClass("current");
12         }
13     </script>
14     <style>
15         *{
16             margin: 0;
17             padding: 0;
18         }
19 
20         .tab{
21             width: 60%;
22             margin: 0 auto;
23         }
24         .menu{
25             line-height: 30px;
26             background-color: #9aaece;
27         }
28 
29         .menu li{
30             display: inline-block;
31             padding-left: 6px;
32             padding-right: 7px;
33         }
34 
35         .content{
36             height: 350px;
37             border: 1px solid #95b0dc;
38             background-color: #dfe7f2;
39             border-top: 1px solid #4ba575;
40         }
41 
42         .current{
43             color: #fff;
44             background-color: #3A557A;
45             border-bottom: 2px solid #4ba575;
46         }
47 
48         .hide{
49             display: none;
50         }
51     </style>
52 </head>
53 <body>
54     <div class="tab">
55         <ul class="menu">
56             <li xxx="con1" class="current" onclick="tab(this)">概要</li>
57             <li xxx="con2" onclick="tab(this)">存储池</li>
58             <li xxx="con3" onclick="tab(this)">操作日志</li>
59         </ul>
60         <div class="content">
61         <div id="con1">内容一</div>
62         <div id="con2" class="hide">内容二</div>
63         <div id="con3" class="hide">内容三</div>
64         </div>
65     </div>
66 
67 </body>
68 </html>
Tab标签切换
技术分享
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script type="text/javascript" src="jquery-3.1.1.js"></script>
 7 </head>
 8 <body>
 9     <div class="outer">
10         <div class="condition">
11 
12             <div class="icons" style="display:inline-block">
13                 <a onclick="add(this);"><button>+</button></a>
14             </div>
15 
16             <div class="input" style="display:inline-block">
17                 <input type="checkbox">
18                 <input type="text" value="alex">
19             </div>
20         </div>
21     </div>
22 <script>
23 
24     function add(self){
25         var $duplicate = $(self).parent().parent().clone();
26         // find()方法:搜索所有与指定表达式匹配的元素
27         $duplicate.find(a[onclick="add(this);"]).attr(onclick,"removed(this)").children("").text("-");
28         $duplicate.appendTo($(self).parent().parent().parent());
29 
30     }
31    function removed(self){
32 
33        $(self).parent().parent().remove()
34 
35    }
36 
37 </script>
38 </body>
39 </html>
clone方法

 

jQuery