目录
前言
之前只是用过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 $) //$是一个function
console.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($())) //false
console.log($.isArray([])) //true
//5. $.isFunction(obj): 判断是否是函数
console.log($.isFunction($)) //true
console.log($.isFunction($())) //false
var 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/> 每月套餐内拨打100分钟，超出部分2毛/分钟
</div>
<div id="content2" style="display: none">
30元套餐详情：<br/> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
</div>
<div id="content3" style="display: none">
50元包月详情：<br/> 每月无限量随心打
</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值 // guiguClass
console.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 （执行$()得到的）
- 引入jQuery库（js文件）
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出头不谙世事的小朋友了（略显矫情。适应了新环境，看到室友都在笔试面试，心里开始焦虑，制作了简历，昨晚投出了人生的第一份简历，算是迈出了第一步。写简历的时候，感觉自己真的菜，不知道大学四年和研究生两年干了啥，只觉得没有抓住自己科班生的身份优势，没有实战经验，只能从现在开始努力。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
