jQuery 部分
1.jQuery 介绍
什么是 jQuery?
jQuery,顾名思义,也就是 JavaScript 和 查询(Query),它就是辅助 JavaScript 开发的 js 类库。
jQuery 核心思想!
它的核心思想是 write less,do more(写得更少,做得更多),所以它实现了很多浏览器兼容问题。
jQuery 流行程度
jQuery 现在已经成为最流行的 JavaScript 库,在世界前 1000个 访问最多的网站中,有超过55%在使用jQuery
jQuery的好处
jQuery是免费、开源的,jQuery 的语法设计可以使开发更加便捷,例如使用文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能
2.jQuery 的初体验
为按钮绑定点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7月17日</title>
<script type="text/javascript" src="../jquery/jquery-3.5.1.min.js">
</script>
<script type="text/javascript">
$(function () { //相当于window.onload = function ()
var $but1 = $("#on1"); //表示按id查询标签对象
$but1.click(function (){
alert('jQuery的单机事件')
});
});
</script>
</head>
<body>
<button id="on1">点我</button>
</body>
</html>
常见问题:
1.使用 jQuery 一定要引入 jQuey 库。
2.jQuery 中的 $ 是一个函数
3.为按钮绑定响应函数需要:首先使用 jQuery 查询到标签对象 接着使用 标签对象.函数 ( function ) ;
3.jQuery 核心函数
$ 是 jQuery 的核心函数,能完成 jQuery 的很多功能。
1、传入参数为 [函数] 时
表示页面加载完成之后 相当于 windows.onload = function ( ) { }
2、传入参数为 [HTML 字符串] 时
会根据这个字符串创建元素节点对象
3、传入参数为 [选择器字符串] 时
比如 $("#id"); 根据 id 查询标签对象
4、传入参数为 [DOM对象] 时
会把DOM对象转换为 jQuery 对象
4.jQuery 对象 和 dom 对象区分
-
什么是 jQuery 对象 什么是 dom 对象
Dom 对象:
1.通过 getElementById( ) 查询出来的标签对象是 Dom对象
2.通过 getElementByName( ) 查询出来的标签对象是 Dom对象
3.通过 getElementByTagName( ) 查询出来的标签对象是 Dom对象
4.通过 createElement( ) 创建的标签对象是 Dom对象jQuery 对象
5.通过 jQuery 提供的 API 创建的对象,是 jQuery 对象
6.通过 jQuery 包装的 Dom 对象,是 jQuery 对象
7.通过 jQuery 提供的 API 查询到的对象,是 jQuery 对象 -
jQuery 对象的本质:
jQuery 对象 = dom 对象 的数组 + jQuery 提供的一系列功能函数 -
jQuery 对象 和 Dom 对象使用区别
两者不能互相使用对方的方法 -
(重点)Dom 对象 和 jQuery 对象互转
先有 Dom 对象
$( Dom 对象)就可以转换为 jQuery 对象先有 jQuery 对象
jQuery对象 [下标] 取出 相应的 dom 对象
5.(重点!!!)jQuery 选择器
基本选择器
$("标签名或 id 或 name ")
层级选择器
在给定的祖先元素下匹配所有的后代元素
例如:匹配表单中所有的子级 input
$(" form > input “)
匹配所有紧接 在 label 元素后的 input 元素
$(” label + input ")
匹配所有与 form 同辈的 input 元素
$(" form ~ input ")
基本过滤器
例如:获取匹配的第一个 li 元素
$(" li : first ")
内容过滤器
例如:匹配包含给定文本的元素
$(" div : contains(’ John ')" )
给所有包含 p 元素的 div 元素添加一个 text 类
$(" div:has§ . addClass(“test”) ")
属性过滤器
例如:查找所有含有 id 属性的 div 元素
$(" div[id] ")
jQuery 元素的筛选
eq( ) 获取给定索引的元素
first( ) 获取第一个元素
last( ) 获取最后一个元素
filter(exp) 留下匹配的元素
is( ) 判断是否匹配给定的选择器,只要有一个匹配就返回,true
has( ) 返回包含有匹配选择器的元素的元素
not( ) 删除匹配选择器的元素
children( ) 返回匹配给定选择器的子元素
find( ) 返回匹配给定选择器的后代元素
next( ) 返回当前元素的下一个兄弟元素
nextAll( ) 返回当前元素后面所有的兄弟元素
nextUntil( ) 返回当前元素到指定匹配的元素为止的后面元素
parent( ) 返回父元素
prev( ) 返回当前元素的上一个兄弟元素
prevAll( ) 返回当前元素前面所有的兄弟元素
prevUnit( ) 返回当前元素到指定匹配的元素为止的前面元素
siblings( ) 返回所有兄弟元素
add( ) 把 add 匹配的选择器元素添加到 jquery 对象中
jQuery 的属性操作
html( ) 它可以设置和获取起始标签和结束标签中的内容
text( ) 它可以设置和获取起始标签和结束标签中的文本
val( ) 它可以设置和获取表单项的 value 属性值
$(function(){
$(":类名").val("[value值]");
//使表单项被勾选
});
获取属性的方法
attr( ) 可以设置和获取属性值
$(function(){
$(":类名").attr("name"); //获取XXX的name属性值
})
prop( ) 可以设置和获取属性值
Dom 的增删改
内部插入
appendTo( ) a.appendTo(b) 把a插入到b子元素末尾,成为最后一个子元素
prependTo( ) a.prependTo(b) 把a插入到b所有子元素前面,成为第一个子元素
外部插入
insertAfter( ) a.insertAfter(b) 得到 ba
insertBefore( ) b.insertBefore(b) 得到 ab
替换
replaceWith( ) a.replaceWith(b) 用b替换掉a
replaceAll( ) a.replaceAll(b) 用a替换掉所有b
删除
remove( ) a.remove( ) 删除 a 标签
empty( ) a.empty( ) 清空 a 标签内的内容