jQury详细笔记

最新推荐文章于 2024-05-15 20:43:52 发布

麻辣皮皮虾点.

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量753

点赞数 3

分类专栏： jQuery 文章标签： js jquery javascript

本文链接：https://blog.csdn.net/b_owen/article/details/106461202

版权

jQuery 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

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){// 请求失败的回调函数

	}
})

麻辣皮皮虾点.

关注

3
点赞
踩
39

收藏

觉得还不错? 一键收藏
0
评论
jQury详细笔记

jQury详细笔记1.什么是jQueryjQuery 是一个 JavaScript 库，简化了javaScript的编程，可以跨越多种浏览器，具有通用性和可扩展性，其设计宗旨为"write Less，Do More"。2.jQuery库的功能HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities ``3.为什么要使用jQuery目前网络上有大量开源的 JS 框架, 但是 jQue
复制链接

扫一扫