前言
一、初识jQuery
- 1、了解jQuery
- 2、jQuery的基本使用
二、jQuery的两把利器
- 1.jQuery函数的使用
- 2.jQuery对象的使用
三、使用jQuery核心函数
- 1.选择器
- - 1.1基本选择器
  - 1.2层次选择器
  - 1.3过滤选择器
  - 1.4常见效果1-表格隔行变色
  - 1.5表单选择器
- 2.工具---$工具的方法
- - 2.1常见效果2-多TAB点击切换
- 3.ajax
四、使用jQuery对象
- 1.属性
- - 1.1复习
- 2.css（见下篇）
写在后面

前言

之前只是用过jQuery，但没有系统地学过。
jQuery官网
jQuery中文网
jQuery在线帮助文档
jQuery基本语法

一、初识jQuery

1、了解jQuery

Write Less,Do More!

链式调用，读写合一

2、jQuery的基本使用

测试时用未压缩的版本：xxx.js
上线后用压缩的版本：xxx.min.js

 <!--  方式一: 使用原生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>

jQuery核心函数：$ / jQuery
jQuery核心对象：执行$()返回的对象

二、jQuery的两把利器

<!--
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">// 1. jQuery函数：直接可用console.log(typeof $)   //$是一个functionconsole.log($ === jQuery) //true  $与jQuery等同console.log($ === window.$) //true  $是一个全局函数// 2. jQuery对象：执行jQuery函数得到它console.log(typeof $()) //"object"  这个对象就是jQuery对象// console.log($() instanceof Object); // true$('button').click(function () {alert(this.innerHTML)})

1.jQuery函数的使用

作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象

/*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框需求2. 遍历输出数组中所有元素值需求3. 去掉"  my atguigu  "两端的空格*//*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*///1). 参数为函数 : 当DOM加载完成后，执行其中的函数     回调函数$(function () {//2). 参数为选择器(selector)字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象var $btn = $("#btn")$btn.click(function () {//显示按钮的文本//this就是发生事件的dom元素对象(也就是button)// alert(this.innerHTML)//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

2.jQuery对象的使用

size()/length：dom元素的个数

jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
基本行为
* size()/length: 包含的DOM元素个数
* [index]/get(index): 得到对应位置的DOM元素
* each(): 遍历包含的所有DOM元素
* index(): 得到在所在兄弟元素中的下标

/*需求:需求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 (index,domEle) {// console.log(index,domEle.innerHTML,this)// })$btns.each(function () {console.log(this.innerHTML)})// 需求4. 输出'测试三'按钮是所有按钮中的第几个/*index(): 得到在所在兄弟元素中的下标*/console.log($('#btn3').index())})

三、使用jQuery核心函数

1.选择器

是什么? 有特定格式的字符串
作用：用来查找特定页面元素

1.1基本选择器

基本选择器

#id : id选择器
element : 元素选择器
.class : 属性选择器
*: 任意标签
selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
selector1selector2selectorN : 取多个选择器的交集(相交选择器)

<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>

