一 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>

面板拖动

前端基础——jQuery的更多相关文章

  1. web前端基础——jQuery编程基础

    1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...

  2. Web前端基础——jQuery（一）

    前几天回老家呆了几天,几乎没有怎么学习新的知识,这期间一直有断断续续的看<Java编程思想>,还刷了一些前沿消息,也算没闲着.今天开始学习jQuery啦,继续前进. 在网上查了,买了这本书 ...

  3. 前端基础-jQuery的优点以及用法

    一.jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交 ...

  4. 前端基础-jQuery中的如何操作标签

    阅读目录 样式操作 文本操作 属性操作 文档操作 一.样式操作 1.样式类 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名. hasClas ...

  5. 前端基础-jQuery的内容之选择器

    阅读目录 ID选择器 类选择器 元素选择器 通配符选择器 层级选择器 基本筛选器 内容筛选器 可见性筛选器 属性筛选器 子元素筛选器 表单元素筛选器 表单对象筛选器 this和$(this) 一.jQ ...

  6. 前端基础----jquery

    一.jQuery是什么? <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. <2>jQuery是继 ...

  7. 前端基础jQuery

    jQury jQuery 是一个 JavaScript 函数库,jQuery 极大地简化了 JavaScript 编程. jQuery库包含以下功能: HTML 元素选取 HTML 元素操作 CSS ...

  8. web前端基础——jQuery编程进阶

    1 jQuery本质 jQuery不是一门独立的语言,它是JavaScript的一个类库或框架.jQuery的核心思想就是:选取元素,对其操作.很多时候写jQuery代码的关键就是怎样设计合适的选择器 ...

  9. Web前端基础——jQuery（三）

    本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQue ...

  10. Web前端基础——jQuery（二）

    一.jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可 ...

随机推荐

  1. Shell 关闭指定进程

    例如要关闭jupyter-notebook这个进程: - | 说明:管道符“|”用来隔开两个命令,管道符左边命令的输出会作为管道符右边命令的输入. “ps -ef” 查看所有进程 “grep -v g ...

  2. Jmeter-ForEach控制器

    ForEach Controller需要配合‘用户定义的变量’来使用,作用是参数化 名称:字面意思,ForEach Controller的名称 注释:字面意思 输入变量前缀:变量的前缀:如要使用的变量 ...

  3. 【angularJS】Route路由

    介绍 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). ...

  4. WPF自定义控件之图形解锁控件 ScreenUnLock

    ScreenUnLock 与智能手机上的图案解锁功能一样.通过绘制图形达到解锁或记忆图形的目的. 本人突发奇想,把手机上的图形解锁功能移植到WPF中.也应用到了公司的项目中. 在创建ScreenUnL ...

  5. 关于如何利用Pocket CHM Pro制作帮助文档

    关于如何利用Pocket CHM Pro制作帮助文档 编写人:CC阿爸 2015-4-6 今天在这里,我想与大家一起分享如何利用Pocket CHM Pro制作软件系统的帮助文档,在此做个小结,以供参 ...

  6. [转]VS2010中使用模块定义文件（.def）

    都知道在写DLL的时候,使用模块定义文件(.def)可以防止DLL里的命名变更. vc6.0中只要在当前目录下添加.def文件,然后编译就Ok了 但在vs2010里这样做是不可以的,必须在项目--属性 ...

  7. LINK : warning LNK4098: 默认库“LIBCMTD”与其他库的使用冲突；请使用 /NODEFAULTLIB:library

    LINK : warning LNK4098: 默认库“LIBCMTD”与其他库的使用冲突:请使用 /NODEFAULTLIB:library 转自:http://blog.csdn.net/pgms ...

  8. javascript基础-js函数

    一.创建函数的方式 1)普通方式 function cal( num1, num2 ) { return num1+num2; } 2)使用变量初始化方式 var plus = function(nu ...

  9. Server Tomcat v9.0 Server at localhost failed to start.

    最近老是出现这样的问题,在网上找了很多方法都不行,试着把Tomcat重新配置了一下就好了,事后找到一个博客,试了一下也可以使用

  10. StreamTool

    public class StreamTool { //从流中读取数据 public static byte[] read(InputStream inStream) throws Exception ...