- jQuery 介绍
- jQuery 的初体验
- jQuery 核心函数
- jQuery 对象和 dom 对象区分
- 什么是 jQuery 对象,什么是 dom 对象
- jQuery 对象的本质是什么?
- jQuery 对象和 Dom 对象使用区别:
- Dom 对象和 jQuery 对象互转:
- jQuery 选择器
- 基本选择器
- 层级选择器
- 过滤选择器
- 基本过滤器:
- 内容过滤器:
- 属性过滤器:
- 表单过滤器:
jQuery 介绍
ssdss什么是 jQuery ?
sdsssdssjQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 js 类库。
ssdssjQuery 核心思想:
sdsssdss核心思想是 write less,do more(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。
ssdssjQuery 流行程度:
sdsssdssjQuery 现在已经成为最流行的 JavaScript 库,在世界前 10000 个访问最多的网站中,有超过 55%在使用 jQuery。
ssdssjQuery 好处:
sdsssdssjQuery 是免费、开源的,jQuery 的语法设计可以使开发更加便捷,例如操作文档对象、选择 DOM 元素、 制作动画效果、事件处理、使用 Ajax 以及其他功能。
jQuery 的初体验
ssdsseg:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function () {
// var btnObj = document.getElementById("btnId");
// // alert(btnObj);//[object HTMLButtonElement] ====>>> dom 对象
// btnObj.onclick = function () {
// alert("js 原生的单击事件");
// }
// }
$(function () { // 表示页面加载完成 之后,相当 window.onload = function () {}
var $btnObj = $("#btnId"); // 表示按 id 查询标签对象
$btnObj.click(function () { // 绑定单击事件
alert("jQuery 的单击事件");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>
sdsssdss注:使用 jQuery 一定要引入 jQuery 库,$指的是一个函数。
jQuery 核心函数
sdss$ 是 jQuery 的核心函数,能完成 jQuery 的很多功能。$ () 就是调用 $这个函数。
ssdss传入参数为 [ 函数 ] 时:
sdsssdss表示页面加载完成之后。相当于 window.onload = function(){}
ssdss传入参数为 [ HTML 字符串 ] 时:
sdsssdss会对我们创建这个 html 标签对象
ssdss传入参数为 [ 选择器字符串 ] 时:
sdsssdss$(“#id 属性值”); sdsssdssid 选择器,根据 id 查询标签对象
sdsssdss$(“标签名”); sdsssdss标签名选择器,根据指定的标签名查询标签对象
sdsssdss$(“.class 属性值”); sdsssdss类型选择器,可以根据 class 属性查询标签对象
ssdss传入参数为 [ DOM 对象 ] 时:
sdsssdss会把这个 dom 对象转换为 jQuery 对象
jQuery 对象和 dom 对象区分
什么是 jQuery 对象,什么是 dom 对象
ssdssDom 对象:(DOM 对象 Alert 出来的效果是:[object HTML 标签名 Element] )
sdsssdss通过 getElementById()查询出来的标签对象是 Dom 对象
sdsssdss通过 getElementsByName()查询出来的标签对象是 Dom 对象
sdsssdss通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
sdsssdss通过 createElement() 方法创建的对象,是 Dom 对象
ssdssjQuery 对象:(jQuery 对象 Alert 出来的效果是:[object Object] )
sdsssdss通过 JQuery 提供的 API 创建的对象,是 JQuery 对象
sdsssdss通过 JQuery 包装的 Dom 对象,也是 JQuery 对象
sdsssdss通过 JQuery 提供的 API 查询到的对象,是 JQuery 对象
jQuery 对象的本质是什么?
ssdssjQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
jQuery 对象和 Dom 对象使用区别:
ssdssjQuery 对象不能使用 DOM 对象的属性和方法 ssdssDOM 对象也不能使用 jQuery 对象的属性和方法
Dom 对象和 jQuery 对象互转:
ssdssjQuery 对象不能使用 DOM 对象的属性和方法 ssdssDOM 对象也不能使用 jQuery 对象的属性和方法
jQuery 选择器
基本选择器
ssdss#ID ssddsss选择器:根据 id 查找标签对象
ssdss.class:ssdss选择器:根据 class 查找标签对象
ssdsselementssdss选择器:根据标签名查找标签对象
ssdssssdss选择器:表示任意的,所有的元素
ssdssselector1,selector2 组合选择器:合并选择器 1,选择器 2 的结果并返回
层级选择器
ssdssancestor descendant ssddsss后代选择器 :在给定的祖先元素下匹配所有的后代元素
ssdssparent > childssddsss子元素选择器:在给定的父元素下匹配所有的子元素
ssdssprev + nextssddsss相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素
ssdssprev ~ sibingsssddsss之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素
过滤选择器
基本过滤器:
ssdss:first ssddsss获取第一个元素ssdss:last ssddsss获取最后个元素
ssdss:not(selector)ssddsss去除所有与给定选择器匹配的元素ssdss:evenssddsss匹配所有索引值为偶数的元素,从 0 开始计数
ssdss:oddssddsss匹配所有索引值为奇数的元素,从 0 开始计数ssdss:eq(index)ssddsss 匹配一个给定索引值的元素
ssdss:gt(index)ssddsssssdss:lt(index)ssddsss 匹配所有小于给定索引值的元素
ssdss:headerssddsssssdss:animatedssddsss 匹配所有正在执行动画效果的元素
内容过滤器:
ssdss:contains(text)ssddsss匹配包含给定文本的元素
ssdssssddsss匹配所有不包含子元素或者文本的空元素
ssdssssddsss匹配含有子元素或者文本的元素
ssdssssddsss匹配含有选择器所匹配的元素的元素
属性过滤器:
ssdss[attribute]ssddsssssdss[attribute=value]ssddsss匹配给定的属性是某个特定值的元素
ssdss[attribute!=value]ssddsss 匹配所有不含有指定的属性,或者属性不等于特定值的元素
ssdss[attribute^=value]ssddsss匹配给定的属性是以某些值开始的元素
ssdss[attribute$=value]ssddsss匹配给定的属性是以某些值结尾的元素
ssdss[attribute*=value]ssddsss匹配给定的属性是以包含某些值的元素
ssdss[attrSel1][attrSel2][attrSelN]ssddsss复合属性选择器,需要同时满足多个条件时使用。
表单过滤器:
ssdss:inputssddsss匹配所有 input, textarea, select 和 button 元素ssdss:textssddsss匹配所有 文本输入框
ssdss:passwordssddsss匹配所有的密码输入框ssdss:radiossddsss匹配所有的单选框
ssdss:checkboxssddsss匹配所有的复选框ssdss:submitssddsss匹配所有提交按钮
ssdss:imagessddsss匹配所有 img 标签ssdss:resetssddsss匹配所有重置按钮
ssdss:buttonssddsss匹配所有 input type=button < button >按钮ssdss:filessddsss匹配所有 input type=file 文件上传
ssdss:hiddenssddsss匹配所有不可见元素 display:none 或 input type=hidden
表单对象属性过滤器:
ssdss:enabledssddsss匹配所有可用元素ssdss:disabledssddsss匹配所有不可用元素
ssdss:checkedssddsss匹配所有选中的单选,复选,和下拉列表中选中的 option 标签对象
ssdss:selectedssddsss匹配所有选中的 option
jQuery 元素筛选
ssdsseq()ssddsss获取给定索引的元素ssdssfirst()ssddsss获取第一个元素
ssdsslast()ssddsss获取最后一个元素ssdssfilter(exp)ssddsss留下匹配的元素
ssdssis(exp)ssddsss判断是否匹配给定的选择器,只要有一个匹配就返回,true
ssdsshas(exp)ssddsss返回包含有匹配选择器的元素的元素ssdssnot(exp)ssddsss删除匹配选择器的元素
ssdsschildren(exp)ssddsss返回匹配给定选择器的子元素ssdssfind(exp)ssddsss返回匹配给定选择器的后代元素
ssdssnext()ssddsss返回当前元素的下一个兄弟元素ssdssnextAll()ssddsss返回当前元素后面所有的兄弟元素
ssdssnextUntil()ssddsss返回当前元素到指定匹配的元素为止的后面元素ssdssparent()ssddsss返回父元素
ssdssprev(exp)ssddsss返回当前元素的上一个兄弟元素ssdssprevAll()ssddsss返回当前元素前面所有的兄弟元素
ssdssprevUnit(exp)ssddsss返回当前元素到指定匹配的元素为止的前面元素ssdsssiblings(exp)ssddsss返回所有兄弟元素
ssdssadd()ssddsss把 add 匹配的选择器的元素添加到当前 jquery 对象中
💖感谢各位的暴击三连~💖