前端基础——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 documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2 jQuery对象

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

比如：

$("#test").html() 意思是指：获取ID为test的元素内的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 实例

菜单隐藏与显示

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="jquery-3.1.1.js"></script>

     <script>

         function show(self) {

             $(self).next().removeClass('hide');

             $(self).parent().siblings().children(".con").addClass('hide');

         }

     </script>

     <style>

         *{

             margin: 0 auto;

         }

         .menu{

             float: left;

             height: 600px;

             background-color: #0081c2;

             width: 20%;

         }

         .content{

             float: left;

             height: 600px;

             background-color: #9aaece;

             width: 80%;

         }

         .title{

             line-height: 30px;

             color: #fff;

             background-color: #015e98;

             padding-left: 10px;

             border-bottom: solid 1px #3A557A;

         }

         .con div{

             padding-left: 13px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

     <div class="left">

         <div class="menu">

             <div class="item">

                 <div class="title" onclick="show(this)">集群管理</div>

                 <div class="con">

                     <div>集群管理</div>

                     <div>主机管理</div>

                     <div>虚拟机管理</div>

                 </div>

             </div>

             <div class="item">

                 <div class="title" onclick="show(this)">视图管理</div>

                 <div class="con hide">

                     <div>集群视图</div>

                     <div>主机视图</div>

                     <div>虚拟机视图</div>

                 </div>

             </div>

             <div class="item">

                 <div class="title" onclick="show(this)">系统管理</div>

                 <div class="con hide">

                     <div>用户管理</div>

                     <div>规则管理</div>

                     <div>系统设置</div>

                 </div>

             </div>

         </div>

     </div>

     <div class="content"></div>

 </body>

 </html>

四 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()

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="jquery-3.1.1.js"></script>

 </head>

 <body>

     <input type="button" value="全选" onclick="selectall()">

     <input type="button" value="取消" onclick="cancel()">

     <input type="button" value="反选" onclick="reverse()">

     <table border="1">

         <tr>

             <td><input type="checkbox"></td>

             <td>111111</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>222222</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>333333</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>444444</td>

         </tr>

     </table>

 <script>

     function selectall() {

 //        obj = document.body;

 //        obj.a = 1

 //        obj.b = 2

 //        obj.attributes = { 'id':xx, '':''}

 //        obj.attributes.type = 123

 //        obj.a = 123;

         // select,check,radio prop  obj.checked = True

         // <div alex='name'></div>

 //        $("table :checkbox").attr("checked",true)

         $("table :checkbox").prop("checked",true)

     }

     function cancel() {

 //        $("table :checkbox").attr("checked",false);     // 不成功

         $("table :checkbox").prop("checked",false);

 //        $("table :checkbox").removeAttr("checked")

 //        $("table :checkbox").removeProp("checked")    // 不成功

     }

     function reverse() {

         $("table :checkbox").each(function () {

             if ($(this).prop("checked")){

                 $(this).prop("checked",false)

             }else {

                 $(this).prop("checked",true)

             }

         })

     }

 </script>

 </body>

 </html>

复选框正反选

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="jquery-3.1.1.js"></script>

     <style>

         *{

             margin: 0;

         }

         #div1{

             position: fixed;    /*position固定住div1*/

             background-color: #cc3300;

             height: 1000px;

             width: 100%;

         }

         #div2{

             position: fixed;

             background-color: #a2a2a2;

             top: 0;

             right: 0;

             bottom: 0;

             left: 0;

             opacity: 0.7;

         }

         #div3{

             position: absolute;   /*绝对定位*/

             height: 300px;

             width: 200px;

             background-color: brown;

             top: 50%;

             left: 50%;

             margin-left: -100px;

             margin-top: -150px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

     <div id="div1">

         <input type="button" value="点击" onclick="show()">

     </div>

     <div id="div2" class="div hide"></div>

     <div id="div3" class="div hide">

         <input type="button" value="确定" onclick="ok()">

     </div>

 <script>

     function show() {

         $("#div2,#div3").removeClass("hide");

     }

     function ok() {

         $("#div2,#div3").addClass("hide");

     }

 </script>

 </body>

 </html>

