OMG前端之jQuery
jQuery是什么？
jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，使用的时候直接引进来即可，方便了我们来调用，提高我们的开发效率。
常见的库：Prototype、YUI、Dojo、ExtJS、jQuery等
jQuery的特点
1 写的少，做的多
极大简化了JavaScript编程
2 隐形迭代
自动循环遍历，帮助我们进行查找，获取我们所需要的元素进行处理。
3 jQuery产生的对象只能自己调用
Javascipt与jQuery的区别
Javascript是一门编程语言，使用它来编写客户端浏览器的脚本
jQuery是Javascipt的一个库，包括多个可重用的函数，用来辅助我们简化Javascript开发
jQuery能做的事情，Javascipt都能做到，javascipt能做的事情，jQuery不一定能做到
DOM对象跟jQuery对象相互转换
DOM对象，即是我们用传统的方法(javascript)获得的对象
jQuery对象即是用jQuery类库的选择器获得的对象
jQuery对象转换成DOM对象
方式一：$(“#btn”)[0] 方式二：$(“#btn”).get(0)
DOM对象转换成jQuery对象
$(document)
元素查找
选择器
1、基本选择器
$("*") // 选取所有元素
$("element") // 选取标签名称的所有元素
$("#id") // 选取id属性指定的元素
$(".class") // 选取指定的class查找元素
$(".calss,p,div") // 选取多个元素
2、层级选择器
$(".outer div") // 后代选择器查找
$(".outer>div") // 子代选择器查找
$(".outer+div") // 通过毗邻查找，用的少。。只能往下找
$(".outer~div") // 从上自下找，不限制紧挨
3、属性选择器
$('[id="div1"]') // 单层属性选择器
$('["alex="sb"][id]') // 双层属性选择器
筛选器
1、基本的筛选器
$('li:first') //第一个元素
$('li:last') //最后一个元素
$("tr:even") //索引为偶数的元素，从 0 开始
$("tr:odd") //索引为奇数的元素，从 0 开始
$("tr:eq(1)") //给定索引值的元素
$("tr:gt(0)") //大于给定索引值的元素
$("tr:lt(2)") //小于给定索引值的元素
$(":focus") //当前获取焦点的元素
$(":animated") //正在执行动画效果的元素
2、表单筛选器
$(":input") // 匹配所有 input, textarea, select 和 button 元素
$(":text") // 所有的单行文本框
$(":password") // 所有密码框
$(":radio") // 所有单选按钮
$(":checkbox") // 所有复选框
$(":submit") // 所有提交按钮
$(":reset") // 所有重置按钮
$(":button") // 所有button按钮
$(":file") // 所有文件域
$("input:checked") // 所有被选中的元素
$("select option:selected") // select中所有被选中的option元素
// 如果select默认选中想要的值 $('select').val(1)
// 即默认选中值为1 option标签
// 如果想选中多个值呢？？？
// $('select').val([1,2,]) 放入一个数组即可
3、内容筛选器
$("div:contains('test')") // 包含test文本的元素
$("td:empty") // 不包含子元素或者文本的空元素
$("div:has(p)") // 含有选择器所匹配的元素
$("td:parent") // 含有子元素或者文本的元素
4、查找筛选器
跟后代有关系的
$("div").children() // 查找div下的所有儿子标签
$("div").find() // 查找div下的所有后代标签
跟同辈有关系的
全部
$("div").siblings() // 所有的同辈元素,不包括自己
...之后
$("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,html
$("#test").parentsUntil("#test2")// id为"#test"元素到id为'#test2'之间所有的父级元素(开区间)
其他
$("p").hasClass("test") // 查找p标签有class名字为test
5、补充
$("[href]") // 选取带有 href 属性的元素
$("a[target='_blank']") // 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") // 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
属性操作
1、 基本属性操作
关于图像的操作
$("img").attr("src"); // 返回文档中所有图像的src属性值
$("img").attr("src","test.jpg"); // 设置所有图像的src属性
$("img").removeAttr("src"); // 将文档中图像的src属性删除
$("img").removeProp("src"); // 删除img的src属性
关于文本框
$("input[type='checkbox']").prop("checked", true); // 选中复选框
$("input[type='checkbox']").prop("checked", false); // 取消复选框
// attr与prop区别
// attr可以找到自定义的属性、prop只能找到固有的属性
2、class操作
$("p").addClass("test"); // 为p元素加上 'test' 类
$("p").removeClass("test"); // 从p元素中删除 'test' 类
$("p").toggleClass("test"); // 如果存在就删除,否则就添加
$("p").hasClass("test"); // 判断有没有 'test' 类,返回布尔值
3、标签文本text/html
$('p').html(); // 返回p元素的html内容
$("p").html("Hello <b>test</b>!"); // 设置p元素的html内容
$('p').text(); // 返回p元素的文本内容
$("p").text("test"); // 设置p元素的文本内容
$("input").val(); // 获取文本框中的值
$("input").val("test"); // 设置文本框中的内容
css操作
1、样式
$("p").css("color"); // 访问查看p元素的color属性
$("p").css("color","red"); // 设置p元素的color属性为red
// 设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）
$("p").css({ "color": "red", "background": "yellow" });
2、位置
$('p').offset() // 元素在当前视口的相对偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position() // 元素相对父元素的偏移,对可见元素有效，Object {top: 117, left: 250}
$(window).scrollTop() // 获取滚轮滑的高度
$(window).scrollLeft() // 获取滚轮滑的宽度
$(window).scrollTop('100') // 设置滚轮滑的高度为100
3、尺寸
$("p").height(); // 获取p元素的高度
$("p").width(); // 获取p元素的宽度
$("p:first").innerHeight() // 获取第一个匹配元素内部区域高度(包括补白、不包括边框)
$("p:first").innerWidth() // 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
$("p:first").outerHeight() // 匹配元素外部高度(默认包括补白和边框)
$("p:first").outerWidth() // 匹配元素外部宽度(默认包括补白和边框)
$("p:first").outerHeight(true)// 为true时包括边距
文档处理
1、内部插入
$("p").append("<b>nick</b>"); // 每个p元素内后面追加内容
$("p").appendTo("div"); // p元素追加到div内后
$("p").prepend("<b>Hello</b>"); // 每个p元素内前面追加内容
$("p").prependTo("div"); // p元素追加到div内前
2、外部插入
$("p").after("<b>nick</b>"); // 每个p元素同级之后插入内容
$("p").before("<b>nick</b>"); // 在每个p元素同级之前插入内容
$("p").insertAfter("#test"); // 所有p元素插入到id为test元素的后面
$("p").insertBefore("#test"); // 所有p元素插入到id为test元素的前面
3、替换
$("p").replaceWith("<b>Paragraph.</b>"); // 将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph.</b>").replaceAll("p"); // 用匹配的元素替换掉所有selector匹配到的元素
4、删除
$("p").empty(); // 删除匹配的元素集合中所有的子节点，不包括本身
$("p").remove([expr]); // 删除所有匹配的元素,包括本身
$("p").detach(); // 删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)
5、复制
$("p").clone() // 克隆元素并选中克隆的副本
$("p").clone(true) // 布尔值指事件处理函数是否会被复制
循环
jQuery实现的数组循环机制
// 方式一
$.each(Array,function () {
})
// 方式二
$(element).each(function () {
})
each与return false配合使用
var li = [11,22,33]
$.each(li,function( i , v ){
if (v ===22){
return 返回一个空，相当于continue继续下一次循环
}
consele.log(v);
})
结果
11
33
事件
1、事件
$("p").click(); // 单击事件
$("p").dblclick(); // 双击事件
$("input[type=text]").focus() // 元素获得焦点时,触发 focus 事件
$("input[type=text]").blur() // 元素失去焦点时,触发 blur事件
$("button").mousedown() // 当按下鼠标时触发事件
$("button").mouseup() // 元素上放松鼠标按钮时触发事件
$("p").mousemove() // 当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover() // 当鼠标指针位于元素上方时触发事件
$("p").mouseout() // 当鼠标指针从元素上移开时触发事件
$(window).keydown() // 当键盘或按钮被按下时触发事件
$(window).keypress() // 当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() // 当按钮被松开时触发事件
$(window).scroll() // 当用户滚动时触发事件
$(window).resize() // 当调整浏览器窗口的大小时触发事件
$("input[type='text']").change() // 当元素的值发生改变时触发事件
$("input").select() // 当input 元素中的文本被选择时触发事件
$("form").submit() // 当提交表单时触发事件
$(window).unload() // 用户离开页面时
2、绑定方式
1.bind
$("selector").bind(event,[data],function)
2.live
live(event,[data],function)
3.delegate
delegate(childSelector,event,data,function)
4.on（推荐）
on(event,childSelector,data,function);
3、页面载入
// 当页面载入成功后再运行的函数事件
$(document).ready(function(){
......
});
// 简写（不推荐）
$(function() {
......
});
4、页面处理
// bind 为每个匹配元素绑定事件处理函数
$("p").bind("click", function(){
alert( $(this).text() );
});
// 绑定多个用{}。
$(menuF).bind({
"mouseover":function () {$(menuS).parent().removeClass("hide");},
"mouseout":function () {$(menuS).parent().addClass("hide");}
});
$("p").one("click", fun...) // one 绑定一个一次性的事件处理函数
$("p").unbind("click") // 解绑一个事件
5、页面委派
6、事件委派
$('ul').on("click","li",function () {
alert(666);
});
// 阐释...
// 通过它的上级（多层上级）事件委托，当点击这个标签时才会绑定事件
// 应用场景：
在页面不刷新的情况下添加一行数据，行数据有操作按钮，点击并无效果，那么通过事件委托便可以解决
7、event object
// 所有的事件函数都可以传入event参数方便处理事件
$("p").click(function(event){
alert(event.type); //"click"
});
(evnet object)属性方法：
event.pageX // 事件发生时，鼠标距离网页左上角的水平距离
event.pageY // 事件发生时，鼠标距离网页左上角的垂直距离
event.type // 事件的类型
event.which // 按下了哪一个键
event.data // 在事件对象上绑定数据，然后传入事件处理函数
event.target // 事件针对的网页元素
event.preventDefault() // 阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation()// 停止事件向上层元素冒泡
动画效果
1、基点
$("p").show() // 显示隐藏的匹配元素
$("p").show("slow"); // 参数表示速度,("slow","normal","fast"),也可设置为毫秒
$("p").hide() // 隐藏显示的元素
$("p").toggle(); // 切换 显示/隐藏
2、滑动
$("p").slideDown("5000"); // 用5000毫秒时间将段落滑下
$("p").slideUp("5000"); // 用5000毫秒时间将段落滑上
$("p").slideToggle("5000"); // 用5000毫秒时间将段落滑上，滑下
3、淡入淡出
$("p").fadeIn("900"); // 用900毫秒时间将段落淡入
$("p").fadeOut("900"); // 用900毫秒时间将段落淡出
$("p").fadeToggle("900"); // 用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6); // 用900毫秒时间将段落的透明度调整到0.6
4、回调函数
回调函数 一个动作完成之后执行的一段代码
// DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-2.2.3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert('动画结束')
})
// $("p").css('color','red').slideUp(1000).slideDown(2000)
})
});
</script>
</head>
<body>
<button>隐藏</button>
<p>helloworld helloworld helloworld</p>
</body>
</html>
拓展（插件机制）
方法一：类级别
类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法。
开发扩展其方法时使用$.extend方法，即jQuery.extend(object);
代码如下
$.extend({
add:function(a,b){return a+b;} ,
minus:function(a,b){return a-b;}
});
页面中调用
var i = $.add(3,2);
var j = $.minus(3,2);
方法二：对象级别
对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);
代码如下
$.fn.extend({
check:function(){
return this.each({
this.checked=true;
});
},
uncheck:function(){
return this.each({
this.checked=false;
});
}
});
页面中调用：
$('input[type=checkbox]').check();
$('input[type=checkbox]').uncheck();
拓展
$.xy = {
add:function(a,b){return a+b;} ,
minus:function(a,b){return a-b;},
voidMethod:function(){ alert("void"); }
};
var i = $.xy.add(3,2);
var m = $.xy.minus(3,2);
$.xy.voidMethod();
应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
color: #65ff9b;
}
</style>
</head>
<body>
<div>Hello World</div>
<input type="checkbox">
<input type="radio" checked>
<script src="jquery-3.1.1.js"></script>
<script>
// 方式一
$.extend({
Myprint:function (content) {
console.log(content)
}
});
$.Myprint(666);
// 方式2
$.fn.extend({
check:function () {return this.each(function () {this.checked=true})},
uncheck:function () {return this.each(function () {this.checked=false})}
});
$(":checkbox").check();
$(":radio").uncheck()
</script>
</body>
</html>
对象访问
$.trim() // 去除字符串两端的空格
$.each() // 遍历一个数组或对象，for循环
$.inArray() // 返回一个值在数组中的索引位置，不存在返回-1
$.grep() // 返回数组中符合某种标准的元素
$.extend() // 将多个对象，合并到第一个对象
$.makeArray() // 将对象转化为数组
$.type() // 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray() // 判断某个参数是否为数组
$.isEmptyObject() // 判断某个对象是否为空(不含有任何属性)
$.isFunction() // 判断某个参数是否为函数
$.isPlainObject() // 判断某个参数是否为用"{}"或"new Object"建立的对象
$.support() // 判断浏览器是否支持某个特性
加油站
1、data( )方法
用法一：$.data( element, key, value )
用法二：$.data( element, key )
data()方法向div元素附加数据
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
data()从div元素获取数据
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
注意：
①这是一个底层方法，.data() 方法更方便使用，通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将被移除。
② undefined 是一个没有被识别数据值。调用 jQuery.data( el, "name", undefined ) 将返回对应的 "name" 数据，等价于 jQuery.data(el, "name" ) 。
我们可以在一个元素上设置不同的值，并获取这些值
2、hover( )方法
$(selector).hover(inFunction,outFunction)
// 等同于
$( selector ).mouseover( handlerIn ).mouseout( handlerout );
—参数
inFunction 必需。规定 mouseover 事件发生时运行的函数。
outFunction 可选。规定 mouseout 事件发生时运行的函数。
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
更多用法请点击
应用
站得高看得远
浙公网安备 33010602011771号