本文共 2089 字，大约阅读时间需要 6 分钟。

1 jQuery

1.1 什么jQuery

1. jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2. jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。

3. jQuery的作用:

   1. 写更少的代码,做更多的事情: write Less, Do more
   2. 将我们页面的JS代码和HTML页面代码进行分离

1.2 JQ的入门

1.3 JQuery中的选择器

1.3.1 JQ中的基本选择器

• ID选择器: #ID的名称
• 类选择器: 以 . 开头 .类名
• 元素选择器: 标签的名称
• 通配符选择器: *
• 选择器,选择器: 选择器1, 选择器2

1.3.1.1 基本选择器的案例

1.3.2 JQ中的层级选择器

• 子元素选择器: 选择器1 > 选择器2
• 后代选择器: 选择器1 儿孙
• 相邻兄弟选择器: 选择器1 + 选择器2: 找出紧挨着的一个弟弟
• 找出所有弟弟: 选择器1~选择器2: 找出所有的弟弟

1.3.2.1 层级选择器的案例

1.3.3 JQ中的基本过滤器

选择器:过滤器 $(“div:first”)

​ :first 找出第一个元素

​ :last 找出最后一个元素

​ :even 找出偶数索引

​ :odd 找出奇数

​ :gt(index) greater-than大于

​ :lt(index) 小于

​ :eq(index) 等于

1.3.4 JQ中的属性选择器

1. 选择器[属性名称]

选择器[属性名称][属性名称]选择器[属性名称='属性值'][属性名称='属性值'][属性名称='属性值']

1.3.5 JQ中的表单过滤器

1. 表单选择器:
   :input 找出所有的输入项 : 不单单找出input textarea select
   ​:text 找出type类型为 text
   ​:password 找出type类型为 password
2. 常用表单对象属性的过滤器
   ​:selected
   ​:checked

1.4 JQ和JS之间的转换

• JQ对象: 只能调用JQ的属性和方法
• JS对象: 只能调用JS的属性和方法

function changeJS() {
   	var div = document.getElementById("div1");	//div.innerHTML = "JS成功修改了内容"	//将JS对象转成JQ对象	$(div).html("转成JQ对象来修改内容")}	$(function(){
   	//给按钮绑定事件	$("#btn2").click(function() {
   		//找到div1		//$("#div1").html("JQ方式成功修改了内容");		//将JQ对象转成JS对象来调用		var div = $("#div1");		//var jsDiv = $div.get(0);		var jsDiv = div[0];		jsDiv.innerHTML="jq转成JS对象成功";	});});

1.5 JQ中的动画效果

show(): 显示隐藏的匹配元素hide(): 隐藏匹配的元素slideUp(): 用滑动动画隐藏一个匹配元素slideDown(): 用滑动动画显示一个匹配元素fadeIn(): 通过淡入的方式显示匹配元素fadeOut(): 通过淡出的方式隐藏匹配元素animate(): 自定义动画

1.6 JQ常用函数

$(function): 文档加载完成的事件

css(): 修改css样式

prop(): 修改属性/获取属性

html(): 修改innerHTML

attr(): 操作一些自定义的属性

addClass(): 添加一个class样式

removeClass(): 移除

blur: 绑定失去焦点

​focus: 绑定获得焦点事件

​click: 鼠标按键被按下和释放时候

​dblclick: 双击

​change: 元素的值改变—>下拉选择框，复选框和单选按钮

append: 给自己添加子节点

appendTo: 将自己添加到别人家,给自己找一个爹

prepend: 在自己最前面添加子节点

after: 在自己后面添加一个兄弟

empty: 清空所有子节点

1.7 JQ的开发步骤

将我们页面的JS代码和HTML页面代码进行分离)

1. 导入JQ相关的文件
2. 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素

转载地址：https://lzyws739307453.blog.csdn.net/article/details/104552719 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！