模态对话框简单版

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="jquery-3.1.1.js"></script>

     <script>

         function tab(self) {

                var str=$(self).attr("xxx");   // 获取元素属性

                $("#"+str).removeClass("hide").siblings().addClass("hide");  // 通过"#"+str字符串拼接得到关联的标签

                $(self).addClass("current").siblings().removeClass("current");

         }

     </script>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .tab{

             width: 60%;

             margin: 0 auto;

         }

         .menu{

             line-height: 30px;

             background-color: #9aaece;

         }

         .menu li{

             display: inline-block;

             padding-left: 6px;

             padding-right: 7px;

         }

         .content{

             height: 350px;

             border: 1px solid #95b0dc;

             background-color: #dfe7f2;

             border-top: 1px solid #4ba575;

         }

         .current{

             color: #fff;

             background-color: #3A557A;

             border-bottom: 2px solid #4ba575;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

     <div class="tab">

         <ul class="menu">

             <li xxx="con1" class="current" onclick="tab(this)">概要</li>

             <li xxx="con2" onclick="tab(this)">存储池</li>

             <li xxx="con3" onclick="tab(this)">操作日志</li>

         </ul>

         <div class="content">

         <div id="con1">内容一</div>

         <div id="con2" class="hide">内容二</div>

         <div id="con3" class="hide">内容三</div>

         </div>

     </div>

 </body>

 </html>

Tab标签切换

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="jquery-3.1.1.js"></script>

 </head>

 <body>

     <div class="outer">

         <div class="condition">

             <div class="icons" style="display:inline-block">

                 <a onclick="add(this);"><button>+</button></a>

             </div>

             <div class="input" style="display:inline-block">

                 <input type="checkbox">

                 <input type="text" value="alex">

             </div>

         </div>

     </div>

 <script>

     function add(self){

         var $duplicate = $(self).parent().parent().clone();

         // find()方法:搜索所有与指定表达式匹配的元素

         $duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-");

         $duplicate.appendTo($(self).parent().parent().parent());

     }

    function removed(self){

        $(self).parent().parent().remove()

    }

 </script>

 </body>

 </html>

clone方法

面板拖动思路：

大盒子包含两个小盒子，标题栏和内容框。

（1）当鼠标滑动到标题栏时，鼠标光标变成可拖动样式；

（2）当鼠标按下时，获取鼠标当前横纵坐标位置，以及面板当前与文档左边和上边的距离；

（3）鼠标按下并移动时，获取鼠标新的横纵坐标位置；此时面板与文档左边和上边的距离为，面板与文档原来的距离加上鼠标横纵坐标的相对距离。通过修改CSS样式实时改变面板的位置。

（4）鼠标松开时取消“鼠标移动”事件监听，Bingo～

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script type="text/javascript" src="jquery-3.1.1.js"></script>

     <style>

         .outer{

             width: 400px;

             position: absolute;

             border: 1px solid #9e4959;

         }

         .title{

             height: 25px;

             color: white;

             background-color: #1c3e6d;

         }

         .content{

             height: 300px;

         }

     </style>

 </head>

 <body>

     <div class="outer">

         <div class="title">标题</div>

         <div class="content"></div>

     </div>

 <script>

     $(".title").mouseover(function () {

         $(this).css("cursor","move")

     }).mousedown(function (event) {

         var start_x = event.screenX;

         var start_y = event.screenY;

         var parent_left = $(this).offset().left;

         var parent_top = $(this).offset().top;

         $(this).on("mousemove",function (new_event) {

             var new_x = new_event.screenX;

             var new_y = new_event.screenY;

             var new_parent_left = parent_left + (new_x - start_x);

             var new_parent_top = parent_top + (new_y - start_y);

             $(this).parent().css("left",new_parent_left + "px");

             $(this).parent().css("top",new_parent_top + "px");

         }).mouseup(function () {

             $(this).off("mousemove")

         })

     })

 </script>

 </body>

 </html>

面板拖动