前端基础之JQuery
Posted shuyang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端基础之JQuery相关的知识，希望对你有一定的参考价值。
目录：
- JQuery简介
- 选择器与筛选器
- 属性，css，文档处理
- each循环、文档节点处理、动画效果、css操作
- 插件机制
- 示例
一、JQuery简介
1、JQuery的由来：
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理htmldocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
2、JQuery的对象：
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法:
$(“#test”).html();
1 $("#test").html() 2 3 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 4 5 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 6 7 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错 8 9 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 10 11 var $variable = jQuery 对象 12 var variable = DOM 对象 13 14 $variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action()
参考：http://jquery.cuishifeng.cn/
二、选择器与筛选器
1、选择器
1）基本选择器
1 $("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 2 $("div") 选择所有的div标签元素，返回div元素数组 3 $(".myClass") 选择使用myClass类的css的所有元素 4 $("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass") 5 $(".class,p,div") 选择p或div或class="class"的标签
2）层级选择器
1 $("form input") 选择所有的form元素中的input元素 2 $("#main > *") 选择id值为main的所有的子元素 3 $("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 4 $("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
3）属性选择器
1 $("div[id]") 选择所有含有id属性的div元素 2 $("input[name=‘newsletter‘]") 选择所有的name属性等于‘newsletter‘的input元素 3 $("input[name!=‘newsletter‘]") 选择所有的name属性不等于‘newsletter‘的input元素 4 $("input[name^=‘news‘]") 选择所有的name属性以‘news‘开头的input元素 5 $("input[name$=‘news‘]") 选择所有的name属性以‘news‘结尾的input元素 6 $("input[name*=‘man‘]") 选择所有的name属性包含‘news‘的input元素 7 $("input[id][name$=‘man‘]") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
4）表单选择器
1 $(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button 2 $(":text") 选择所有的text input元素 3 $(":password") 选择所有的password input元素 4 $(":radio") 选择所有的radio input元素 5 $(":checkbox") 选择所有的checkbox input元素 6 $(":submit") 选择所有的submit input元素 7 $(":image") 选择所有的image input元素 8 $(":reset") 选择所有的reset input元素 9 $(":button") 选择所有的button input元素 10 $(":file") 选择所有的file input元素 11 $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
1 $(":enabled") 选择所有的可操作的表单元素 2 $(":disabled") 选择所有的不可操作的表单元素 3 $(":checked") 选择所有的被checked的表单元素 4 $("select option:selected") 选择所有的select 的子元素中被selected的元素 5 $("[type=‘text‘]")----->$(":text") 注意只适用于input标签 : $("input:checked") 6 7 选取一个 name 为”S_03_22″的input text框的上一个td的text值 8 $(”input[@ name =S_03_22]“).parent().prev().text() 9 10 名字以”S_”开始，并且不是以”_R”结尾的 11 $(”input[@ name ^=‘S_‘]“).not(”[@ name $=‘_R‘]“) 12 13 一个名为 radio_01的radio所选的值 14 $(”input[@ name =radio_01][@checked]“).val();
2、筛选器
1）基本筛选器
1 $("tr:first") 选择所有tr元素的第一个 2 $("tr:last") 选择所有tr元素的最后一个 3 $("input:not(:checked) + span") 选择input标签不含checked元素，且有兄弟标签为span标签的input元素 4 $("li:eq(2)") 选择第二个li元素 5 $("li:even") 选择每个相隔的（偶数） <li> 元素： 6 $("li:odd") 选择每个相隔的（奇数） <li> 元素： 7 $("li:gt(1)") 选择大于第一个<li>的<li>元素： 8 $("li:lt(2)") 选择小于第一个<li>的<li>元素：
2）过滤筛选器
1 $("li").eq(2) 过滤第2个的li标签 2 $("li").first() 过滤第1个的li标签 3 $("ul li").hasclass("test") ul下过滤class=‘test’的li标签
3）查找筛选器
1 查找子标签： $("div").children(".test") $("div").find(".test") 2 3 向下查找兄弟标签： $(".test").next() $(".test").nextAll() 4 $(".test").nextUntil() 5 6 向上查找兄弟标签： $("div").prev() $("div").prevAll() 7 $("div").prevUntil() 8 查找所有兄弟标签： $("div").siblings() 9 10 查找父标签： $(".test").parent() $(".test").parents() 11 $(".test").parentUntil()
3、选择器列表
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 <h1> - <h6> |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains(‘W3School‘)") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href=‘#‘]") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!=‘#‘]") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$=‘.jpg‘]") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
三、属性，css，文档处理
1、事件
| 方法 | 描述 |
|---|---|
| bind() | 向匹配元素附加一个或更多事件处理器 |
| blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
| change() | 触发、或将函数绑定到指定元素的 change 事件 |
| click() | 触发、或将函数绑定到指定元素的 click 事件 |
| dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
| delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
| die() | 移除所有通过 live() 函数添加的事件处理程序。 |
| error() | 触发、或将函数绑定到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
| event.pageX | 相对于文档左边缘的鼠标位置。 |
| event.pageY | 相对于文档上边缘的鼠标位置。 |
| event.preventDefault() | 阻止事件的默认动作。 |
| event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
| event.target | 触发该事件的 DOM 元素。 |
| event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
| event.type | 描述事件的类型。 |
| event.which | 指示按了哪个键或按钮。 |
| focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
| keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
| keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
| keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
| live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
| load() | 触发、或将函数绑定到指定元素的 load 事件 |
| mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
| mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
| mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
| mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
| mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
| mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
| mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
| one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
| ready() | 文档就绪事件（当 HTML 文档就绪可用时） |
| resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
| scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
| select() | 触发、或将函数绑定到指定元素的 select 事件 |
| submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
| toggle() | 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一个被匹配元素的指定事件 |
| unbind() | 从匹配元素移除一个被添加的事件处理器 |
| undelegate() | 从匹配元素移除一个被添加的事件处理器，现在或将来 |
| unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
1）页面载入
ready(fn) // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){}) 2）事件绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
3）事件委派
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
1 <ul> 2 <li>1</li> 3 <li>2</li> 4 <li>3</li> 5 </ul> 6 <hr> 7 <button id="add_li">Add_li</button> 8 <button id="off">off</button> 9 10 <script src="jquery.min.js"></script> 11 <script> 12 $("ul li").click(function(){ 13 alert(123) 14 }); 15 16 $("#add_li").click(function(){ 17 var $ele=$("<li>"); 18 $ele.text(Math.round(Math.random()*10)); 19 $("ul").append($ele) 20 21 }); 22 23 24 // $("ul").on("click","li",function(){ 25 // alert(456) 26 // }) 27 28 $("#off").click(function(){ 29 $("ul li").off() 30 }) 31 32 </script>
4）事件切换
hover事件：
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .test{ 12 13 width: 200px; 14 height: 200px; 15 background-color: wheat; 16 17 } 18 </style> 19 </head> 20 <body> 21 22 23 <div class="test"></div> 24 </body> 25 <script src="jquery.min.js"></script> 26 <script> 27 // function enter(){ 28 // console.log("enter") 29 // } 30 // function out(){ 31 // console.log("out") 32 // } 33 // $(".test").hover(enter,out) 34 35 36 $(".test").mouseenter(function(){ 37 console.log("enter") 38 }); 39 40 $(".test").mouseleave(function(){ 41 console.log("leave") 42 }); 43 44 </script> 45 </html>
2、属性操作
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的类名。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
| val() | 设置或返回匹配元素的值。 |
1）css类方法
$("").addClass(class|fn)
$("").removeClass([class|fn])
2）attr属性方法
$("").attr();
$("").removeAttr();
$("").prop(); 设置或返回匹配元素的属性和值。
$("").removeProp(); 从所有匹配的元素中移除指定的属性。
ps.区别：
在jQuery中，prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。
3、文档处理：
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的类名。 |
| after() | 在匹配的元素之后插入内容。 |
| append() | 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 |
| appendTo() | 向目标结尾插入匹配元素集合中的每个元素。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| before() | 在每个匹配的元素之前插入内容。 |
| clone() | 创建匹配元素集合的副本。 |
| detach() | 从 DOM 中移除匹配元素集合。 |
| empty() | 删除匹配的元素集合中所有的子节点。 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
| insertAfter() | 把匹配的元素插入到另一个指定的元素集合的后面。 |
| insertBefore() | 把匹配的元素插入到另一个指定的元素集合的前面。 |
| prepend() | 向匹配元素集合中的每个元素开头插入由参数指定的内容。 |
| prependTo() | 向目标开头插入匹配元素集合中的每个元素。 |
| remove() | 移除所有匹配的元素。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
| replaceAll() | 用匹配的元素替换所有匹配到的元素。 |
| replaceWith() | 用新内容替换匹配的元素。 |
| text() | 设置或返回匹配元素的内容。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
| unwrap() | 移除并替换指定元素的父元素。 |
| val() | 设置或返回匹配元素的值。 |
| wrap() | 把匹配的元素用指定的内容或元素包裹起来。 |
| wrapAll() | 把所有匹配的元素用指定的内容或元素包裹起来。 |
| wrapinner() | 将每一个匹配的元素的子内容用指定的内容或元素包裹起来。 |
1）HTML代码：
$("").html([val|fn])
2）文本：
$("").text([val|fn])
3）值：
$("").val([val|fn|arr])
四、each循环、文档节点处理、动画效果、css操作
1、each循环
我们知道，$("p").css("color","red")是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦
jquery支持两种循环方式：
方式一：
格式：$.each(obj,fn)
1 li=[10,20,30,40]; 2 dic={name:"wang",sex:"male"}; 3 $.each(li,function(i,x){ 4 console.log(i,x) 5 });
方式二：
格式：$("").each(fn)
1 $("tr").each(function(){ 2 console.log($(this).html()) 3 })
其中,$(this)代指当前循环标签。
ps.each扩展：
1 /* 2 function f(){ 3 4 for(var i=0;i<4;i++){ 5 6 if (i==2){ 7 return 8 } 9 console.log(i) 10 } 11 12 } 13 f(); // 这个例子大家应该不会有问题吧!!! 14 //----------------------------------------------------------------------- 15 16 17 li=[11,22,33,44]; 18 $.each(li,function(i,v){ 19 20 if (v==33){ 21 return ; // ===试一试 return false会怎样? 22 } 23 console.log(v) 24 }); 25 26 //------------------------------------------ 27 28 29 // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行 30 31 //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了, 32 //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步: 33 for(var i in obj){ 34 35 ret=func(i,obj[i]) ; 36 if(ret==false){ 37 return ; 38 } 39 40 } 41 // 这样就很灵活了: 42 // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true 43 // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false 44 45 46 // ---------------------------------------------------------------------
2、文档节点处理
1）创建一个标签对象
$("<p>")
2）内部插入对象（父子关系节点）
$("").append(content|fn) ----->$("p").append("<b>Hello</b>"); 对象前面插入
$("").appendTo(content) ----->$("p").appendTo("div"); 对象后面插入
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); 对象前面插入
$("").prependTo(content) ----->$("p").prependTo("#foo"); 对象后面插入
3）外部插入对象（兄弟关系节点）
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
4）替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
5）删除
$("").empty() 清空左右
$("").remove([expr])
6）复制
$("").clone([Even[,deepEven]])
3、动画效果
1）显示隐藏
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-2.1.4.min.js"></script> 7 <script> 8 9 $(document).ready(function() { 10 $("#hide").click(function () { 11 $("p").hide(1000); 12 }); 13 $("#show").click(function () { 14 $("p").show(1000); 15 }); 16 17 //用于切换被选元素的 hide() 与 show() 方法。 18 $("#toggle").click(function () { 19 $("p").toggle(); 20 }); 21 }) 22 23 </script> 24 <link type="text/css" rel="stylesheet" href="style.css"> 25 </head> 26 <body> 27 28 29 <p>hello</p> 30 <button id="hide">隐藏</button> 31 <button id="show">显示</button> 32 <button id="toggle">切换</button> 33 34 </body> 35 </html>
2）滑动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-2.1.4.min.js"></script> 7 <script> 8 $(document).ready(function(){ 9 $("#slideDown").click(function(){ 10 $("#content").slideDown(1000); 11 }); 12 $("#slideUp").click(function(){ 13 $("#content").slideUp(1000); 14 }); 15 $("#slideToggle").click(function(){ 16 $("#content").slideToggle(1000); 17 }) 18 }); 19 </script> 20 <style> 21 22 #content{ 23 text-align: center; 24 background-color: lightblue; 25 border:solid 1px red; 26 display: none; 27 padding: 50px; 28 } 29 </style> 30 </head> 31 <body> 32 33 <div id="slideDown">出现</div> 34 <div id="slideUp">隐藏</div> 35 <div id="slideToggle">toggle</div> 36 37 <div id="content">helloworld</div> 38 39 </body> 40 </html>
3）淡入淡出
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-2.1.4.min.js"></script> 7 <script> 8 $(document).ready(function(){ 9 $("#in").click(function(){ 10 $("#id1").fadeIn(1000); 11 12 13 }); 14 $("#out").click(function(){ 15 $("#id1").fadeOut(1000); 16 17 }); 18 $("#toggle").click(function(){ 19 $("#id1").fadeToggle(1000); 20 21 22 }); 23 $("#fadeto").click(function(){ 24 $("#id1").fadeTo(1000,0.4); 25 26 }); 27 }); 28 29 30 31 </script> 32 33 </head> 34 <body> 35 <button id="in">fadein</button> 36 <button id="out">fadeout</button> 37 <button id="toggle">fadetoggle</button> 38 <button id="fadeto">fadeto</button> 39 40 <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div> 41 42 </body> 43 </html>
4）回掉函数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-2.1.4.min.js"></script> 7 8 </head> 9 <body> 10 <button>hide</button> 11 <p>helloworld helloworld helloworld</p> 12 13 14 15 <script> 16 $("button").click(function(){ 17 $("p").hide(1000,function(){ 18 alert($(this).html()) 19 }) 20 21 }) 22 </script> 23 </body> 24 </html>
4、css操作
| CSS 属性 | 描述 |
|---|---|
| css() | 设置或返回匹配元素的样式属性。 |
| height() | 设置或返回匹配元素的高度。 |
| offset() | 返回第一个匹配元素相对于文档的位置。 |
| offsetParent() | 返回最近的定位祖先元素。 |
| position() | 返回第一个匹配元素相对于父元素的位置。 |
| scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
| scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
| width() | 设置或返回匹配元素的宽度。 |
1）位置操作
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
示例1：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .test1{ 8 width: 200px; 9 height: 200px; 10 background-color: wheat; 11 } 12 </style> 13 </head> 14 <body> 15 16 17 <h1>this is offset</h1> 18 <div class="test1"></div> 19 <p></p> 20 <button>change</button> 21 </body> 22 <script src="jquery-3.1.1.js"></script> 23 <script> 24 var $offset=$(".test1").offset(); 25 var lefts=$offset.left; 26 var tops=$offset.top; 27 28 $("p").text("Top:"+tops+" Left:"+lefts); 29 $("button").click(function(){ 30 31 $(".test1").offset({left:200,top:400}) 32 }) 33 </script> 34 </html>
示例2：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 .box1{ 11 width: 200px; 12 height: 200px; 13 background-color: rebeccapurple; 14 } 15 .box2{ 16 width: 200px; 17 height: 200px; 18 background-color: darkcyan; 19 } 20 .parent_box{ 21 position: relative; 22 } 23 </style> 24 </head> 25 <body> 26 27 28 29 30 <div class="box1"></div> 31 <div class="parent_box"> 32 <div class="box2"></div> 33 </div> 34 <p></p> 35 36 37 <script src="jquery-3.1.1.js"></script> 38 <script> 39 var $position=$(".box2").position(); 40 var $left=$position.left; 41 var $top=$position.top; 42 43 $("p").text("TOP:"+$top+"LEFT"+$left) 44 </script> 45 </body> 46 </html>
示例3：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 body{ 9 margin: 0; 10 } 11 .returnTop{ 12 height: 60px; 13 width: 100px; 14 background-color: peru; 15 position: fixed; 16 right: 0; 17 bottom: 0; 18 color: white; 19 line-height: 60px; 20 text-align: center; 21 } 22 .div1{ 23 background-color: wheat; 24 font-size: 5px; 25 overflow: auto; 26 width: 500px; 27 height: 200px; 28 } 29 .div2{ 30 background-color: darkgrey; 31 height: 2400px; 32 } 33 34 35 .hide{ 36 display: none; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="div1 div"> 42 <h1>hello</h1> 43 <h1>hello</h1> 44 <h1>hello</h1> 45 <h1>hello</h1> 46 <h1>hello</h1> 47 <h1>hello</h1> 48 <h1>hello</h1> 49 <h1>hello</h1> 50 <h1>hello</h1> 51 <h1>hello</h1> 52 <h1>hello</h1> 53 <h1>hello</h1> 54 <h1>hello</h1> 55 <h1>hello</h1> 56 <h1>hello</h1> 57 <h1>hello</h1> 58 </div> 59 <div class="div2 div"></div> 60 <div class="returnTop hide">返回顶部</div> 61 62 <script src="jquery-3.1.1.js"></script> 63 <script> 64 $(window).scroll(function(){ 65 var current=$(window).scrollTop(); 66 console.log(current); 67 if (current>100){ 68 69 $(".returnTop").removeClass("hide") 70 } 71 else { 72 $(".returnTop").addClass("hide") 73 } 74 }); 75 76 77 $(".returnTop").click(function(){ 78 $(window).scrollTop(0) 79 }); 80 81 82 </script> 83 </body> 84 </html>
2）尺寸操作
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 .box1{ 11 width: 200px; 12 height: 200px; 13 background-color: wheat; 14 padding: 50px; 15 border: 50px solid rebeccapurple; 16 margin: 50px; 17 } 18 19 </style> 20 </head> 21 <body> 22 23 24 25 26 <div class="box1"> 27 DIVDIDVIDIV 28 </div> 29 30 31 <p></p> 32 33 <script src="jquery-3.1.1.js"></script> 34 <script> 35 var $height=$(".box1").height(); 36 var $innerHeight=$(".box1").innerHeight(); 37 var $outerHeight=$(".box1").outerHeight(); 38 var $margin=$(".box1").outerHeight(true); 39 40 $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin) 41 </script> 42 </body> 43 </html>
五、插件机制（扩展方法）
1、jQuery.extend(object)
扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。
在jQuery命名空间上增加两个函数:
1 <script> 2 jQuery.extend({ 3 min: function(a, b) { return a < b ? a : b; }, 4 max: function(a, b) { return a > b ? a : b; } 5 }); 6 7 8 jQuery.min(2,3); // => 2 9 jQuery.max(4,5); // => 5 10 </script>
2、jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
增加两个插件方法：
1 <body> 2 3 <input type="checkbox"> 4 <input type="checkbox"> 5 <input type="checkbox"> 6 7 <script src="jquery.min.js"></script> 8 <script> 9 jQuery.fn.extend({ 10 check: function() { 11 $(this).attr("checked",true); 12 }, 13 uncheck: function() { 14 $(this).attr("checked",false); 15 } 16 }); 17 18 19 $(":checkbox:gt(0)").check() 20 </script> 21 22 </body>
六、示例：
1、左侧菜单
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>left_menu</title> 6 7 <style> 8 .menu{ 9 height: 500px; 10 width: 20%; 11 background-color: gainsboro; 12 text-align: center; 13 float: left; 14 } 15 .content{ 16 height: 500px; 17 width: 80%; 18 background-color: darkgray; 19 float: left; 20 } 21 .title{ 22 line-height: 50px; 23 background-color: wheat; 24 color: rebeccapurple;} 25 26 27 .hide{ 28 display: none; 29 } 30 31 32 </style> 33 </head> 34 <body> 35 36 <div class="outer"> 37 <div class="menu"> 38 <div class="item"> 39 <div class="title">菜单一</div> 40 <div class="con"> 41 <div>111</div> 42 <div>111</div> 43 <div>111</div> 44 </div> 45 </div> 46 <div class="item"> 47 <div class="title">菜单二</div> 48 <div class="con hide"> 49 <div>222</div> 50 <div>222</div> 51 <div>222</div> 52 </div> 53 </div> 54 <div class="item"> 55 <div class="title">菜单三</div> 56 <div class="con hide"> 57 <div>333</div> 58 <div>333</div> 59 <div>333</div> 60 </div> 61 </div> 62 63 </div> 64 <div class="content"></div> 65 66 </div> 67 <script src="jquery.min.js"></script> 68 <script> 69 $(".item .title").mouseover(function () { 70 $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); 71 72 // $(this).next().removeClass("hide"); 73 // $(this).parent().siblings().children(".con").addClass("hide"); 74 }) 75 </script> 76 77 78 </body> 79 </html>
2、tab切换
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>tab</title> 6 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .tab_outer{ 13 margin: 20px auto; 14 width: 60%; 15 } 16 .menu{ 17 background-color: #cccccc; 18 /*border: 1px solid red;*/ 19 line-height: 40px; 20 text-align: center; 21 } 22 .menu li{ 23 display: inline-block; 24 margin-left: 14px; 25 padding:5px 20px; 26 27 } 28 .menu a{ 29 border-right: 1px solid red; 30 padding: 11px; 31 } 32 .content{ 33 background-color: tan; 34 border: 1px solid green; 35 height: 300px; 36 37 } 38 .hide{ 39 display: none; 40 } 41 42 .current{ 43 background-color: #2868c8; 44 color: white; 45 border-top: solid 2px rebeccapurple; 46 } 47 </style> 48 </head> 49 <body> 50 <div class="tab_outer"> 51 <ul class="menu"> 52 <li relation="c1" class="current">菜单一</li> 53 <li relation="c2" >菜单二</li> 54 <li relation="c3">菜单三</li> 55 </ul> 56 <div class="content"> 57 <div id="c1">内容一</div> 58 <div id="c2" class="hide">内容二</div> 59 <div id="c3" class="hide">内容三</div> 60 </div> 61 62 </div> 63 </body> 64 65 66 <script src="jquery.min.js"></script> 67 <script> 68 $(".menu li").click(function(){ 69 70 var index=$(this).attr("relation"); 71 $("#"+index).removeClass("hide").siblings().addClass("hide"); 72 $(this).addClass("current").siblings().removeClass("current"); 73 74 }); 75 76 77 </script> 78 </html>
3、table正反选
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 10 <button>全选</button> 11 <button>取消</button> 12 <button>反选</button> 13 <hr> 14 <table border="1"> 15 <tr> 16 <td><input type="checkbox"></td> 17 <td>111</td> 18 <td>111</td> 19 <td>111</td> 20 <td>111</td> 21 </tr> 22 <tr> 23 <td><input type="checkbox"></td> 24 <td>222</td> 25 <td>222</td> 26 <td>222</td> 27 <td>222</td> 28 </tr> 29 <tr> 30 <td><input type="checkbox"></td> 31 <td>333</td> 32 <td>333</td> 33 <td>333</td> 34 <td>333</td> 35 </tr> 36 <tr> 37 <td><input type="checkbox"></td> 38 <td>444</td> 39 <td>444</td> 40 <td>444</td> 41 <td>444</td> 42 </tr> 43 </table> 44 45 46 47 48 <script src="jquery.min.js"></script> 49 <script> 50 51 $("button").click(function(){ 52 53 if($(this).text()=="全选"){ // $(this)代指当前点击标签 54 55 $("table :checkbox").prop("checked",true) 56 } 57 else if($(this).text()=="取消"){ 58 $("table :checkbox").prop("checked",false) 59 } 60 else { 61 $("table :checkbox").each(function(){ 62 63 $(this).prop("checked",!$(this).prop("checked")); 64 65 }); 66 } 67 68 69 70 }); 71 72 </script> 73 </body> 74 </html>
4、模态对话框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 .back{ 11 background-color: wheat; 12 height: 2000px; 13 } 14 15 .shade{ 16 position: fixed; 17 top: 0; 18 bottom: 0; 19 left:0; 20 right: 0; 21 background-color: darkgray; 22 opacity: 0.4; 23 } 24 25 .hide{ 26 display: none; 27 } 28 29 .models{ 30 position: fixed; 31 top: 50%; 32 left: 50%; 33 margin-left: -100px; 34 margin-top: -100px; 35 height: 200px; 36 width: 200px; 37 background-color: white; 38 39 } 40 </style> 41 </head> 42 <body> 43 <div class="back"> 44 <input id="ID1" type="button" value="click" onclick="action1(this)"> 45 </div> 46 47 <div class="shade hide"></div> 48 <div class="models hide"> 49 <input id="ID2" type="button" value="cancel" onclick="action2(this)"> 50 </div> 51 52 53 <script src="jquery.min.js"></script> 54 <script> 55 56 function action1(self){ 57 $(self).parent().siblings().removeClass("hide"); 58 59 } 60 function action2(self){ 61 //$(self).parent().parent().children(".models,.shade").addClass("hide") 62 63 $(self).parent().addClass("hide").prev().addClass("hide") 64 65 } 66 </script> 67 </body> 68 </html>
5、复制样式条
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <div class="outer"> 10 <div class="item"> 11 <input type="button" value="+"> 12 <input type="text"> 13 </div> 14 </div> 15 16 17 <script src=jquery.min.js></script> 18 <script> 19 20 function add(self){ 21 // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加 22 var $clone_obj=$(self).parent().clone(); 23 $clone_obj.children(":button").val("-").attr("onclick","removed(this)"); 24 $(self).parent().parent().append($clone_obj); 25 } 26 function removed(self){ 27 28 $(self).parent().remove() 29 30 } 31 32 33 /* 34 $("[value=‘+‘]").click(function(){ 35 36 var $clone_obj=$(this).parent().clone(); 37 $clone_obj.children(":button").val("-").attr("class","mark"); 38 $(this).parent().parent().append($clone_obj); 39 40 }); 41 42 43 44 $(".outer").on("click",".item .mark",function(){ 45 46 console.log($(this)); // $(this): .item .mark标签 47 $(this).parent().remove() 48 49 }) 50 51 */ 52 53 54 </script> 55 </body> 56 </html>
5、注册验证
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 10 11 <form class="Form" id="form"> 12 13 <p><input class="v1" type="text" name="username" mark="用户名"></p> 14 <p><input class="v1" type="text" name="email" mark="邮箱"></p> 15 <p><input type="submit" value="submit"></p> 16 17 </form> 18 19 <script src="jquery.min.js"></script> 20 <script> 21 22 23 $("#form :submit").click(function(){ 24 flag=true; 25 26 $("#form .v1").each(function(){ 27 28 $(this).next("span").remove();// 防止对此点击按钮产生多个span标签 29 30 var value=$(this).val(); 31 32 if (value.trim().length==0){ 33 var mark=$(this).attr("mark"); 34 var ele=document.createElement("span"); 35 ele.innerHTML=mark+"不能为空!"; 36 $(this).after(ele); 37 $(ele).prop("class","error");// DOM对象转换为jquery对象 38 flag=false; 39 return false ; //-------->引出$.each的return false注意点 40 } 41 42 }); 43 44 return flag 45 }); 46 47 48 49 50 </script> 51 </body> 52 </html>
6、拖动面板
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> 9 <div id="title" style="background-color: black;height: 40px;color: white;"> 10 标题 11 </div> 12 <div style="height: 300px;"> 13 内容 14 </div> 15 </div> 16 <script type="text/javascript" src="jquery.min.js"></script> 17 <script> 18 $(function(){ 19 // 页面加载完成之后自动执行 20 $(‘#title‘).mouseover(function(){ 21 $(this).css(‘cursor‘,‘move‘); 22 }).mousedown(function(e){ 23 //console.log($(this).offset()); 24 var _event = e || window.event; 25 // 原始鼠标横纵坐标位置 26 var ord_x = _event.clientX; 27 var ord_y = _event.clientY; 28 29 var parent_left = $(this).parent().offset().left; 30 var parent_top = $(this).parent().offset().top; 31 32 $(this).on(‘mousemove‘, function(e){ 33 var _new_event = e || window.event; 34 var new_x = _new_event.clientX; 35 var new_y = _new_event.clientY; 36 37 var x = parent_left + (new_x - ord_x); 38 var y = parent_top + (new_y - ord_y); 39 40 $(this).parent().css(‘left‘,x+‘px‘); 41 $(this).parent().css(‘top‘,y+‘px‘); 42 43 }) 44 }).mouseup(function(){ 45 $(this).off(‘mousemove‘); 46 }); 47 }) 48 </script> 49 </body> 50 </html>
7、轮播图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="jquery-3.1.1.js"></script> 6 <title>Title</title> 7 8 9 <style> 10 11 .outer{ 12 width: 790px; 13 height: 340px; 14 margin: 80px auto; 15 position: relative; 16 } 17 18 .img li{ 19 position: absolute; 20 list-style: none; 21 top: 0; 22 left: 0; 23 display: none; 24 } 25 26 .num{ 27 position: absolute; 28 bottom: 18px; 29 left: 270px; 30 list-style: none; 31 32 33 } 34 35 .num li{ 36 display: inline-block; 37 width: 18px; 38 height: 18px; 39 background-color: white; 40 border-radius: 50%; 41 text-align: center; 42 line-height: 18px; 43 margin-left: 4px; 44 } 45 46 .btn{ 47 position: absolute; 48 top:50%; 49 width: 30px; 50 height: 60px; 51 background-color: lightgrey; 52 color: white; 53 54 text-align: center; 55 line-height: 60px; 56 font-size: 30px; 57 opacity: 0.7; 58 margin-top: -30px; 59 60 display: none; 61 62 } 63 64 .left{ 65 left: 0; 66 } 67 68 .right{ 69 right: 0; 70 } 71 72 .outer:hover .btn{ 73 display: block; 74 } 75 76 .num .active{ 77 background-color: red; 78 } 79 </style> 80 81 </head> 82 <body> 83 84 85 <div class="outer"> 86 <ul class="img"> 87 <li style="display: block"><a href=""><img src="img/1.jpg" ></a></li> 88 <li><a href=""><img src="img/2.jpg" ></a></li> 89 <li><a href=""><img src="img/3.jpg" ></a></li> 90 <li><a href=""><img src="img/4.jpg" ></a></li> 91 <li><a href=""><img src="img/5.jpg" ></a></li> 92 <li><a href=""><img src="img/6.jpg" ></a></li> 93 </ul> 94 95 <ul class="num"> 96 <!--<li class="active"></li>--> 97 <!--<li></li>--> 98 <!--<li></li>--> 99 <!--<li></li>--> 100 <!--<li></li>--> 101 <!--<li></li>--> 102 </ul> 103 104 <div class="left btn"> < </div> 105 <div class="right btn"> > </div> 106 107 </div> 108 <script src="jquery-3.1.1.js"></script> 109 <script> 110 var i=0; 111 // 通过jquery自动创建按钮标签 112 113 var img_num=$(".img li").length; 114 115 for(var j=0;j<img_num;j++){ 116 $(".num").append("<li></li>") 117 } 118 119 $(".num li").eq(0).addClass("active"); 120 121 122 // 手动轮播 123 124 $(".num li").mouseover(function () { 125 i=$(this).index(); 126 $(this).addClass("active").siblings().removeClass("active"); 127 128 $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200) 129 130 }); 131 132 133 // 自动轮播 134 var c=setInterval(GO_R,1500); 135 136 function GO_R() { 137 138 if(i==img_num-1){ 139 i=-1 140 } 141 i++; 142 $(".num li").eq(i).addClass("active").siblings().removeClass("active"); 143 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000) 144 145 } 146 147 148 function GO_L() { 149 if(i==0){ 150 i=img_num 151 } 152 i--; 153 $(".num li").eq(i).addClass("active").siblings().removeClass("active"); 154 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); // fadeIn,fadeOut单独另开启的线程 155 156 157 } 158 $(".outer").hover(function () { 159 clearInterval(c) 160 },function () { 161 c=setInterval(GO_R,1500) 162 }); 163 164 165 166 // button 加定播 167 $(".right").click(GO_R); 168 $(".left").click(GO_L) 169 170 171 172 </script> 173 </body> 174 </html>
以上是关于前端基础之JQuery的主要内容，如果未能解决你的问题，请参考以下文章