JavaScript中的JQuery

最新推荐文章于 2021-03-18 18:50:31 发布

zhiruochujian1

最新推荐文章于 2021-03-18 18:50:31 发布

阅读量174

点赞数

分类专栏： HTML 文章标签： JavaScript JQuery

本文链接：https://blog.csdn.net/zhiruochujian1/article/details/103134931

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript

一.JQuery

1.安装

(1)下载网址: http://jquery.com/

(2)下载完整版 : jquery-2.1.4.js -->学习版本(学习源码,想要学习,最好是学习源码的方法)

2.JQuery 核心

"$"符号在 jQuery 中代表对jQuery 对象的引用, "jQuery"是核心对象，通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

3.Dom对象与JQuery包装集|对象

(1)Dom对象

JavaScript中获取的DOM对象,只有有限的属性和方法

(2)JQuery包装集|对象

通过Jqueru方式获取Jquery包装集对象

4.jQuery对象与Dom对象的相互转换

Jquery包装集对象与Dom对象
DOM对象 ——> Jquery对象
$(dom对象)
Jquery对象 ——> DOM对象
取下标：Jquery对象[下标]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery包装集对象</title>
    <!--引入JQuery的js文档-->
    <script src="js/jquery-3.4.1.js"></script>
</head>
<body>
    <div id="j">哈哈</div>
</body>
<script>
    console.log("========Document对象========");
    //dom对象
    var d=document.getElementById("jq");
    console.log(d);
    //dom对象转为jquery对象
    var dtoj=$(d);
    console.log(dtoj);

    console.log("========Jquery========");
    //jquery对象
    var j=$("#j");
    console.log(j);
    //dom对象转为
    var jtod = j[0];
    console.log(jtod);
</script>
</html>

注：
1)、如果浏览器报错：$ is not defined
说明是Jquery对象未找到，可能是因为没有引入Jquery核心js文件
2)、只有Jquery对象才能使用Jquery方法

5.基础选择器

选择器	名称	举例
id选择器★	“# id属性值”	$("#id属性值")选择id为属性值的元素(id值相同只取第一个)
元素选择器★	标签名	$(“标签名”) 选择所有标签名的元素
类选择器★	“.class属性值”	$(".class属性值")")选择所有class=属性值的元素
通用选择器	*	$("*")选择页面所有元素
组合选择器	选择器1,选择器2,选择器3	$("#id属性值,标签名,.class属性值")同时选中多个选择器匹配的元素

6.属性选择器 Basics

符号	说明
$([属性名])	选择设置过指定属性名的元素
$([属性名=属性值])★	选择设置过指定属性名为指定属性值的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
	</head>
	<body>
		<div id="mydiv1" class="red">id选择器1<span>span中的内容</span></div>
		<div id="mydiv1" class="blue">元素选择器</div>
		<span class="blue">样式选择器</span>		
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 选择设置过指定属性名的元素
		var ids = $("[id]");
		console.log(ids);
		// 选择设置过指定属性名为指定属性值的元素
		var cls = $("[class='blue']");
		console.log(cls);
	</script>
</html>

7.层次选择器 Hierarchy

选择器	名称	举例
后代选择器★	空格	$(s1 s2)在s1内部获得全部的s2节点(不考虑层次)
子代选择器	>	$(s1 > s2) [父子]在s1内部获得s2的子元素节点
相邻选择器	+	$(s1 + s2) [兄弟]在s1后边获得紧紧挨着的第一个兄弟关系的s2节点
同辈选择器	~	$(s1 ~ s2) [兄弟]在s1后边获得全部兄弟关系的s2节点

8.表单选择器

forms	名称	说明
表单选择器	:input	查找所有的input元素
复选框选择器★	:checkbox	查找所有复选框
单选框选择器★	:radio	查找所有单选按钮
文本框选择器	:text	查找所有文本框
密码框选择器	:password	查找所有密码框
提交按钮选择器	:submit	查找所有提交按钮
图像域选择器	:image	查找所有图像域
重置按钮选择器	:reset	查找所有重置按钮
按钮选择器	:button	查找所有按钮
文件域选择器	:file	查找所有文件域

9.过滤选择器

过滤选择器	名称	说明
	:checked★★★	选择所有被选中的元素（单选框、复选框、下拉框）
	:selected★★★	选择所有被选中的元素（下拉框）
	:eq(index)	匹配下标为指定值的元素
	:gt(index)	匹配下标大于指定值的元素
	:even	匹配下标是偶数的元素
	:odd	匹配下标是奇数的元素

10.操作元素属性

1）获取属性

方法	说明	举例
attr(属性名称)	获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。	attr(‘checked’) attr(‘name’)
prop(属性名称)	获取具有true和false两个属性的属性值	prop(‘checked’)

attr()与prop()的区别：
1）、操作返回值是boolean类型的属性（checked、selected、disabled）
设置了属性：attr()返回的是具体的属性值，而prop()返回的true
未设置属性：attr()返回的是undefined，而prop()返回的false
2）、attr()与prop()都可以操作固有属性（固有属性：元素本身拥有的属性）
3）、attr()可以操作自定义属性，而prop()不支持
总结：如果属性的返回值是true或false，使用prop()方法；其他属性使用attr()

2)设置属性

方法	说明	举例
attr(属性名称，属性值)	设置指定的属性值，操作 checkbox 时选中返回checked，没有选中返回 undefined。	attr(‘checked’,’checked’) attr(‘name’,’zs’)
prop(属性名称，属性值)	设置具有true和false两个属性的属性值	prop(‘checked’,’true’)

