本文探讨jQuery在现代前端开发中的地位，并通过实例讲解jQuery的页面加载事件、DOM对象与jQuery对象转换、选择器、动画实现（如五星好评和轮播图）以及内容操作。强调jQuery的链式编程和隐式迭代特性，适合初学者和进阶学习。
jQuery是不是过了保质期了
现在前端三大框架，都是为了使操作者从繁琐的DOM操作中解脱出来。而现在都是面向数据编程，这样可以提高了性能和便于维护；而dom操作会让页面重绘和回流，且js数组API，字符串的API等其它操作数据的API都很完善了；在操作数据API比jQuery完善，又不建议dom操作；jQuery还有一席之地吗?
jQuery风华正茂
不管你面向数据编程还是面向老婆编程；根据江湖传言；全世界大约有80~90%的网站直接或间接地使用了jQuery。
第零点：鉴于它如此流行，又如此好用，所以每一个入门JavaScript的前端工程师都应该了解和学习它。
第一点：提高我们的竞争力；技多不压身，个人感觉只要没过时或则以后还有发展前途的语言可能都会增加我们的优势。多学习保证自己可持续发展战略。
第二点，兼容性。消除浏览器差异；它封装了很多兼容代码；不需要自己写冗长的代码来针对不同的浏览器来绑定事件
第三点：当然是它的链式编程和隐式迭代；什么是链式编程、隐式迭代后续讲
第四点：当然是它的Ajax；异步请求和跨域请求都封装得很完善
第五点：轻松实现动画、修改CSS等各种操作，简洁的操作DOM方法。
第六点：jQuery的理念“Write Less, Do More“，让你写更少的代码，完成更多的工作！这不正符合我们程序猿的懒出新高度吗
…
此文章较长；建议在有滴眼液的情况下观看
jQuery页面加载事件
- 页面中所有的内容加载完毕后触发；标签、图片、第三方文件加载后触发；和DOM中的window.onload事件是相同的
$(window).load(function() {
});
- 页面中的基本的标签加载完毕后就可以触发了
$(function(){
})
$(document).ready(function($) {
});
DOM对象和jQuery对象可以互转
DOM对象转jQuery对象；只需要加个$即可
- 比如我们需要获取页面上的li
var list = document.querySelector('li')//这是个dom对象
$(list).click(function () {
//将list转化为jq对象
$(this).css({
backgroundColor:'red'})//将this转为jq对象
})
jQuery对象转为DOM对象
- 使用get方法；
$(ele).get(index);index为索引值
$('li').get(0).style.background = 'yellow'
- 使用
[index]
$('li')[1].style.background = 'green'
设置文本和值的方法
.html()方法,设置标签中间显示其他标签及内容,类似于innerHTML
.text()方法,设置标签中间显示的文本内容,类似于innerText
.val()方法.设置input标签中value的值,类似于value
创建标签
$('div').html('<p></p>')
$('<p></p>')
选择器与隔行变色
jQuery所有选择器
感觉我举的用法例子都是很形象的…此处想象牛逼表情包…
| 选择器名称 | 选择器概述 | 选择器用法 |
|---|---|---|
#id、.class、element、* |
这是基本的选择器：id、类、标签、通配符选择器 | $(‘li’) |
selector1,selector2,selectorN |
指定任意多个选择器 | $(“div,span,p.myClass”) |
ancestor descendant |
祖先后代选择器 | $(“table td”) |
parent > child |
父子选择器 | $(“ul > li”) |
prev + next |
匹配所有紧接在 prev 元素后的 next 元素 | $(“label + input”) |
prev ~ siblings |
匹配 prev 元素之后的所有 siblings(作为第一个选择器的同辈) 元素 | $(‘dt dd’) |
:first、:last |
获取第一个元素、最后一个元素 | $(‘li:first’) |
:not(selector) |
去除所有与给定选择器匹配的元素 | $(“input:not(:checked)”) |
:enev、:odd |
偶数、奇数选择器；从0开始计数 | $(‘ul li:odd’) |
:eq(index)、:gt(index)、:lt(index) |
匹配一个给定索引值的元素、大于给定索引值的元素、小于给定索引值的元素 | $(‘p:eq(1)’) |
:lang |
:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$(“div:lang(en)”)将匹配<div lang="en"> and <div lang="en-us">（和他们的后代
），但不包括
|
$(“p:lang(it)”) |
:header |
匹配如 h1, h2, h3之类的标题元素 | $(":header") |
:animated |
匹配所有正在执行动画效果的元素 | $(“div:animated”) |
:focus |
匹配当前获取焦点的元素。 | $(“input:focus”) |
:root |
在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素。 |
$(":root") |
:target |
选择由文档URI的格式化识别码表示的目标元素。 | 类似我们的锚点链接（后面有案例理解） |
:contains(text) |
匹配包含给定文本的元素 | $(“div:contains(‘John’)”) 查找所有包含 “John” 的 div 元素 |
:empty、:parent |
匹配所有不包含子元素或者文本的空元素、 匹配含有子元素或者文本的元素 | $(“tr:empty”) |
:has(selector) |
匹配含有选择器所匹配的元素的元素 | :has(selector) |
:hidden、:visible |
匹配所有不可见元素，或者type为hidden的元素、 匹配所有的可见元素 | $(“input:hidden”) |
[attribute]、 [attribute=value]、[attribute^=value]、 [attribute$=value]、[attribute*=value]、[selector1][selector2][selectorN] |
匹配包含给定属性的元素、匹配给定的属性是某个特定值的元素、以某些值开始、以某些值结尾、以包含某些值、复合选择器 | $(“input[name*=‘username’]”) |
:first-child、:first-of-type、:last-child、:last-of-type |
即为每个父级元素匹配第一个子元素、匹配E的父元素的第一个E类型的孩子、匹配最后一个子元素、匹配E的父元素的最后一个E类型的孩子 | $(“ul li:first-child”) |
:nth-child(index)、:nth-last-child(n|even|odd|formula)、:nth-last-of-type(n|even|odd|formula)、:nth-of-type(n|even|odd|formula) |
匹配其父元素下的第N个子或奇偶元素;index从1算起、选择所有他们父元素的第n个子元素；计数从最后一个元素开始到第一个、选择的所有他们的父级元素的第n个子元素（类型），计数从最后一个元素到第一个、选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。 | $(“ul li:nth-child(2)”) |
:only-child |
如果某个元素是父元素中唯一的子元素，那将会被匹配 | $(“ul li:only-child”) |
:only-of-type |
选择所有没有兄弟元素，且具有相同的元素名称的元素。 | |
:input |
匹配所有 input, textarea, select 和 button 元素 | |
:text、:password、:radio、:checkbox |
匹配所有的单行文本框(type=“text”) … | $(":text") |
:submit、:image、:reset、 :button、 :file |
||
:enabled、:disabled、 :checked、 :selected |
匹配所有可用元素、不可用元素、选中元素、选中的option元素 | $(“select option:selected”) |
其实上面很多选择器都类似我们css的选择器;真正用到的其实也就几个
:target
<a href="#foo">锚点链接</a>
<p name="foo" id="foo">锚点位置</p>
$(function () {
$('a').click(function () {
$(':target').css({
background:'red'}) //点击两下
})
})
:first-child
其实我们联合使用的时候我们可以看做一个交集选择器；比如看下面这段代码
<div><p>111</p> <p>222</p><p>333</p></div>
$('p:first-child').css({
background:'red'})
$('p:first-child')可以分解为p元素、p元素的父元素div的第一个子元素<p>111</p>;只有匹配这两个选择器(可以理解为交集选择器)才能匹配到;其它一些css元素都是一样的…
隔行变色
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
$('ul li:odd').css({
background:'red'})
$('ul li:even').css({
background:'green'})
这样的代码比我们使用for循环来得更容易，简洁了些
操作样式
- addClass()添加一个类
$('div').addClass('cls1').addClass('cls2') //在addClass方法中类样式的名字前面
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
