jQuery
简介:
是一套兼容多浏览器的 javascript 脚本库.
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,由 Dave Methvin 率领团队进行开发。如今,jQuery 已经成为最流行的 javascript 框架,在世界前 10000 个访问最多的网站中,有超过 55%在使用 jQuery
一、jQuery 的下载和安装
1. 官网http://jquery.com/
2. 版本
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)
(1)完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习方法)
(2)压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版,减少传输)
可以直接复制源代码粘贴成一个新的jquery.js文件或在官网 download f12 开发者工具 刷新 network中复制原 jquery.js文件
3. 优点
(1)提供了强大的功能函数
(2)解决浏览器兼容性问题
(3)实现丰富的 UI 和插件
(4)纠正错误的脚本知识太多了! 等待我们一一去发现…
4. 安装在页面引入
<script src="js/jquery.js" type="text/javascript" ></script>
注解:
引入就是导入
引入位置:
js建议引入body后 因为有可能发生null错误
(如果script标签设置了src属性,则在script双标签中写的js 代码无效)
jquery并没有特定位置 但建议放在最后
二、jQuery 核心
$
符号在 jQuery 中代表对 jQuery 对象的引用,jQuery
是核心对象,通过该对象可以获取 jQuery 对象,调用 jQuery 提供的方法等。只有 jQuery 对象才能调用 jQuery 提供的方法.
$
<==> jQuery
三、DOM 对象和 jQuery 包装集对象
明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的 Dom 对象只有 DOM 接口提供的方法和属性,通过 js 代码获取的对象都是 dom 对象;而通过 jQuery获取的对象是 jQuery 包装集对象,简称 jQuery 对象,只有 jQuery 对象才能使用 jQuery 供的方法。
1. Dom 对象
javascript 中获取 Dom 对象,Dom 对象只有有限的属性和方法:
例如:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
2. jQuery 包装集|对象
可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集:
var jQueryObject = $("#testDiv");
3. Dom 转 jQuery 对象
Dom 对象转为 jQuery 对象,只需要利用$()方法进行包装即可
// 获取 Dom 对象
var domDiv = document.getElementById('mydiv');
mydiv = $(domDiv);
4. jQuery 对象转 Dom 对象
1. jQuery
强转 jQuery(‘元素’)
2. $
强转 $(‘元素’)
1.方法和2.方法其实是一种方式 一般都用$
3. 可以用jquery独有的each语法来转换
jQuery 对象转 Dom 对象,只需要取数组中的元素即可
//第一种方式 获取 jQuery 对象
var jqueryDiv = jQuery('#mydiv');
//第二种方式 获取 jQuery 对象
jqueryDiv = $('#mydiv');
jquery对象是数组[]
var dom = jqueryDiv[0];//将以获取的 jquery 对象转为 dom
通过遍历 jQuery 对象数组得到的对象是 Dom 对象,可以通过$()转为 jQuery 对象
$('#mydiv').each(function() {//遍历
var jquery = $(this);
});
描述:
用jquery获取节点如果节点不存在,会返回空包装集
用原生js获取节点如果节点不存在,会返回null
所以要判断jquery对象是否存在要看length
each语法:
jquery对象.each(function([当前下标,当前被遍历元素]){
});
知识点提示:this:谁调用函数,this指向谁
代码案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="mydiv">write less, do more</div>
<script type="text/javascript">
console.log("-------------获取 dom 对象------------------")
//dom 对象
var domDiv = document.getElementById("mydiv");
console.log(domDiv);
console.log("-------------获取 jquery 对象------------------")
//获取 jquery 对象
// 第一种方式
var jqueryDiv = jQuery('#mydiv');
console.log(jqueryDiv);
//第二种方式
jqueryDiv = $('#mydiv');
console.log(jqueryDiv);
console.log("-------------dom 转 jquery------------------")
//dom 转 jquery 包装集/对象
var obj = $(domDiv);
console.log(obj);
// console.log("-------------jquery 转 dom------------------")
// jquery 对象转 dom 对象
var dom = $('#mydiv')[0];// 获取 jquery 对象转为 dom
// 或
var dom2 = jqueryDiv[0];
// 将 jquery 对象转为 domconsole.log(dom);
console.log(dom2);
/*this 代表了 dom 对象,不是 jquery 对象*/
console.log("-------------dom 转 jquery------------------")
$('#mydiv').each(function() {//通过 id 选择器选择了 id 为 mydiv 的所有元素
// 然后进行遍历,那么遍历出的每个元素就是 id 为 mydiv 的标签元素,
// 而 this 就代表了当前的这个元素
var jquery = $(this);})
console.log("-------------jquery 转 dom------------------")
$('#mydiv').each(function() {
var dom3 = this;
})
</script>
</body>
</html>
四、jQuery 选择器
和使用 js 操作 Dom 一样,获取文档中的节点对象是很频繁的一个操作,在 jQuery 中提供了简便的方式供我们查找|定位元素,称为 jQuery 选择器,选择器可以说是最考验一个人jQuery 功力的地方,通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的,具体分类如下。基础选择器掌握即可 ,其他用到再查阅。
1. 基础选择器 Basics(掌握即可)
id选择器
$("#id名")
元素选择器
$("div")
类选择器
$(".类名")
全选择器 选择所有选择器
$("*")
组合选择器 同时选中这几个选择器匹配的
$("# A,B,.C")
用英文的 , 隔开
知识点:
dom:innerHTML="....",innerText="....."
jquery: .html("..."),.text("......")
2.层次选择器 Hierarchy
后代选择器
ancestor descendant $("#parent div")
所有div后代
子代选择器
parent > child $("#parent>div")
直接div后代
相邻选择器
prev + next $(".blue + img")
同辈选择器
prev ~ sibling $(".blue ~ img")
3.表单选择器Forms
表单选择器
:input $(":input ")
文本框选择器
:text $(":text ")
密码框选择器
:password $(":password")
单选框选择器
:radio $(":radio ")
复选框选择器
:checkbox $(":checkbox ")
提交按钮选择器
:submit $(":submit ")
图像域选择器
:image $(":image ")
重置按钮选择器
:reset $(":reset ")
按钮选择器
:button $(":button")
文件域选择器
:file $(":file ")
4.属性选择器
$("[属性名]")
例如:$("[属性名]")选择所有设置过name属性值的元素
$("[属性名=属性值]")
以上都可以加入嵌套过滤
五、jQuery DOM 操作
jQuery 也提供了对 HTML 节点的操作,而且在原生 js 的基础之上进行了优化,使用起来更加方便。
常用的从几个方面来操作,查找元素(选择器已经实现);创建节点对象;访问和设置节点对象的值,以及属性;添加节点;删除节点;删除、添加、修改、设定节点的 CSS 样式;动画操作等。注意:以下的操作方式只适用于 jQuery 对象.
1. 操作元素的属性
获取属性
attr(属性名称)
prop(属性名称)
设置属性
attr(属性名称,属性值)
prop(属性名称,属性值)
// 2、非空判断
if (isEmpty(nickName)) {
// 如果为空,提示且return
$("#msg").html("用户昵称不可为空!");
// 禁用按钮
$("#btn").prop("disabled",true);
return;
移除属性
removeAttr(属性名)
代码案例:
<script>
/*=============取值===============*/
// 固有属性:元素本身就有的属性
var type = $(":checked").attr("type");
console.log(type);
var type2 = $(":checked").prop("type");
console.log(type2);
// 自定义属性
var data1 = $(":checked").attr("data-id");
var data2 = $(":checked").prop("data-id");
console.log(data1);
console.log(data2);
// 返回值是boolean类型的属性
var ck1 = $(":checked").attr("checked");
var ck2 = $(":checked").prop("checked");
console.log(ck1);
console.log(ck2);
// 未设置过的checked属性
var ck3 = $("#bb").attr("checked");
var ck4 = $("#bb").prop("checked");
console.log(ck3);
console.log(ck4);
/*=============赋值===============*/
// 固有属性:元素本身就有的属性
$("#bb").attr("name","hobby");
$("#bb").prop("name","hobby2");
// 自定义属性
$("#aa").attr("data-id","Hi");
$("#aa").prop("data-id","Hi2");
// 返回值是boolean类型的属性
//$("#bb").attr("checked","checked");
//$("#bb").attr("checked",true);
$("#bb").prop("checked",true);
/*===========移除属性============*/
$("#aa").removeAttr("data-id");
</script>
2. 操作元素的样式
对于元素的样式,也是一种属性,由于样式用得特别多,所以对于样式除了当做属性处理外还可以有专门的方法进行处理。
attr("样式名称")
attr("class","样式名")
修改/覆盖原本的class属性重新赋值 样式名是写在head中的样式
addClass("样式名")
添加样式,原本的样式保留,如果出现相同的样式名,则以样板中后定义的为准
css()
添加具体的样式名相当于(定义在style属性中的样式) 优先级== 行内样式块
增加元素的具体样式,格式:
1)css({‘样式名’:‘样式值’,‘样式名 2’:‘样式值 2’})
例:css({“background-color”:“red”,“color”:"#fff"})
2)css(“样式名”,“样式值”)
例:css(‘color’,‘white’)
removeClass(class)
3. 操作元素的内容
对于元素还可以操作其中的内容,例如文本,值,甚至是 html
html()
html("html 内容")
text()
text("text内容")
val()
val('值')
4. 创建元素
在 jQuery 中创建元素很简单,直接使用核心函数即可
$()
5. 添加元素
prepend()
字符串 | jquery对象
$(被设置元素).prependTo(要设置位置)
只能jquery对象
prepend 和 prependTo 有父子关系
添加到…中的最前面
append()
字符串 | jquery对象
$(被设置元素).appendTo(要设置位置)
只能jquery对象
append 和 appendTo 有父子关系
添加到…中的最后面
before前添加内容
after后添加内容
以上两种同级关系
6.删除元素
remove()删除:内容和标签
empty()清空:删除内容保留标签
7.遍历元素
each()
$(selector).each(function(index,element)) {
});
:遍历元素
参数 function 为遍历时的回调函数,
index 为遍历元素的序列号,从 0 开始。
element 是当前的元素,此时是 dom 元素。
六、Jquery
1. ready()加载
ready()类似于 onLoad()事件
ready()可以写多个,按顺序执行
$(document).ready(function(){})
等价于
$(function(){})
is not defined报错分析:
1.jquery未引入
2.顺序问题
常见问题:onload事件 和 ready事件的区别:
ready:当Dom结构加载完毕后,ready事件就执行;
onload:当Dom结构加载完毕后,并且引入的外部文件加载完毕,onload事件才执行;
2. bind()绑定元素事件
为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。
$(selector).bind(eventType [,eventData],handler(eventObject))
eventType 事件类型:
是一个字符串类型的事件类型,就是你所需要绑定的事件。这类类型可以包括如下:
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
[, eventData]:传递的参数
格式:{名:值,名 2:值 2}
handler(eventObject):该事件触发执行的函数
要素步骤:
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件(事件类型)
第一个参数:事件的类型
3.相应事件触发的,执行的操作
第二个参数:函数
示例代码:
// 简单的bind事件
$("#btn1").bind("click",function(){
console.log("这是一个简单的bind事件");
});
// 原生的js绑定点击事件
document.getElementById("btn1").onclick = function(){
console.log("这是原生的js绑定点击事件");
}
/* ============ 绑定多个事件 ===========*/
// 多个事件绑定同一个函数
$("#btn2").bind("click mouseout",function(){
console.log("多个事件绑定同一个函数...");
});
// bind链式编程
$("#btn3").bind("click",function(){
console.log("Hello...");
}).bind("mouseout",function(){
console.log("Hi...");
});
$("#btn4").bind({
"click":function(){
console.log("你好...");
},
"mouseout":function(){
console.log("我不好...");
}
});
/* ** */
$("#btn5").click(function(){
console.log("...");
}).mouseout(function(){
console.log("。。。");
});
七.其他
语法