/*需求:1. 选择id为div1的元素2. 选择所有的div元素3. 选择所有class属性为box的元素4. 选择所有的div和span元素5. 选择所有class属性为box的div元素*/$(function () {// 1. 选择id为div1的元素$('#div1').css('background', 'red')
// 2. 选择所有的div元素$('div').css('background', 'red')
// 3. 选择所有class属性为box的元素$('.box').css('background', 'red')
// 4. 选择所有的div和span元素$('div,span').css('background', 'red')
// 5. 选择所有class属性为box的div元素$('div.box').css('background', 'red')  //不能写.boxdiv})

1.2层次选择器

<ul><li>AAAAA</li><li class="box">CCCCC</li><li title="hello"><span>BBBBB</span></li><li title="hello"><span class="box">DDDD</span></li><span>EEEEE</span>
</ul>

//1. 选中ul下所有的span$('ul span').css('background', 'red')
//2. 选中ul下所有的子元素span$('ul>span').css('background', 'red')
//3. 选中class为box的下一个li$('.box+li').css('background', 'red')  // 匹配一个
//4. 选中ul下的class为box的元素后面的所有兄弟元素$('ul .box~*').css('background', 'blue')    // BDE

1.3过滤选择器

在原有选择器匹配的元素中进一步进行过滤的选择器

基本
内容
可见性
属性

<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul><li>AAAAA</li><li title="hello">BBBBB</li><li class="box">CCCCC</li><li title="hello">DDDDDD</li><li title="two">BBBBB</li><li style="display:none">我本来是隐藏的</li>
</ul>

  $(function () {//1. 选择第一个div$('div:first').css('background', 'red')
//2. 选择最后一个class为box的元素$('.box:last').css('background', 'red')
//3. 选择所有class属性不为box的div$('div:not(.box)').css('background', 'red')
//4. 选择第二个和第三个li元素
// 多个过滤选择器不是同时执行，而是依次执行的$('li:gt(0):lt(2)').css('background', 'red') //索引起始位置发生变化，重新开始计算 (gt lt 不是同时执行)$('li:lt(3):gt(0)').css('background', 'red') //正确索引位置
//5. 选择内容为BBBBB的li$('li:contains(BBBBB)').css('background', 'red')// $('li:contains("BBBBB")').css('background', 'red')
//6. 选择隐藏的li$('li:hidden ').show()
//7. 选择有title属性的li元素$('li[title]').css('background', 'red')
//8. 选择所有属性title为hello的li元素$('li[title=hello]').css('background', 'red')})

1.4常见效果1-表格隔行变色

效果图：

  $('#data>tbody>tr:odd').css('background', '#ccccff')// $('#data>tbody>tr:odd').addClass('odd')//$('#data>tbody>tr:odd').attr('class', 'odd')

1.5表单选择器

表单选择器
1). 表单
2). 表单对象属性

<form>用户名: <input type="text"/><br>密 码: <input type="password"/><br>爱 好:<input type="checkbox" checked="checked"/>篮球<input type="checkbox"/>足球<input type="checkbox" checked="checked"/>羽毛球 <br>性 别:<input type="radio" name="sex" value='male'/>男<input type="radio" name="sex" value='female'/>女<br>邮 箱: <input type="text" name="email" disabled="disabled"/><br>所在地:<select><option value="1">北京</option><option value="2" selected="selected">天津</option><option value="3">河北</option></select><br><input type="submit" value="提交"/>
</form>

  /*需求:1. 选择不可用的文本输入框2. 显示选择爱好 的个数3. 显示选择的城市名称*/$(function () {//1. 选择不可用的文本输入框$(':input:disabled').css('background', 'red')
//2. 显示选择爱好 的个数console.log($(':checkbox:checked').length)
//3. 显示选择的城市名称console.log($('select>option:selected').html())  // 选择的option的标签体文本console.log($('select').val())  //得到的是选择的option的value})

2.工具—$工具的方法

//1. $.each(): 遍历数组或对象中的数据var person = {name: 'tom',age: 12}$.each(person, function (key, value) {console.log(key, value)})//2. $.trim(): 去除字符串两边的空格//3. $.type(obj): 得到数据的类型console.log($.type($) === "function")   // 跟typeof方法类似//4. $.isArray(obj): 判断是否是数组console.log($.isArray($()))  //falseconsole.log($.isArray([]))  //true//5. $.isFunction(obj): 判断是否是函数console.log($.isFunction($)) //trueconsole.log($.isFunction($())) //falsevar json = '{"username":"jack", "age" : 12}' // json对象：{}// json对象===>js对象   原生：JSON.parse()console.log($.parseJSON(json))  json = '[{"username":"jack", "age" : 12},{"username":"Tom", "age" : 13}]'  // json数组：[]// json数组===>js数组console.log($.parseJSON(json)) JSON.parse(jsonString)  // json字符串--->js对象/数组JSON.stringify(jsObj/jsArr)  // js对象/数组--->json字符串

2.1常见效果2-多TAB点击切换

效果图：

<ul id="tab"><li id="tab1" value="1">10元套餐</li><li id="tab2" value="2">30元套餐</li><li id="tab3" value="3">50元包月</li>
</ul><div id="container"><div id="content1">10元套餐详情：<br/>&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟</div><div id="content2" style="display: none">30元套餐详情：<br/>&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟</div><div id="content3" style="display: none">50元包月详情：<br/>&nbsp;每月无限量随心打</div>
</div>

 var $contents = $('#container>div')var currIndex = 0 //当前显示的内容div的下标$('#tab>li').click(function () { // 隐式遍历//alert('----')// 隐藏当前已经显示的内容div$contents[currIndex].style.display = 'none'// 显示对应的内容div// 得到当前点击的li在兄弟中下标var index = $(this).index()// 找到对应的内容div, 并显示$contents[index].style.display = 'block'// 更新下标currIndex = index})

3.ajax

四、使用jQuery对象

1.属性

操作任意属性
attr()
removeAttr()
prop()
操作class属性
addClass()
removeClass()
操作HTML代码/文本/值
html()
val()

<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul><li>AAAAA</li><li title="hello" class="box2">BBBBB</li><li class="box">CCCCC</li><li title="hello">DDDDDD</li><li title="two"><span>BBBBB</span></li>
</ul><input type="text" name="username" value="guiguClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button>

$(function () {//  1. 读取第一个div的title属性console.log($('div:first').attr('title'))  // one//  2. 给所有的div设置name属性(value为atguigu)$('div').attr('name', 'atguigu')//  3. 移除所有div的title属性$('div').removeAttr('title')//  4. 给所有的div设置class='guiguClass'$('div').attr('class', 'guiguClass')//  5. 给所有的div添加class值(abc)$('div').addClass('abc')//  6. 移除所有div的guiguClass的class$('div').removeClass('guiguClass')//  7. 得到最后一个li的标签体文本console.log($('li:last').html())//  8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"$('li:first').html('<h1>mmmmmmmmm</h1>')//  9. 得到输入框中的value值   // guiguClassconsole.log($(':text').val())     // 读取//  10. 将输入框的值设置为atguigu$(':text').val('atguigu')    // 设置   读写合一//  11. 点击'全选'按钮实现全选$('button:first').click(function () {$(':checkbox').prop('checked', true)})//  12. 点击'全不选'按钮实现全不选$('button:last').click(function () {$(':checkbox').prop('checked', false)})})

1.1复习

1.了解jQuery

是什么：what?
- 一个JS函数库：write less，do more；
- 封装简化DOM操作（CURD）/ Ajax
为什么用它：why？
- 强大选择器：方便快速查找DOM元素；
- 隐式遍历/隐式迭代：一次操作多个元素；
- 读写合一：读数据/写数据用的是一个函数（方法）；
- 事件处理
- 链式调用
- DOM操作（CUD）
- 样式操作
如何使用：how?
- 引入jQuery库（js文件）
  - 本地引入与CDN远程引入
  - 测试版本与生产版本（压缩版）
- 使用jQuery
  - 使用jQuery函数：$/jQuery
  - 使用jQuery对象：$ xxx （执行$()得到的）

2.jQuery的两把利器

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元素的个数
  - [index]：得到指定下标对应的dom元素
  - each(function(index, domEle){}): 遍历所有dom元素
  - index(): 得到当前dom元素在所有兄弟中的下标

3.选择器

是什么
- 有特定语法规则(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: 选中的

4.属性/文本

操作标签的属性, 标签体文本
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): 读写标签体文本

2.css（见下篇）

写在后面

最近忙着搬校区，所以写文章的进度很慢。搬到了新校区，从市区到郊区，有种从城里到村里的感觉。因为是本科生校区，所以周围很多本科生，而我已经是研三的老学姐了，上午同门还说，这里的本科生都散发着一股青春气息，感觉他们好稚嫩啊。图书馆自习室里很多备战考研的同学，看到他们奋笔疾书的样子，还有桌子上厚厚的考研资料书，一下子就想起来我当初考研的时候。时间过得真快，一眨眼三年过去了，而我也不再是当初那个20出头不谙世事的小朋友了（略显矫情。适应了新环境，看到室友都在笔试面试，心里开始焦虑，制作了简历，昨晚投出了人生的第一份简历，算是迈出了第一步。写简历的时候，感觉自己真的菜，不知道大学四年和研究生两年干了啥，只觉得没有抓住自己科班生的身份优势，没有实战经验，只能从现在开始努力。

b站视频-尚硅谷jQuery教程张晓飞老师-笔记相关推荐

前端H5—jQuery精通-张晓飞-专题视频课程
前端H5-jQuery精通-1388人已学习课程介绍 jQuery是优秀, 使用广的JS函数库, 它能帮我们程序员简化DOM查询及DOM操作, 轻松实现动画效果.在世界前10000个 ...
HTML5前端视频_Vue项目实战《硅谷外卖》-张晓飞-专题视频课程
HTML5前端视频_Vue项目实战<硅谷外卖>-369人已学习课程介绍 1.基于 Vue 的新版本: 2.项目是关于外卖业务的前后台分离Web App,功能模块包含商家, ...
前端HTML5视频_谷粒音乐实战-张晓飞-专题视频课程
前端HTML5视频_谷粒音乐实战-385人已学习课程介绍谷粒音乐是使用WEB技术(HTML.JavaScript.CSS)直接构建的移动端APP.本套视频深入移动端开发的核心部分. ...
04 frameset-iframe【尚硅谷JavaWeb教程】
04 frameset-iframe[尚硅谷JavaWeb教程] JAVAWEB的学习笔记学习视频来自:https://www.bilibili.com/video/BV1AS4y177xJ/?vd ...
06 CSS-盒子模型【尚硅谷JavaWeb教程】
06 CSS-盒子模型[尚硅谷JavaWeb教程] JAVAWEB的学习笔记学习视频来自:https://www.bilibili.com/video/BV1AS4y177xJ/?vd_source ...
尚硅谷 jQuery 笔记(张晓飞 2018)
title: 尚硅谷 jQuery 笔记 date: 2020-11-24 21:40:50 toc: true description: jQuery是JS的一个封装的库函数集,用于DOM的CRUD ...
尚硅谷linux教程6 组管理和权限管理（难点、重点）
尚硅谷linux教程6 组管理和权限管理(难点.重点) linux组的基本介绍在 linux 中的每个用户必须属于一个组,不能独立于组外.在 linux 中每个文件有所有者.所在组.其它组的概念. ...
Nginx由浅到深-尚硅谷nginx教程
Nginx由浅到深前言一.nginx的基本概念 1.反向代理 2.负载均衡 3.动静分离二.nginx在linux下的安装 1.安装nginx相关依赖安装 pcre 依赖安装剩余依赖 2.安 ...
前端HTML5视频_HTML5核心-张晓飞-专题视频课程
前端HTML5视频_HTML5核心-275人已学习课程介绍 HTML5是定义 HTML 标准的新的版本. 广义上我们应该认为HTML5是一套技术集合,允许更多样化和强大的网站和应用程 ...

b站视频-尚硅谷jQuery教程张晓飞老师-笔记

目录

前言