前端篇：jQuery常见知识（一）
前言
- 今天分享的是前端jQuery常见的知识点
- 该篇会结合案例帮助理解，小白可放心食用
笔记根据某站视频进行整理
目录
- jQuery选择器
- jQuery属性和操作方法
- 对象的过滤与查找
- 事件和动画
正文
jQuery选择器
基本选择器
| 基本选择器 | 描述 |
| #id | 根据给定的ID匹配一个元素 |
| .class | 根据给定的类匹配元素 |
| element（标签） | 根据给定的元素名匹配所有元素 |
| *（通用） | 匹配所有元素 |
案例
<!--HTML--> <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> <br> <ul> <li>AAAAA</li> <li title="hello">BBBBB(title="hello")</li> <li class="box">CCCCC(class="box")</li> <li title="hello">DDDDDD(title="hello")</li> </ul>
Id选择器
// 1.选择id为div1的元素
$('#div1').css('background-color', 'red'); 
class选择器
// 3.选择所有class属性为box的元素
$('.box').css('background-color', 'red'); 
标签选择器
// 2.选择所有的div元素
$('div').css('background-color', 'red'); 
通用选择器
// 6.选择所有元素
$('*').css('background-color', 'red'); 
层级选择器
| 层级选择器 | 描述 |
| ul li | 在给定的祖先元素下匹配所有的后代元素 |
| ul>span | 在给定的父元素下匹配所有的子元素 |
| prev + next | 匹配所有紧接在 prev 元素后的 next 元素 |
| prev ~ siblings | 匹配 prev 元素之后的所有 siblings 元素 |
案例
<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下li的class为box的元素后面的所有兄弟元素
$('ul .box ~ *').css('background', 'red'); 
过滤选择器
| 过滤选择器 | 描述 |
| :first | 获取第一个元素 |
| :last | 获取最后一个元素 |
| :eq(index) | 匹配一个给定索引值的元素 |
| :even | 匹配所有索引值为偶数的元素，从 0 开始计数 |
| :odd | 匹配所有索引值为奇数的元素，从 0 开始计数 |
| :not(selector) | 去除所有与给定选择器匹配的元素 |
| :contains(text) | 匹配包含给定文本的元素 |
| :has(selector) | 匹配含有选择器所匹配的元素的元素 |
| ... | ... |
案例
<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> </ul>:first
// 1.选择第一个div
$('div:first').css('background', 'red'); 
:last
// 2.选择最后一个class为box的元素
$('.box:last').css('background', 'red'); 
:eq(index)
// 3.选择第二个和第三个li元素
$('li:eq(1),li:eq(2)').css('background', 'red'); 
:not(selector)
// 4.选择所有class属性不为box的div
$('div:not(.box)').css('background', 'red');
:contains(text)
// 5.选择内容为BBBBB的li
$('li:contains("BBBBB")').css('background', 'red');
表单选择器
| 表单选择器 | 描述 |
| :input | 匹配所有 input, textarea, select 和 button 元素 |
| :text | 匹配所有的单行文本框 |
| :password | 匹配所有密码框 |
| :radio | 匹配所有单选按钮 |
| :checkbox | 匹配所有复选框 |
| :submit | 匹配所有提交按钮 |
| :reset | 匹配所有重置按钮 |
| :button | 匹配所有按钮 |
| 表单对象属性 | 描述 |
| :enabled | 匹配所有可用元素 |
| :disabled | 匹配所有不可用元素 |
| :checked | 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option) |
| :selected | 匹配所有选中的option元素 |
案例
<form> 用户名：<input type="text"/><br> 密码：<input type="password"/><br> 爱好： <input type="checkbox" checked="checked"/>篮球 <input type="checkbox" checked="checked"/>足球 <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> 所在地：I <select> <option value="1">北京</option> <option value="2" selected="selected">天津</option> <option value="3">河北</option> </select><br> <input type="submit" value="提交"/> </form>
:text、:disabled
// 1.选择不可用的文本输入框
$(':text:disabled').css('background-color', 'red'); 
// 2.显示选择的城市名称
$(':submit').click(function () {
alert($('select>option:selected').html());
}); 
jQuery属性和操作方法
工具方法
| 方法 | 描述 |
| $.each() | 通用例遍方法，可用于例遍对象和数组 |
| $.trim() | 去除字符串两边的空格 |
| $.type() | 检测obj的数据类型 |
| $.isArray() | 测试对象是否为数组 |
| $.isFunction() | 测试对象是否为函数 |
| $.parseJSON(json) | 解析json字符串转换为js对象/数组 |
$.each()
// 1、$.each()：遍历数组或对象中的数据
var obj = {
name: 'Tom',
setName: function (name) {
this.name = name;
}
}
$.each(obj, function (key, value) {
console.log(key, value); // name Tom setName ƒ (name) {}
});
$.trim()// 2、$.trim()：去除字符两边的空格 var str = ' ddd '; console.log($.trim(str)); // ddd$.type()
// 3、$.type(obj)：得到数据的类型 console.log($.type($), $.type($())); // function object$.isArray()
// 4、$.isArray(obj)：判断是否是数组
console.log($.isArray($('body')), $.isArray([])); // false true
$.isFunction()// 5、$.isFunction(obj)：判断是否是函数 console.log($.isFunction($), $.isFunction($())); // true false$.parseJSON(json)
//6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
var json = '{"name":"Tom", "age":12}' // json对象: {}
// json对象===>JS对象
console.log($.parseJSON(json))
json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []
// json数组===>JS数组
console.log($.parseJSON(json))
/*
JSON.parse(jsonString) json字符串--->js对象/数组
JSON.stringify(jsObj/jsArr) js对象/数组--->json字符串
*/ 操作属性（意思是找到标签内属性的方法）
| 操作任意属性 | attr() | 设置或返回被选元素的属性值 |
| removeAttr() | 从每一个匹配的元素中删除一个属性 | |
| prop() | 获取在匹配的元素集中的第一个元素的属性值 | |
| 操作class属性 | addClass() | 为每个匹配的元素添加指定的类名 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类 | |
| 操作HTML代码/文本/值 | 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>
//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值
console.log($(':text').val()) // 读取 //10. 将输入框的值设置为atguigu
$(':text').val('atguigu') //11. 点击'全选'按钮实现全选
// attr(): 操作属性值为非布尔值的属性
// prop(): 专门操作属性值为布尔值的属性
var $checkboxs = $(':checkbox')
$('button:first').click(function () {
$checkboxs.prop('checked', true)
})
//12. 点击'全不选'按钮实现全不选
$('button:last').click(function () {
$checkboxs.prop('checked', false)
}) 操作CSS样式
案例
<p style="color: blue;">青椒</p> <p style="color: green;">炒肉</p>
//1. 得到第一个p标签的颜色
console.log($('p:first').css('color')) //rgb(0, 0, 255) //2. 设置所有p标签的文本颜色为red
$('p').css('color', 'red')
//3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
$('p:eq(1)').css({
color: '#ff0011',
background: 'blue',
width: 300,
height: 30
}) offset()和position()
| offset() | 相对页面左上角的坐标 |
| position() | 相对于父元素左上角的坐标 |
案例
<!--HTML--> <div class="div1"> <div class="div2">测试offset</div> </div> <div class='div3'> <button id="btn1">读取offset和position</button> <button id="btn2">设置offset</button> </div>
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.div3 {
position: absolute;
top: 250px;
} // 打印 div1 相对于页面左上角的位置
var offset = $('.div1').offset()
console.log(offset.left, offset.top) // 10 20
// 打印 div2 相对于页面左上角的位置
offset = $('.div2').offset()
console.log(offset.left, offset.top) // 10 70 // 打印 div1 相对于父元素左上角的位置
var position = $('.div1').position()
console.log(position.left, position.top) // 10 20 // 打印 div2 相对于父元素左上角的位置
position = $('.div2').position()
console.log(position.left, position.top) // 0 50 元素滚动
| scrollTop() | 读取/设置滚动条的Y坐标 |
| $(document.body).scrollTop()+$(document.documentElement).scrollTop() | 读取页面滚动条的Y坐标(兼容chrome和IE) |
| $('body,html').scrollTop(60) | 滚动到指定位置(兼容chrome和IE) |
案例
<div style="border:1px solid black;width:100px;height:150px;overflow:auto"> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. his is some text. </div> <br> <br> <br> <button id="btn1">得到scrollTop</button> <button id="btn2">设置scrollTop</button>
//1. 得到div或页面滚动条的坐标
$('#btn1').click(function () {
console.log($('div').scrollTop())
// console.log($('html').scrollTop()+$('body').scrollTop())
console.log($(document.documentElement).scrollTop()+$(document.body).scrollTop()) // 兼容IE/Chrome
}) //2. 让div或页面的滚动条滚动到指定位置
$('#btn2').click(function () {
$('div').scrollTop(200)
$('html,body').scrollTop(300)
}) 元素的尺寸
| 内容尺寸 | height() | height | |
| width() | width | ||
| 内部尺寸 | innerHeight() | height+padding | |
| innerHeight() | width+padding | ||
| 外部尺寸 | outerHeight(false/true) | height+padding+border 如果是true, 加上margin | |
| outerWidth(false/true) | width+padding+border 如果是true, 加上margin | ||
案例
div {
width: 100px;
height: 150px;
background: red;
padding: 10px;
border: 10px #fbd850 solid;
margin: 10px;
} var $div = $('div')
// 1. 内容尺寸
console.log($div.width(), $div.height()) // 100 150
// 2. 内部尺寸
console.log($div.innerWidth(), $div.innerHeight()) //120 170
// 3. 外部尺寸
console.log($div.outerWidth(), $div.outerHeight()) //140 190
console.log($div.outerWidth(true), $div.outerHeight(true)) //160 210 结语
- 第一部分的内容整理完毕，总体来说jQuery结合文档学习或观看相应的视频即可，这里仅给出部分常见知识点方便大家复习
- 我们下次再见
- 路过给个赞？
（排版不太美观（我觉得- -，凑合看一下，后面我再改改））
投递腾讯等公司8个岗位 >