3)移除属性

方法	说明	举例
removeAttr(属性名)	移除指定的属性	removeAttr(‘checked’)

11.操作元素的样式

方法	说明
attr(“class”)	获取class样式名
attr(“class”,“样式名”)	设置class样式名（会将原本的样式移除，设置新的样式）
addClass(“样式名”)	添加样式名（会保留的原有的样式；如果出现相同属性的样式，则以在style标签中后定义的样式名为准）
css(“具体样式名”,“样式值”)	添加一个具体的样式（相当于写在style属性中的样式）
css({“具体样式名”:“样式值”,“具体样式名”:“样式值”})	添加多个具体的样式

12.操作元素的值

方法	说明
html() ★	获取元素的html内容
html(“html,内容”)	设定元素的html内容
text() ★	获取元素的文本内容，不包含html
text(“text 内容”)	设置元素的文本内容，不包含html
val() ★	获取元素value值
val(‘值’)	设定元素的value值

1)Jquery操作元素的值

(1) html()

取值：html()
赋值：html(“内容”);
获取非表单元素的内容（包含元素中的html标签）

(2) text()

取值：text()
赋值：text(“内容”);
获取非表单元素的纯文本内容（不包含元素中的html标签）

(3) val()

取值：val()
赋值：val(“内容”);
获取表单元素的值

2)JS操作元素的值

(1) innerHTML

取值：innerHTML
赋值：innerHTML = “内容”;
获取非表单元素的内容（包含元素中的html标签）

(2) innerText

取值：innerText
赋值：innerText = “内容”;
获取非表单元素的纯文本内容（不包含元素中的html标签）

(3) value

取值：value
赋值：value = “内容”;
获取表单元素的值

13.添加元素

1)创建元素

创建	说明	举例
$(‘元素内容’) ★★★	直接使用核心函数创建	$(‘< p >this is a paragraph!!!</ p >’)

2)添加元素

方法	说明
prepend(content) ★	在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector)	把 content 元素或内容加入 selector 元素开头
append(content) ★	在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector)	把 content元素或内容插入selector 元素内，默认是在尾部
before()	在元素前插入指定的元素或内容:$(selector).before(content)
after()	在元素后插入指定的元素或内容:$(selector).after(content)

注：
如果追加的元素不存在，则直接添加；
如果追加的元素存在，则将存在的元素剪切到指定位置。

14.删除元素

方法	说明
remove() ★★	删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()	清空所选元素的内容

15.遍历元素

1) each()

$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>遍历元素</title>
	</head>
	<body>
		<h3>遍历元素 each()</h3>
		<span class="green">jquery</span>
        <span class="green">javase</span>
        <span class="green">http协议</span>
        <span class="green">servlet</span>
	</body>
	<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
	<script type="text/javascript">	
		// 获取所有的span标签
		$(".green").each(function(index,element){
			console.log("index：" + index);
			console.log(element);
		});
	
		$(".green").each(function(){
			console.log(this);
			console.log($(this));
		});
	</script>
</html>

二.JQuery事件

1. ready()加载事件

1)ready类似onload

ready加载事件类似于onload事件

语法：
	$(document).ready(function(){});
简写版：
	$(function(){});

ready()方法可以写多个，按顺序执行

2)两者区别

ready事件与onload事件的区别：
这两个方法都是预加载事件，等页面加载完毕后执行的方法。
ready事件：当页面的DOM结构加载完毕后执行
onload事件：当页面的dom结构及页面资源加载完毕后执行

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)简单的bind()事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bind绑定事件</title>
	</head>
	<body>
		<button id="btn1">按钮1</button>
		<button id="btn2">按钮2</button>
		<button id="btn3">按钮3</button>
		<button id="btn4">按钮4</button>
		<button id="btn5">按钮5</button>
		<button id="btn6">按钮6</button>
		<button id="btn7">按钮7</button>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	// 预加载事件
		$(function(){
			// bind绑定事件
			$("#btn1").bind("click",function(){
				console.log("按钮1被电击了...");
			});
			$("#btn2").bind("click",{uname:"张三",msg:"吃苹果"},function(event){
				console.log(event.data);
				console.log(event.data.uname + event.data.msg);
			});
			// 常用版本
			$("#btn3").click(function(){
				console.log("btn3...");
			});
			
			// 给某个元素绑定多个事件，执行同一个函数
			$("#btn4").bind("click mouseout",function(){
				console.log("btn4...");
			});
			
			// 给元素绑定多个事件，并执行不同的函数
			$("#btn5").bind("click",function(){
				console.log("btn5 click...");
			}).bind("mouseout",function(){
				console.log("btn5 mouseout...");
			});
			
			$("#btn6").bind({
				"click":function(){
					console.log("btn6 click...");
				},
				"mouseout":function(){
					console.log("btn6 mouseout...");
				}
			});	
			
			$("#btn7").click(function(){
				console.log("btn7 click...");
			}).mouseout(function(){
				console.log("btn7 mouseout...");
			});	
		});		
	</script>
</html>

五角星符号“★” 表示内容重要！

zhiruochujian1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中的JQuery

JavaScript一.JQuery1.安装(1)下载网址: http://jquery.com/(2)下载完整版 : jquery-2.1.4.js -->学习版本(学习源码,想要学习,最好是学习源码的方法)2.JQuery 核心 "$"符号在 jQuery 中代表对jQuery 对象的引用, "jQuery"是核心对象，通过该对象可以获取jQuery对象，调用jQuery...
复制链接

扫一扫

专栏目录