本文介绍了jQuery的基础知识，包括事件传递机制、jQuery的基本使用、选择器及DOM操作等内容。
目录
1.事件传递机制
- 事件传递：当页面一个元素触发事件时，其他相关的元素都会接收这个事件，都可以选择对事件作出响应
01示例 - 事件传递机制：
事件传递机制描述的是页面中元素处理事件的顺序，有两种机制：冒泡 和 捕获- 冒泡传递：
从里向外逐个触发（默认传递方式） - 捕获传递：
从外向里逐个触发（IE不支持）
阻止事件传递：
该事件只在当前元素中执行 ，不向上传递.
evt.stopPropagation();（默认冒泡情况下）
- 冒泡传递：
2.jQuery
- 介绍
jQuery是一个JavaScript的库，通过封装原生的JavaScript，得到一整套定义好的方法，简化JS操作
Write Less ，Do More
jQuery版本：
jQuery 1.xx.x 版本，兼容IE 6,7,8
jQuery 2.xx.x 版本，不再兼容IE 6,7,8 - jQuery的功能和优势
- 简化DOM操作，像操作CSS一样去操作DOM
- 直接通过选择器设置元素样式
- 简化JS的代码操作（链式调用）
- 事件的处理更加容易
--------------------------------------- - 各种动画效果使用更加方便
- 让Ajax技术更完美
- 基本jQuery有大量方便的插件
- 自行扩展功能插件
- jQuery使用
- 引入jQuery文件
- 本地文件
<script src=" "></script> - 网络文件引入
<script src="url"></script>
注意：如果想使用jQuery语法操作JS，必须将jQuery引入放在JS代码之前
- 本地文件
- jQuery 使用
- jQuery 对象 - jQuery/$
jQuery 对象是对DOM对象封装之后产生的对象
jQuery 对象只能操作jQuery提供的方法，DOM对象也只能操作原生JS提供的方法，不能混用 - 工厂函数 - $()
如果想要获取元素对象，必须通过工厂函数
函数中可以传递参数：选择器/DOM 对象 - jQuery 对象与DOM对象互相转换
- DOM转换为jQuery 对象
var h1 = document.getElementsByTagName('h1')[0]
var $h1 = $(h1); - jQuery 转换为 DOM
var h1 = $h1[0];
var h1 = $h1.get(0);<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <!-- 引入jQuery文件 --> <script src="jquery-1.11.3.js"></script> </head> <body> <div id="main"> 这是id为main的div </div> <button onclick="getElem()">获取元素</button> <button onclick="domToJQ()">DOM -> jQuery</button> <button onclick="jqToDom()">jQuery -> DOM</button> </body> <script> //1.获取元素 function getElem(){ console.log($('#main')); //获取元素内容 $('main').html() console.log($('#main').html()); $('#main').html('动态设置的文本'); } //2. 转换操作 function domToJQ() { //1. 获取DOM对象 var div = document.getElementsByTagName('div')[0]; //2. 转换为JQ对象 var $div = $(div); $div.html('转换JQ对象成功'); console.log(div,$div); } function jqToDom(){ var div = $('#main')[0]; var div2 = $('#main').get(0); div.innerHTML = "转换DOM元素成功"; console.log(div,div2); } </script> </html>
- DOM转换为jQuery 对象
- jQuery 对象 - jQuery/$
- 引入jQuery文件
jQuery选择器
- 作用
根据选择器获取页面中的元素，返回值都是由jQuery对象组成的数组 - 语法：
$('选择器') - 常用选择器
- 基础选择器
- ID选择器
$('#id');
返回值id属性值为指定id的元素对象 - 类选择器
$('.className');
返回指定类名对象的元素 - 标签选择器
$('element');
返回指定标签对应的元素 - 群组选择器
$('selector1,selector2,...');
- ID选择器
- 层级选择器
- 后代选择器
$('selector1 selector2'); - 子代选择器
$('selector1>selector2'); - 相邻兄弟选择器
$('selector1+selector2');
匹配紧跟在selector1后满足selector2的元素 - 通用兄弟选择器
$('selector1~selector2');
匹配selector1后所有满足selector2的元素<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> </head> <body> <h1>登鹳雀楼</h1> <h2>王之涣</h2> <p id="p1">白日依山尽</p> <p class="c1">黄河入海流</p> <p>欲穷千里目</p> <p>更上一层楼</p> <hr> <div> <h1>登鹳雀楼</h1> <h2>王之涣</h2> <p id="p1">白日依山尽</p> <p class="c1">黄河入海流</p> <p>欲穷千里目</p> <p>更上一层楼</p> </div> </body> <script> //获取元素 console.log($('p')); //为元素添加样式 css('attrName','value') $('p').css('font-size','32px'); $('#p1').css("color","red"); $('.c1').css('color','orange'); $('h1,h2,p').css("text-align","center"); //层级选择器 $('body h1').css('color','red'); $('body>p').css('border','1px dashed green'); //相邻兄弟选择器 通用兄弟选择器 $('h1+p').css('background','pink'); //匹配紧跟在h1后面的兄弟元素p //$('h2+p').css('background','pink'); //匹配h1后面所有的兄弟元素p $('h1~p').css('background','pink'); </script> </html>
- 后代选择器
- 基本过滤选择器
过滤选择器需要结合其他选择器一起使用- :first
只匹配一组元素中的第一个元素
$('p:first'); - :last
匹配一组元素中的最后一个元素
$('p:last'); - :not
否定筛选，将满足selector选择器的元素都排除在外匹配剩余元素
$(':not(p,h1)'); - :odd
匹配偶数行对应的元素（奇数下标） - :even
匹配奇数行对应的元素 - :eq(index)
匹配下标等于index的元素 - :gt(index)
匹配下标大于index的元素 - :lt(index)
匹配下标小于index的元素<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script src="jquery-1.11.3.js"></script> <title>Document</title> </head> <body> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> <p>床前明月光</p> <p>疑是地上霜</p> <p>举头望明月</p> <p>低头思故乡</p> <button onclick="changeFirst()">匹配第一个元素</button> <button onclick="changeLast()">匹配最后一个元素</button> <button onclick="notSelector()">否定选择器</button> <button onclick="oddSelector()">匹配偶数行</button> <button onclick="evenSelector()">匹配奇数行</button> <button onclick="eqSelector()">匹配指定行</button> <button onclick="gtSelector()">大于指定下标</button> <button onclick="ltSelector()">小于指定下标</button> </body> <script> function changeFirst() { $('p:first').css('color','red'); } function changeLast() { $('p:last').css('color','green'); } function notSelector() { $(':not(html,body,p)').css('border','1px solid blue'); } function oddSelector(){ $('p:odd').css('background','yellow'); } function evenSelector(){ $('p:even').css('background','pink'); } function eqSelector (){ $('p:eq(3)').css('font-weight','bold'); } function gtSelector (){ $('p:gt(3)').css('font-size','36px'); } function ltSelector (){ $('p:lt(3)').css('font-size','13px'); } </script> </html>
- :first
- 属性选择器[]
根据标签属性匹配元素- [attribute]
匹配包含指定属性的元素 - [attribute=value]
匹配属性attribute=value的元素 - [attribute!=value]
匹配attribute属性值不等于value的元素 - [attribute^=value]
匹配属性值以value字符开头的元素 - [attribute$=value]
匹配属性值以value字符结尾的元素 - [attribute*=value]
匹配属性值中包含value字符的元素<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> </head> <body> <p id="p1" class="c1">床前明月光</p> <p class="c2">疑是地上霜</p> <p class="c1">举头望明月</p> <p id="p2" class="c2s">低头思故乡</p> </body> <script> //属性选择器 $('[id]').css('font-size','32px'); //id='p1' $('[id=p1]').css('color','red'); //id属性值不是p1的元素 包含属性值为空的元素 $('[id!=p1]').css('color','green'); //匹配class属性值是以c开头的元素 $('[class^=c]').css('background','yellow'); //匹配class属性值是以1结尾的元素 $('[class$=1]').css('background','orange'); //匹配class属性值包含2的元素 $('[class*=2]').css('border','1px solid red'); </script> </html>
- [attribute]
- 子元素过滤选择器
- :first-child
匹配属于其父元素中的首个子元素 - :last-child
匹配属于其父元素中的最后一个子元素 - :nth-child(n)
匹配属于其父元素中的第n个子元素
注意：
将要匹配的子元素与筛选选择器相结合使用<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> </head> <body> <ul> <li>白山依山尽</li> <li>黄河入海流</li> <li>白山依山尽</li> <li>黄河入海流</li> </ul> <ul> <li>白山依山尽</li> <li>黄河入海流</li> <li>白山依山尽</li> <li>黄河入海流</li> </ul> </body> <script> //:first 表示匹配文档中第一个该元素 $('li:first').css('color','red'); $('li:last').css('background','pink'); //:first-child 表示匹配所有作为第一个子元素存在的该元素 $('li:first-child').css('color','green'); $('li:last-child').css('background','cyan'); //:nth-child(n) 匹配作为第n个子元素存在的该元素 // the index of each child to match, start with 1 $('li:nth-child(2)').css('border','1px blue solid'); $('li:nth-child(odd)').css('font-size','32px'); //偶数行 在计算机中存储时，对应的是奇数下标 //偶数行 [0,1,2,3] 偶数行对应的下标为1,3 //nth-child(odd) ==> nth-child(1) </script> </html>
- :first-child
- 基础选择器
jQuery操作DOM
- 基本操作
- html()
获取或者设置jQuery对象中的html内容
类似于DOM innerHTML，可识别标签 - text()
获取或者设置jQuery对象中的text内容
类似于innerText - val()
获取或者设置jQuery对象value值（常见表单控件）
练习：- 创建文本框，定义id
- 创建按钮，内容为显示
- 创建div，当按钮被点击时，将文本框中的内容以一级标题的形式显示在div中
- 使用JQuery实现
07示例
- 属性操作
- attr()
读取或设置jQuery对象属性值，参数为字符串形式的属性名
et：
console.log($('div').attr('id'));
$('div').attr('class','d1'); - removeAttr()
移除指定的属性，参数为属性名
et：
$('div').removeAttr<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> <style> #box{ width:200px; height:200px; border: 1px solid red; } .c1{ color:red; font-size:32px; } </style> </head> <body> <input type="text" id="uname" value="first"> <button onclick="showText()">显示</button> <div></div> <h1></h1> <p></p> <input type="text" id="uname" value="second"> </body> <script> function showText(){ console.log($('#uname').val()); $('div').html('<h1>'+$('#uname').val()+'</h1>'); } //链式调用 永远返回当前的jQuery对象 $('h1').html("西游记").css("text-align","center"); $('p').html('<strong>吴承恩</strong>'); $('p').text('<strong>吴承恩</strong>'); //val() 获取表单控件的值，只返回第一个表单元素的value console.log($('input').val()); //操作属性 $('div').attr('id','box'); $('h1').attr('class','c1'); console.log($('div').attr('id')); //移除属性 $('h1').removeAttr('class'); console.log($('h1').attr('class')); </script> </html>
- attr()
- html()
- 样式操作
- attr();
添加id或class属性，对应选择器，为元素添加样式 - addClass('className')
将className作为值添加到元素的class属性上，是可以连缀使用的
$('h1').addClass('c1').addClass('c2')... - removaClass('className');
移除className
参数可以省略，表示清空类选择器 - toggleClass('className')
切换样式：
元素如果具备className<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery-1.11.3.js"></script> <style> .c2{ width:200px; height:200px; border: 1px solid red; } .c1{ color:green; font-size:32px; } </style> </head> <body> <h1>jQuery操作样式</h1> <p>切换样式</p> <button onclick="changeStyle()">切换</button> </body> <script> //添加样式 $('h1').addClass('c1').addClass('c2'); //$('h1').addClass('c2'); //移除样式 //$('h1').removeClass('c2'); $('h1').removeClass(); function changeStyle(){ //切换p元素样式 $('p').toggleClass('c1'); } </script> </html
- attr();
扫一扫
1419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
