jQuery学习笔记01
2024-06-07 14:42:52
- 了解jQuery
- 是什么: What?
- 一个JS函数库: write less, do more
- 封装简化DOM操作(CRUD) / Ajax
- 为什么用它: why?
- 强大选择器: 方便快速查找DOM元素
- 隐式遍历(迭代): 一次操作多个元素
- 读写合一: 读数据/写数据用的是一个函数
- 链式调用: 可以通过.不断调用jQuery对象的方法
- 事件处理
- DOM操作(CUD)
- 样式操作
- 动画
- 浏览器兼容
- 如何使用: How?
- 引入jQuery库
- 本地引入与CDN远程引入
- 测试版与生产版(压缩版)
- 使用jQuery
- 使用jQuery函数: $/jQuery
- 使用jQuery对象: xxx(执行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 $) //$是一个functionconsole.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>
jQuery学习笔记01相关推荐
- jQuery学习笔记01：初试jQuery
jQuery学习笔记01:初试jQuery 一.下载jQuery jQuery官网:https://jquery.com 二.案例演示--Welcome to jQuery World 1.在WebS ...
- 锋利的JQuery学习笔记01
1. JQuery的链式操作风格 <script type="text/javascript"> //等待dom元素加载完毕. $(document).ready(fu ...
- JavaWeb-综合案例(用户信息)-学习笔记01【列表查询】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
- Bootstrap学习笔记01【快速入门、栅格布局】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍 什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
- JavaWeb黑马旅游网-学习笔记01【准备工作】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...
- Servlet和HTTP请求协议-学习笔记01【Servlet_快速入门-生命周期方法、Servlet_3.0注解配置、IDEA与tomcat相关配置】
Java后端 学习路线 笔记汇总表[黑马程序员] Servlet和HTTP请求协议-学习笔记01[Servlet_快速入门-生命周期方法.Servlet_3.0注解配置.IDEA与tomcat相关配置 ...
- Tomcat学习笔记01【Web相关概念、Tomcat基本操作】
Java后端 学习路线 笔记汇总表[黑马程序员] Tomcat学习笔记01[Web相关概念.Tomcat基本操作][day01] Tomcat学习笔记02[Tomcat部署项目][day01] 目录 ...
- XML学习笔记01【xml_基础、xml_约束】
Java后端 学习路线 笔记汇总表[黑马程序员] XML学习笔记01[xml_基础.xml_约束][day01] XML学习笔记02[xml_解析][day01] 目录 01 xml_基础 今日内容 ...
- JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
最新文章
- 职场新人:工作七大忌
- 链队列的建立、判空、入队、出队、求长、访头、清空和销毁
- ST17H26 SDK中宏定义注意事项
- html页面的header,HTML5教程 | HTML5 header和footer元素
- Linux Intel网卡IGB驱动修改mac地址
- 雷林鹏分享：Lua break 语句
- mouseover显示层mouseout隐藏层，并且在鼠标放上层时显示层【原】
- [后端人员耍前端系列]AngularJs篇：使用AngularJs打造一个简易权限系统
- Python Tutorial 实践（2）
- @PropertySource 解析 yml 配置文件，自定义解析 yaml 工厂类
- js 获取屏幕高宽_js获取屏幕高度宽度
- PDF文件怎么转换成CAD格式？教你几种转换方法
- 使用谷歌地图在 Flutter 应用中添加地图
- 终于交作业了，View Design 的设计资源上线啦，免费哦
- 太吓人了,dub编译,编译phobos
- 微信小程序开发开篇词 自顶向下，云端赋能：小程序的高效开发之道
- ASP.NET Core与ASP.NET区别
- java计算机毕业设计乒乓球俱乐部管理源码+系统+数据库+lw文档+mybatis+运行部署
- 微信小程序教程03：WXML语法
- 概览嵌入式系统的各种周边设备