- 了解jQuery
- 是什么: What?
- 一个JS函数库: write less, do more
- 封装简化DOM操作(CRUD) / Ajax
- 为什么用它: why?
- 强大选择器: 方便快速查找DOM元素
- 隐式遍历(迭代): 一次操作多个元素
- 读写合一: 读数据/写数据用的是一个函数
- 链式调用: 可以通过.不断调用jQuery对象的方法
- 事件处理
- DOM操作(CUD)
- 样式操作
- 动画
- 浏览器兼容
- 如何使用: How?
- 引入jQuery库
- 本地引入与CDN远程引入
- 测试版与生产版(压缩版)
- 使用jQuery
- 使用jQuery函数: $/jQuery
- 使用jQuery对象: x x x ( 执 行 xxx(执行 xxx(执行()得到的)
- 引入jQuery库
- jQuery的2把利器
- jQuery函数: $/jQuery
- jQuery向外暴露的就是jQuery函数, 可以直接使用
- 当成一般函数使用人: $(param)
- param是function: 相当于window.onload = function(文档加载完成的监听)
- param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
- param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
- param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
- 当成对象使用: $.xxx
- each(obj/arr, function(key, value){})
- trim(str)
- jQuery对象
- 包含所有匹配的n个DOM元素的伪数组对象
- 执行$()返回的就是jQuery对象
- 基本行为:
- length/size(): 得到dom元素的个数
- each(function(index, domEle){}): 遍历所有dom元素
- index(): 得到当前dom元素在所有兄弟中的下标
- 选择器
- 是什么?
- 有特定语法规则(css选择器)的字符串
- 用来查找某个/些DOM元素: $(selector)
- 分类
- 基本
- #id
- tagName/*
- .class
- selector1,selector2,selector3: 并集
- selector1selector2selector3: 交集
- 层次
- 找子孙后代, 兄弟元素
- selector1>selector2: 子元素
- selector1 selector2: 后代元素
- 过滤
- 在原有匹配元素中筛选出其中一些
- :first
- :last
- :eq(index)
- :lt
- :gt
- :odd
- :even
- :not(selector)
- :hidden
- :visible
- [attrName]
- [attrName=value]
- 表单
- :input
- :text
- :checkbox
- :radio
- :checked: 选中的
- 基本
- 属性/文本
- 操作标签的属性, 标签体文本
- attr(name) / attr(name, value): 读写非布尔值的标签属性
- prop(name) / prop(name, value): 读写布尔值的标签属性
- removeAttr(name)/removeProp(name): 删除属性
- addClass(classValue): 添加class
- removeClass(classValue): 移除指定class
- val() / val(value): 读写标签的value
- html() / html(htmlString): 读写标签体文本
- CSS模块
- style样式
- css(styleName): 根据样式名得到对应的值
- css(styleName, value): 设置一个样式
- css({多个样式对}): 设置多个样式
- 位置坐标
- offset(): 读/写当前元素坐标(原点是页面左上角)
- position(): 读当前元素坐标(原点是父元素左上角)
- scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标
- 尺寸
- width()/height(): width/height
- innerWidth()/innerHeight(): width + padding
- outerWidth()/outerHeight(): width + padding + border
- 筛选模块
- 过滤
- 在jQuery对象内部的元素中找出部分匹配的元素, 并封装成新的jQuery对象返回
- first()
- last()
- eq(index)
- filter(selector): 对当前元素提要求
- not(selector): 对当前元素提要求, 并取反
- has(selector): 对子孙元素提要求
- 查找
- 查找jQuery对象内部的元素的子孙/兄弟/父母元素, 并封装成新的jQuery对象返回
- children(selector): 子元素
- find(selector): 后代元素
- preAll(selector): 前的所有兄弟
- siblings(selector): 所有兄弟
- parent(): 父元素
- 文档处理(CUD)模块
- 增加
- append() / appendTo(): 插入后部
- preppend() / preppendTo(): 插入前部
- before(): 插到前面
- after(): 插到后面
- 删除
- remove(): 将自己及内部的孩子都删除
- empty(): 掏空(自己还在)
- 更新
- replaceWith()
- 事件模块
- 绑定事件
- eventName(function(){})
- on(‘eventName’, function(){})
- 常用: click, mouseenter/mouseleave mouseover/mouseout focus/blur
- hover(function(){}, function(){})
- 解绑事件
- off(‘eventName’)
- 事件委托
- 理解: 将子元素的事件委托给父辈元素处理
- 事件监听绑定在父元素上, 但事件发生在子元素上
* 事件会冒泡到父元素 - 但最终调用的事件回调函数的是子元素: event.target
- 事件监听绑定在父元素上, 但事件发生在子元素上
- 好处
- 新增的元素没有事件监听
- 减少监听的数量(n==>1)
- 编码
- delegate(selector, ‘eventName’, function(event){}) // 回调函数中的this是子元素
- undelegate(‘eventName’)
- 理解: 将子元素的事件委托给父辈元素处理
- 事件坐标
- event.offsetX: 原点是当前元素左上角
- event.clientX: 原点是窗口左上角
- event.pageX: 原点是页面左上角
- 事件相关
- 停止事件冒泡: event.stopPropagation()
- 阻止事件的默认行为: event.preventDefault()
-
动画效果
- 在一定的时间内, 不断改变元素样式
- slideDown()/slideUp()/slideToggle()
- fadeOut()/fadeIn()/fadeToggle()
- show()/hide()/toggle()
- animate({结束时的样式}, time, fun)
- stop()
-
插件机制
- 扩展jQuery函数对象的方法
KaTeX parse error: Expected '}', got 'EOF' at end of input: … () {} // this是
})
$.xxx() - 扩展jQuery对象的方法
$.fn.extend({
xxx: function(){} // this是jQuery对象
})
$obj.xxx()
- 扩展jQuery函数对象的方法
-
jQuery文档的结构图
01_初识jQuery.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_初识jQuery</title>
<!--
方式一: 使用原生JS实现功能
-->
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btn1')
btn.onclick = function () {
alert(document.getElementById('username').value)
}
}
</script>
<!--
方式二: 使用jQuery实现功能
1. 引入jQuery库
* 本地引入
* 远程引入
2. 使用jQuery函数和jQuery对象编码
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn2').click(function () {
alert($('#username').val())
})
})
</script>
</head>
<body>
<!--
需求: 点击"确定"按钮, 提示输入的值
-->
用户名: <input type="text" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>
</body>
</html>
02_jQuery的2把利器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的二把利器</title>
</head>
<body>
<button>测试</button>
<!--
1. jQuery核心函数
* 简称: jQuery函数($/jQuery)
* jQuery库向外直接暴露的就是$/jQuery
* 引入jQuery库后, 直接使用$即可
* 当函数用: $(xxx)
* 当对象用: $.xxx()
2. jQuery核心对象
* 简称: jQuery对象
* 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
* 使用jQuery对象: $obj.xxx()
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
console.log(typeof $) //$是一个function
console.log($ === jQuery) //true $与jQuery等同
console.log($ === window.$) //true $是一个全局函数
console.log(typeof $()) //"object" 这个对象就是jQuery对象
$('button').click(function () {
alert(this.innerHTML)
})
</script>
</body>
</html>
03_jQuery核心函数.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_jQuery核心函数</title>
</head>
<body>
<div>
<button id="btn">测试</button>
<br/>
<input type="text" name="msg1"/><br/>
<input type="text" name="msg2"/><br/>
</div>
<!--
1. 作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx()
1). $.each() : 隐式遍历数组
2). $.trim() : 去除两端的空格
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
需求2. 遍历输出数组中所有元素值
需求3. 去掉" my atguigu "两端的空格
*/
/*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
//1). 参数为函数 : 当DOM加载完成后，执行其中的函数 回调函数
$(function () {
//2). 参数为选择器(selector)字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
var $btn = $("#btn")
$btn.click(function () {
//显示按钮的文本
//this就是发生事件的dom元素对象(也就是button)
//3). 参数为DOM对象: 将dom对象封装成jQuery对象
var text = $(this).html()
alert(text)
//显示一个新的输入框
//4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
$('<input type="text" name="msg3" /><br />').appendTo('div')
})
})
/*需求2. 遍历输出数组中所有元素值*/
var arr = [123, 'atguigu', true]
// 1). $.each() : 隐式遍历数组
$.each(arr, function (index, item) {
console.log('第' + (index + 1) + '个元素的值为' + item)
})
/*需求3. 去掉" my atguigu "两端的空格*/
var str = " my atguigu "
// 2). $.trim() : 去除两端的空格
console.log(str.trim() === 'my atguigu')
console.log($.trim(str) === 'my atguigu') //true
</script>
</body>
</html>
04_jQuery对象.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_jQuery对象</title>
</head>
<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
<!--
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
* size()/length: 包含的DOM元素个数
* [index]/get(index): 得到对应位置的DOM元素
* each(): 遍历包含的所有DOM元素
* index(): 得到在所在兄弟元素中的下标
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
需求1. 统计一共有多少个按钮
需求2. 取出第2个button的文本
需求3. 输出所有button标签的文本
需求4. 输出'测试三'按钮是所有按钮中的第几个
*/
$(function () {
var $btns = $('button')
console.log($btns)
// 需求1. 统计一共有多少个按钮
/*size()/length: 包含的DOM元素个数*/
console.log($btns.size(), $btns.length)
// 需求2. 取出第2个button的文本
/*[index]/get(index): 得到对应位置的DOM元素*/
console.log($btns[1].innerHTML, $btns.get(1).innerHTML)
// 需求3. 输出所有button标签的文本
/*each(): 遍历包含的所有DOM元素*/
$btns.each(function () {
console.log(this.innerHTML)
})
// 需求4. 输出'测试三'按钮是所有按钮中的第几个
/*index(): 得到在所在兄弟元素中的下标*/
console.log($('#btn3').index())
})
</script>
</body>
</html>
扫一扫
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
