jQury详细笔记
1.什么是jQuery
jQuery 是一个 JavaScript 库,简化了javaScript的编程,可以跨越多种浏览器,具有通用性和可扩展性,其设计宗旨为"write Less,Do More"。
2.jQuery库的功能
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities ``
3.为什么要使用jQuery
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。
4.jQuery的使用
下载JS并引入:下载链接
<script src="js/jquery-3.3.1.js"></script>
在线引用地址
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
demo实例
<html>
<head>
<meta content="charset:utf-8"/>
<title>我的jQueryDemo</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>hello jQuery</h1>
</body>
<script >
$(document).ready(function(){
alert("我的jQueryDemo!");
});
</script>
</html>
$(function(){}); 等价于 $(document).ready(function(){}); ;表示初始化函数,当网页中的dom元素(不包含图片、视频、资源)全部加载完毕后立刻执行。
5.jQuery对象
DOM对象是通过传统的JavaScript获取的对象,而jQuery对象就是用jQuery包装DOM对象而产生的对象。通常用$(也可以用jQuery)表示。jQuery对象有特有的方法,注意与JavaScript方法区分开。
var domObj = document.getElementById('id'); // DOM对象
domObj.innerHTML(); // javaScript方法
var $obj = $(#id); // jQuery对象
$obj.html(); //jQuery方法
6.jQuery对象与DOM对象的互相转换
dom对象只适用于js的各种语法(函数、属性),jquery对象只用于jquery的各种语法(函数、属性)。
dom对象和jquery对象的各自独立。
DOM转jQuery ,转完之后就可以调用jQuery的方法
var domObj = document.getElementById('id'); // DOM对象
var $obj = $(domObj).html(); // 转为jQuery对象
jQuery转DOM,转完之后就可以调用JavaScript的方法
var $obj = $(#id); // jQuery对象
var domObj = $obj[0].innerHTML; // 方式一:转为DOM对象
var domObj = $obj.get(0)nnerHTML; // 方式二:转为DOM对象
7.jQuery选择器
- 基本选择器
id选择器 $("#id值")
类选择器 $(".class值")
标签选择器 $("标签名")
并集选择器 $(".class值,标签名") 说明:多个值存在其一即可
交集选择器 $(".class值标签名") 说明:多个值同时存在
所有选择器 $("*") 说明:选中全部的元素
- 层次选择器
相邻选择器 $("选择器1+选择器2") 说明:只取该元素之后的元素 例如:选择器2为标签li,只取该li之后的元素,之前的li不取
同辈选择器 $("选择器1~选择器2") 说明:只取该元素之后的元素 例如:选择器2为标签li,只取该li之后的元素,之前的li不取
后代选择器 $("选择器1 选择器2")
子代选择器 $("选择器1>选择器2")
- 过滤选择器
3.1基本过滤选择器
:first 说明:获取所有已选择到的元素中的最开头一个
:last 说明:获取所有已选择到的元素中的最后一个
:even 说明:获取所有已选择到的元素中的偶数
:odd 说明:获取所有已选择到的元素中的奇数
:eq(index) 说明:获取所有已选择到的元素中第index个
:gt(index) 说明:获取所有已选择到的元素中>index的全部元素
:lt(index) 说明:获取所有已选择到的元素中<index的全部元素
:not(选择器) 说明:获取所有已选择到的元素中除了...以外
:header 说明:选中所有的标题元素 h1 h2 <h1>
:focus 说明:获取当前焦点的元素
3.2内容过滤选择器
:contains(text) 说明:获取文本内容为text的元素
:empty 说明:获取所有已选择到元素中的空元素
:has(selector) 说明:获取包含有匹配选择器的元素为子元素的元素
:parent 说明:获取所有已选择到的元素中的非空元素
3.3属性过滤选择器
$("[class]") 说明:选中全部元素中有class属性的元素
$("[class=a]") 说明:选中全部元素中class等于a属性的元素
$("[class!=a]") 说明:选中全部元素中class不等于a属性的元素
$("[class^=a]") 说明:选中全部元素中class以a开头的元素
$("[class$=a]") 说明:选中全部元素中class以a结尾的元素
$("[class*=a]") 说明:选中全部元素中class有a的元素
3.4可见性过滤选择器
:visible 说明:选中所有可见的元素
:hidden 说明:选中所有隐藏的元素
- 表单选择器
:input 说明:选择所有的表单元素,包含<input><textarea><select><button>
:text 说明:选择所有type="text"的input元素
:password 说明:选择所有type="password"的input元素
:radio 说明:选择所有type="radio"的input元素
:checkbox 说明:选择所有type="checkbox"的input元素
:submit 说明:选择所有type="submit"的input元素
:reset 说明:选择所有type="reset"的input元素
:button 说明:选择所有type="button"的input元素
:image 说明:选择所有type="image"的input元素
:file 说明:选择所有type="file"的input元素
:enabled 说明:选择所有可用元素,该选择器仅用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>)
:disabled 说明:选择所有禁用元素
:selected 说明:选择所有选定的下拉列表元素,该选择器只适用于<option>
:checked 说明:选择所有复选框选中的元素
8.jQuery操作DOM
- 样式操作
设置样式
单属性设置:$(对象).css("属性名","属性值");
多属性设置:$(对象).css({"属性名","属性值"},{"属性名","属性值"},{"属性名","属性值"});
追加或移除样式
追加样式:addClass("类名");
追加多个样式:addClass("类名1 类名2 类名3 ...");
删除样式:removeClass("类名");
删除多个样式:removeClass("类名1 类名2 类名3 ...");
切换样式:toggleClass("类名");// 如果存在则删除,不存在则添加
- 内容操作
html(); 说明: 设置或获取所选元素的内容(包括HTML标记),有参为设置,无参则获取。
text(); 说明: 设置或获取所选元素的文本内容,有参为设置,无参则获取。
val(); 说明: 设置或返回表单字段的value值,有参为设置,无参则获取。
简单示例
<html>
<head>
<meta content="charset:utf-8"/>
<title>我的jQueryDemo</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul>
<li>湖北</li>
<li class="hn">湖南</li>
<li class="gd">广东</li>
<li>西藏</li>
</ul>
<input id="uid" type="text" value="1234">
</body>
<script >
$(document).ready(function(){
alert($("ul").html()); // <li>湖北</li><li>...
alert($(".hn").text()); // 湖南
alert($("#uid").val()); // 1234
})
</script>
</html>
- 节点操作
1. 查找节点
通过jQuery选择器来完成 $("xxx")
- 创建节点
$(选择器) 说明:通过选择器获取节点
$(element) 说明:转换DOM为jQuery节点
$(html字符串) 说明:创建节点
- 插入节点
append() 说明:在被选元素的结尾插入内容(内部插入——常用)
appendTo() 说明:将插入的内容追加到被选元素结尾(内部插入)
prepend() 说明:在被选元素的开头插入内容(内部插入——常用)
prependTo() 说明:将插入的内容追加到被选元素开头(内部插入)
after() 说明:在被选元素之后插入内容(外部插入——常用)
insertAfter() 说明:将插入内容追加到被选元素之后(外部插入)
before() 说明:在被选元素之前插入内容(外部插入——常用)
insertBefore() 说明:将插入内容追加到被选元素之前(外部插入)
简单示例
<html>
<head>
<meta content="charset:utf-8"/>
<title>我的jQueryDemo</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul>
<li>湖北</li>
<li class="hn">湖南</li>
<li class="gd">广东</li>
<li>西藏</li>
</ul>
</body>
<script >
$(document).ready(function(){
$("ul").append("<li>云南</li>");
$("ul").prepend("<li>安徽</li>");
$("ul").after("<li>四川</li>");
$("ul").before("<li>江苏</li>");
})
</script>
</html>
效果图
4. 删除节点
remove() 说明:彻底删除
detach() 说明:将节点删除,保留数据和被移走的元素的相关联事件。(不推荐使用)
empty() 说明:只删除节点内容
- 复制节点
clone(true|false) 说明:默认值为false,表示不复制其处理事件。true表示复制事件处理
- 替换节点
replaceWith(新内容); 说明:被选元素替换为新的内容
replaceAll(被选节点) 说明:把被选元素替换为新的 HTML 元素,颠倒replaceWith()的操作效果
- 遍历节点
next() 说明:获取被选元素的后一个同级元素
prev() 说明:获取被选元素的前一个同级元素
siblings() 说明:获取被选元素的所有的同级元素
parent() 说明:选取所有包含子节点或文本节点的父元素。
parents() 说明:获取被选元素所有的祖先元素
$(selector).each(function(index,element)) 说明:遍历每个匹配元素规定要运行的函数。index:选择器的index 位置。element:当前的元素(也可使用 "this" 选择器)。
9.jQuery事件
- 绑定和接触事件
bind() 语法:$(selector).bind(event,data,function,map)
说明:向元素添加事件处理程序
unbind() 语法:$(selector).unbind(event,function,eventObj)
说明:移除被选元素的事件处理程序
on() 语法:$(selector).on(event,childSelector,data,function)
说明:向元素添加事件处理程序
off() 语法:$(selector).off(event,selector,function(eventObj),map)
说明:移除通过on()方法添加的事件处理程序
toggle() 语法:$(selector).toggle(f1,f2,f3,...,fn)
说明:添加多个函数,当在元素上点击时调用第一个指定函数,当再次点击时调用第二个函数,以此类推。toggle()还有其他含义(隐藏与显示)注意:(jquery1.9之前的版本支持)
trigger() 语法:$(selector).trigger(event,eventObj,param1,param2,...)
说明:根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。
- 鼠标事件
click() 说明:单击鼠标左键触发
dblclick() 说明:双击鼠标右键触发
hover() 语法:$(selector).hover(inFunction,outFunction)
说明:悬停事件,指定二个函数方法触发 mouseenter 和 mouseleave 事件,指定一个函数,则 mouseenter 和 mouseleave 都执行它。
mouseover() 说明:当鼠标指针位于元素上方时触发,支持子元素
mouseout() 说明:当鼠标指针离开被选元素时触发,支持子元素
mouseenter() 说明:当鼠标指针穿过(进入)被选元素时触发,不支持子元素
mouseleave() 说明:当鼠标指针离开被选元素时触发,不支持子元素
mousedown() 说明:当鼠标指针移动到元素上方,并按下鼠标左键时触发
mouseup() 说明:当鼠标指针移动到元素上方,并松开鼠标左键时触发
mousemove() 说明:当鼠标指针在指定的元素中移动时触发
- 键盘事件
keydown() 说明:按键按下的时触发
keypress() 说明:按键按下且被按压到最底部时触发
keyup() 说明:按键被松开时触发
- 表单事件
blur() 说明:当元素失去焦点时触发
focus() 说明:当元素获得焦点时触发
change() 说明:当元素的值改变时触发
submit() 说明:当提交表单时触发
select() 说明:当textarea或文本类型的input元素中的文本被选择时触发
10.jQuery显示效果
1.显示与隐藏
hide() 说明:隐藏
show() 说明:显示
toggle() 说明:显示和隐藏,切换hide()和 show()
2.淡入与淡出
fadeIn() 说明:淡入
fadeOut() 说明:淡出
fadeTo() 说明:淡出到
fadeToggle() 说明:淡入和淡出切换
3.滑动
slideDown() 说明:滑下
slideUp() 说明:滑上
slideToggle() 说明:滑上和滑下
4.动画
animate() 说明:自定义动画效果 $(selector).animate({样式},速度,回调函数);
stop() 说明:停止动画
11.jQuery ajax方法
语法:$.ajax({name:value, name:value, … })
详细参数参考:jQuery ajax详细参数
简单示例:
$.ajax({
type: "",// 请求方式 (GET 或 POST)
url: "",// 请求路劲
data: JSON.stringify(),// 请求参数
cache:true,// 是否缓存
contentType:"application/json;charset=UTF-8",// 请求的媒体类型
success: function (result) {// 请求成功的回调函数
},
error:function(e){// 请求失败的回调函数
}
})