Jquery总结

最新推荐文章于 2020-10-15 14:09:00 发布

心机卤蛋

最新推荐文章于 2020-10-15 14:09:00 发布

阅读量106

点赞数

分类专栏：总结文章标签： Jquery 业余非常业余菜鸡菜鸡总结

本文链接：https://blog.csdn.net/weixin_44611721/article/details/96197091

版权

总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、概述

1、继prototype之后的优秀JS框架

1）术语(记忆)

prototype:原型

spring:轻量级DI(IOC)和AOP的容器框架

DI：依赖注入

IOC：控制反转

AOP：面向切面的编程

2)jQuery核心思想：write less do more；

3）版本区别

[外链图片转存失败(img-Bmpx0AVA-1563287529266)(C:\Users\MI\AppData\Roaming\Typora\typora-user-images\1563271962247.png)]

4）引入写法

<script type="text/javascript"
src="/js/jquery-1.11.2.min.js"></script>

二、重点语法

1、事件加载事项

1.1**ready:**整个页面的元素读取完毕之后执行{}里面的代码

[外链图片转存失败(img-UUo77mnN-1563287529267)(C:\Users\MI\AppData\Roaming\Typora\typora-user-images\1563272839943.png)]

1.2window.onload = function(){} : 整个页面加载完毕之后再执行{}里面的代码

[外链图片转存失败(img-9Ux8Kj7p-1563287529267)(C:\Users\MI\AppData\Roaming\Typora\typora-user-images\1563272896687.png)]

2、页面输出

2.1.html("")的优先级次于.innerHTML=“XX”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				var domObj = document.getElementById("myDiv");
				console.debug(domObj);			
				var jqueryObj = $("#myDiv");
				console.debug(jqueryObj);
				jqueryObj.html("向乌龟")
				$(domObj).html("云小贱");			
			//	jqueryObj[0].innerHTML="猪八吉";
			})
		</script>
	</head>
	<body>
		<div id="myDiv"></div>
	</body>
</html>

2.2优先级关系

行内 > id > class> 标签

2.2.1 ID选择器

$("#ID")：若果多个ID，则只会操作第一个。所以当操作的控件处于循环中时，谨慎选择使用ID选择器。

2.2.2 class样式选择器

$("**.**div").html(“xxx”);

只要该样式修饰，则都会进行操作。

2.2.3element元素选择器

$(“div”).html(“xxx”);

$(“input”).val(“所有的input”);

只要有该控件就可以进行操作。

$("*")可以获取页面所有控件，但是一般没啥用。

2.2.4祖先后代选择

[外链图片转存失败(img-xtq1rtyA-1563287529268)(C:\Users\MI\AppData\Roaming\Typora\typora-user-images\1563275556851.png)]

2.2.5父类子类选择

[外链图片转存失败(img-33tzP4oB-1563287529268)(C:\Users\MI\AppData\Roaming\Typora\typora-user-images\1563275923535.png)]

[外链图片转存失败(img-KkP6ScTU-1563287529269)(C:\Users\MI\AppData\Roaming\Typora\typora-user-images\1563276040892.png)]

三、jquery事件注册

1、JS注册事件的三种方法

1.1

<a href="javascript:void(0);" οnclick="functionName();"/>

简单，支持所有浏览器，缺点是结构与事件没有分开，耦合度高，只能添加一个事件，添加之后，事件不能取消

1.2

Document.getElementById(“id”).οnclick=function(){}

简单，支持所有浏览器，缺点是结构与事件没有分开，耦合度高，只能添加一个事件，添加之后，事件可以取消

1.3

元素.addEventListener/元素.attachEvent(IE浏览器)

麻烦，需要自己做兼容，但是功能最为强大

2、jQuery注册事件方法：

2.1

$(“#id”).click(function(){alert(0)});

2.2

$(“#id”).on(“click”,function(){});

取消：

$(“#id”).off(“click”);

2.3

$(“#id”).bind(“click”,function(){})

取消：

$(“#id”).unbind(“click”);

心机卤蛋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery总结

一、概述1、继prototype之后的优秀JS框架1）术语(记忆)prototype:原型spring:轻量级DI(IOC)和AOP的容器框架DI：依赖注入IOC：控制反转AOP：面向切面的编程2)jQuery核心思想：write less do more；3）版本区别[外链图片转存失败(img-Bmpx0AVA-1563287529266)(C:\Users\MI\AppD...
复制链接

扫一扫