公司做网站是管理费用,wordpress讨论,高端网站建设四川,网站网页制作专业公司今日新篇章 【jQuery】 【主要内容】 jQuery简介 jQuery安装 jQuery语法 jQuery选择器 jQuery事件处理 jQueryDOM操作 jQuery元素遍历 jQuery过滤 jQuery其它方法
【学习目标】
1.jQuery简介
1.1 jQuery简介 jQuery 库可以通过一行简单的标记被添加到网页中。
1.…今日新篇章 【jQuery】 【主要内容】 jQuery简介 jQuery安装 jQuery语法 jQuery选择器 jQuery事件处理 jQueryDOM操作 jQuery元素遍历 jQuery过滤 jQuery其它方法
【学习目标】
1.jQuery简介
1.1 jQuery简介 jQuery 库可以通过一行简单的标记被添加到网页中。
1.2 需要具备的基础知识 在开始学习 jQuery 之前应该对以下知识有基本的了解
HTML
CSS
JavaScript
1.3 什么是 jQuery jQuery是一个JavaScript函数库。 安全性、效率性、简洁性
jQuery是一个轻量级的写的少做的多的JavaScript库。
jQuery库包含以下功能
Ø HTML 元素选取
Ø HTML 元素操作
Ø CSS 操作
Ø HTML 事件函数
Ø JavaScript 特效和动画
Ø HTML DOM 遍历和修改
Ø AJAX
提示 除此之外jQuery还提供了大量的插件。
1.4 为什么使用 jQuery 目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行基于dom操作的 JS 框架而且提供了大量的扩展。
很多大公司都在使用 jQuery 例如:
Google
阿里
腾讯
百度
Microsoft
IBM
Netflix
2.jQuery安装
2.1 官网 https://jquery.com/
2.2 下载
有两个版本的 jQuery 可供下载
Production version - 用于实际的网站中已被精简和压缩。
Development version - 用于测试和开发未压缩是可读的代码
以上两个版本都可以从www.jquery.com中下载。
https://jquery.com/download/
https://code.jquery.com/jquery-3.5.1.min.js
在本在创建一个jquery-3.5.1.min.js的文件
复制网页里面的代码到这个文件里就OK了
或者直接上github上面下载
https://github.com/jquery/jquery/tags
3.jQuery 简单语法
3.1 JQuery作用** 通过 jQuery您可以选取查询query HTML 元素并对它们执行操作actions。
3.2 jQuery 语法 jQuery 语法是通过选取 HTML 元素并对选取的元素执行某些操作。
基础语法 $(selector).action()
美元符号定义 jQuery
选择符selector“查询和查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
script$(this).hide() - 隐藏当前元素$(p).hide() - 隐藏所有 p 元素$(p.test).hide() - 隐藏所有 的 p 元素$(#test).hide() - 隐藏所有 idtest 的元素/script3.3 文档就绪事件
这是为了防止文档在完全加载就绪之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数操作可能失败。
3.3.1 方法一
script$(document).ready(function(){// 开始写 jQuery 代码...});/script3.3.2 方法二
script$(function(){// 开始写 jQuery 代码...});/script4.jQuery 选择器
4.1 什么是jQuery 选择器** jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找或选择HTML 元素。 它基于已经存在的 CSS 选择器除此之外它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头$()。
4.2 相关重点选择器【重点掌握】 4.2.1 元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 p 元素:
$(“p”)/jQuery(“p”)
实例
用户点击按钮后所有 p 元素都隐藏
实例
script$(function(){$(button).click(function(){$(p).hide();});});/script4.2.2 #id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下
$(“#test”)
实例
当用户点击按钮后有 id“test” 属性的元素将被隐藏
实例
bodydiv idtest/div/bodyscript$(function(){$(button).click(function(){$(#test).hide();});});/script4.2.3 .class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下
$(“.test”)
实例
用户点击按钮后所有带有 属性的元素都隐藏
实例
bodydiv/div/bodyscript$(function(){$(button).click(function(){$(.test).hide();});});/script4.3 其它选择器【熟悉】
$(“*”)选取所有元素
$(this) 选取当前的html元素
$(“p.intro”) 选择class为intro的p元素
$(“p:first”) 选取第一个p元素
$(“p:last”) 选取最后一个p元素
$(“[href]”) 选取带有href属性的元素
$(“[href]”) 选取带有href并属性值等于某个值的元素
$(“a[target’_blank’]”) 选取a标签中有target属性并且属性值为_blank的元素
$(“:button”) 选取页面所有的button
$(“:checked”) 选取页面所有的被选中
$(“tr:even”) 选取偶数位的tr
$(“tr:odd”)选取奇数位的tr
$(“:selected”)选取select中被选中的元素
5.jQuery 事件
5.1 什么是事件** 页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
5.1.1 实例
在元素上移动鼠标。
选取单选按钮
点击元素
在事件中经常使用术语触发或激发例如 “当您按下按键时触发 keypress 事件”。
5.1.2 常见 DOM 事件
5.2 简单用法
在 jQuery 中大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件
$(“p”).click();
下一步是定义什么时间触发事件。可以通过一个事件函数实现
$(“p”).click(function(){
// 动作触发后执行的代码!!});
5.3 常用的 jQuery 事件方法 要想使用事件是必须使用文档就绪的方法的
$()
$() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 简单语法中已经提到过。
5.3.1 单击事件
事件 描述 click 鼠标点击某个对象实例给文档中的 id“box” 元素添加点击事件。
script$(function () {$(#box).click(function () {alert(单击事件);})})/script在jQuery的事件中我们也可以主动的响应对应的事件。
$(“#box”).click();
5.3.2 双击事件
事件 描述 dblclick 鼠标双击某个对象实例给文档中的 id“btn” 元素添加点击事件。
script$(function () {$(#box).dblclick(function () {console.log(双击事件);});})/script5.3.3 焦点事件
事件 描述 focus 元素获得焦点时触发blur 元素失去焦点时触发实例给文档中的input元素添加点击事件。
script$(function () {$(input).focus(function () {console.log(获得焦点);});$(input).blur(function () {console.log(失去焦点);});})/script5.3.4 改变事件 事件 描述change 域的内容被改变触发用于input、select和textarea标签。
当用于 select 元素时change 事件会在选择某个选项时发生。当用于 input 或 textarea 时该事件会在元素失去焦点时发生。
实例给文档中的select和input元素添加改变事件。
body故乡select namecity idcityoption value1北京/optionoption value2上海/optionoption value3广州/optionoption value4武汉/option/select密码input typepassword placeholder请输入密码script$(select).change(function () {console.log(选中的城市 $(this).val());});$(input).change(function () {console.log(输入的内容 $(this).val());});/script/body5.3.5 鼠标事件
当鼠标指针穿过元素时会发生 onmouseenter 事件。该事件大多数时候会与 onmouseleave 事件一起使用。onmouseover 事件和 onmouseout 事件一起使用。
与 onmouseover 事件不同只有在鼠标指针穿过被选元素时才会触发 onmouseenter 事件。如果鼠标指针穿过任何子元素同样会触发 onmouseover 事件。
实例给文档中的idbox元素添加鼠标事件。
script$(function () {$(#box).mouseenter(function () {console.log(鼠标进入);});$(#box).mouseleave(function () {console.log(鼠标离开)});$(#box).mousedown(function () {console.log(鼠标按下);});$(#box).mouseup(function () {console.log(鼠标抬起);});$(#box).mousemove(function () {console.log(鼠标移动);});})/script
5.3.6 hover事件
语法: hover([fnOver,] fnOut) 参数 描述fnOver 鼠标移到元素上要触发的函数。
fnOut 鼠标移出元素要触发的函数。
一个模仿悬停事件鼠标移动到一个对象上面及移出这个对象的方法。
当鼠标移动到一个匹配的元素上面时(mouseenter)会触发指定的第一个函数。当鼠标移出这个元素时(mouseleave)会触发指定的第二个函数。
script$(function () {$(#box).hover(function () {console.log(鼠标进入);}, function () {console.log(鼠标离开);});})/script5.4 event事件对象 5.4.1 event属性
5.4.2 event方法
方法 描述 事件
stopPropagation() 阻止事件冒泡。 任意事件
preventDefault() 阻止事件的默认动作。 任意事件
事件冒泡是因为事件会按照DOM的层次结构像水泡一样不多向上直至顶端。
实例阻止文档中class“child” 的元素事件派发。
bodydivdiv点击我/div/divscript$(.child).on(click, function (event) {console.log(子元素响应事件);event.stopPropagation();});$(.parent).on(click, function (event) {console.log(父元素响应事件);});/script/body实例阻止文档中 元素的默认行为。bodya hrefhttps://www.baidu.com百度一下,你就知道/ascript$(.link).on(click, function (event) {// 阻止事件的默认动作。event.preventDefault();})/script/body6.jQuery DOM操作【重中之中】
6.1 jQuery 捕获** jQuery DOM 操作
jQuery 中非常重要的部分就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法这使访问和操作元素和属性变得很容易。
DOM Document Object Model文档对象模型
DOM 定义访问 HTML 和 XML 文档的标准
W3C 文档对象模型独立于平台和语言的界面允许程序和脚本动态访问和更新文档的内容、结构以及样式。
6.1.1 获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容包括 HTML 标记
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容
!DOCTYPE htmlhtmlheadmeta charsetutf-8title/titlescript srclib/jquery.min.js typetext/javascript charsetutf-8/script/headbodyp idtest这是段落中的 b粗体/b 文本。/pbutton idbtn1显示文本/buttonbutton idbtn2显示 HTML/button/bodyscript$(function(){$(#btn1).click(function(){alert(Text: $(#test).text());});$(#btn2).click(function(){alert(HTML: $(#test).html());});});/script/html
下面的例子演示如何通过 jQuery val() 方法获得输入字段的值!DOCTYPE htmlhtmlheadmeta charsetutf-8title/titlescript srclib/jquery.min.js typetext/javascript charsetutf-8/script/headbodyp名称: input typetext idtest valuejQuery教程/pbutton显示值/button/bodyscript$(function(){$(button).click(function(){alert(值为: $(#test).val());});});/script/html6.1.2 获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值
实例
script$(function(){$(button).click(function(){alert($(#powernode).attr(href));});});/script/headbodypa hrefhttp://www.runoob.com idpowernodejQuery教程/a/pbutton显示 href 属性的值/button/body/html6.1.3 获取属性 - prop()
对于HTML元素本身就带有的固有属性在处理时使用prop方法。快速准确。
对于HTML元素我们自己自定义的DOM属性在处理时使用attr方法。
注意在select和radio和checkbox中我们取selected checked属性应使用prop
6.2 jQuery 设置 6.2.1 设置内容 - text()、html() 以及 val()【重点】
我们将使用前一章中的三个相同的方法来设置内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容包括 HTML 标记
val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容
实例
$(#btn1).click(function(){$(#test1).text(Hello world!);});$(#btn2).click(function(){$(#test2).html(bHello world!/b);});$(#btn3).click(function(){$(#test3).val(powernode);});6.2.2 text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法text()、html() 以及 val()同样拥有回调函数。回调函数有两个参数被选元素列表中当前元素的下标以及原始旧的值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html()
$(#btn1).click(function(){$(#test1).text(function(i,origText){return 旧文本: origText 新文本: Hello world! (index: i );});});$(#btn2).click(function(){$(#test2).html(function(i,origText){return 旧 html: origText 新 html: Hello bworld!/b (index: i );});});
【注意】html(function(index, html)) index为元素在集合中的索引位置html为原先的HTML值
6.2.3 设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变设置链接中 href 属性的值
$(“button”).click(function(){
$(#powernode).attr(href,http://www.whpowernode.com);});
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性
实例
$(button).click(function(){$(#powernode).attr({href : http://www.whpowernode.com,title : 武汉动力节点});});6.2.4 attr() 的回调函数
jQuery 方法 attr()也提供回调函数。回调函数有两个参数被选元素列表中当前元素的下标以及原始旧的值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法
$(button).click(function(){$(#powernode).attr(href, function(i,origValue){return origValue /java;});});6.2.5 设置属性 - prop()
对于HTML元素本身就带有的固有属性在处理时使用prop方法。快速准确。
对于HTML元素我们自己自定义的DOM属性在处理时使用attr方法。
注意在select和radio和checkbox中我们取selected checked属性应使用prop
6.3 jQuery 添加元素 添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法
append() - 在被选元素的内部结尾插入内容
prepend() - 在被选元素的内部开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
6.3.1 jQuery append() 方法
jQuery append() 方法在被选元素的内部结尾插入内容。
实例
$(“p”).append(“追加文本”);
6.3.2 jQuery prepend() 方法
jQuery prepend() 方法在被选元素的内部开头插入内容。
实例$(“p”).prepend(“在开头追加文本”);
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中我们只在被选元素的开头/结尾插入文本/HTML。
不过append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML就像上面的例子那样或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中对 prepend() 同样有效
实例
function appendText(){var txt1p文本。/p; // 使用 HTML 标签创建文本var txt2$(p/p).text(文本。); // 使用 jQuery 创建文本var txt3document.createElement(p);txt3.innerHTML文本。; // 使用 DOM 创建文本 text with DOM$(body).append(txt1,txt2,txt3); // 追加新元素}
6.3.3 jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$(“img”).after(“在后面添加文本”);
$(“img”).before(“在前面添加文本”);
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中对 before() 同样有效
function afterText(){var txt1bI /b; // 使用 HTML 创建元素var txt2$(i/i).text(love ); // 使用 jQuery 创建元素var txt3document.createElement(big); // 使用 DOM 创建元素txt3.innerHTMLjQuery!;$(img).after(txt1,txt2,txt3); // 在图片后添加文本}6.4 jQuery 删除元素 通过 jQuery可以很容易地删除已有的 HTML 元素。
删除元素/内容
如需删除元素和内容一般可使用以下两个 jQuery 方法
remove() - 删除被选元素及其子元素
empty() - 从被选元素中删除子元素
6.4.1 jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
实例 $(“#div1”).remove();
6.4.2 jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
实例 $(“#div1”).empty();
3过滤被删除的元素
jQuery remove() 方法也可接受一个参数允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 的所有 元素
实例
$(“p”).remove(“.italic”);
6.5 jQuery CSS 类 jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
实例样式表
下面的样式表将用于本页的所有例子
.important{font-weight:bold;font-size:xx-large;}.blue{color:blue;}6.5.1 jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然在添加类时您也可以选取多个元素
实例
$(button).click(function(){$(h1,h2,p).addClass(blue);$(div).addClass(important);});也可以在 addClass() 方法中规定多个类实例
$(button).click(function(){$(#div1).addClass(important blue);});6.5.2 jQuery removeClass() 方法
下面的例子演示如何在不同的元素中删除指定的 class 属性
$(button).click(function(){$(h1,h2,p).removeClass(blue);});6.5.3 jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作
$(button).click(function(){$(h1,h2,p).toggleClass(blue);});6.6 jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
6.6.1 返回 CSS 属性
如需返回指定的 CSS 属性的值请使用如下语法
css(“propertyname”);
下面的例子将返回首个匹配元素的 background-color 值
实例
$(“p”).css(“background-color”);
6.6.2 设置 CSS 属性
如需设置指定的 CSS 属性请使用如下语法
css(“propertyname”,“value”);
下面的例子将为所有匹配元素设置 background-color 值
实例
$(“p”).css(“background-color”,“yellow”);
6.6.3 设置多个 CSS 属性
如需设置多个 CSS 属性请使用如下语法
css({“propertyname”:“value”,“propertyname”:“value”,…});
下面的例子将为所有匹配元素设置 background-color 和 font-size
实例
$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});
7.jQuery和DOM对象互转【重点】
7.1 jQuery对象转成DOM对象** 两种转换方式将一个jQuery对象转换成DOM对象[index]和.get(index);
(1)jQuery对象是一个数据对象可以通过[index]的方法来得到相应的DOM对象。
如var v v v(“#v”) ; //jQuery对象
var v$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供通过.get(index)方法得到相应的DOM对象
如var v v v(“#v”); //jQuery对象
var v$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
7.2 DOM对象转成jQuery对象 对于已经是一个DOM对象只需要用 ( ) 把 D O M 对象包装起来就可以获得一个 j Q u e r y 对象了。 ()把DOM对象包装起来就可以获得一个jQuery对象了。 ()把DOM对象包装起来就可以获得一个jQuery对象了。(DOM对象)
如var vdocument.getElementById(“v”); //DOM对象
var v v v(v); //jQuery对象
转换后就可以任意使用jQuery的方法了。
通过以上方法可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是DOM对象才能使用DOM中的方法jQuery对象是不可以用DOM中的方法。
8.【掌握】表单处理
8.1 解决表单提交的冒泡问题**
!DOCTYPE htmlhtmlheadmeta charsetUTF-8titleTitle/titlescript srcjs/jquery.min.js charsetUTF-8/script/headbodyh1添加用户/h1form action# methodget idfrmID:input typetext idid nameidbrNAME:input typetext idname namenamebrgender:input typetext idgender namegenderbrSAL:input typetext idsal namesalbrinput typebutton iddoSubmit value提交input typebutton iddoReset value重置/form/bodyscript$(function () {$(#doSubmit).on(click, function () {console.log(doSubmit的点击事件被触发)// $(#frm).submit();})$(#doReset).on(click, function () {//通过js去重置 在jquery里面的表单对象没有reset()方法 原生的js里面的reset()方法$(#frm)[0].reset();})});/script/html
8.2 serializeArray()与serialize()的区别 serializeArray()返回一个JSON数组 里面是表单属性的name的属性值和value
serialize()返回的是一个 查询参数id1name2gender3sal4
9.掌握】jQuery each()方法
9.1 语法** $(selector).each(function(index,element))
9.2 案例
input typecheckbox namemusic value1 /爱你一万年br /input typecheckbox namemusic value2 /忘情水br /input typecheckbox namemusic value3 /天意br /input typecheckbox namemusic value4 /冰雨br /input typecheckbox namemusic value5 /成都br /input typecheckbox namemusic value6 /武汉br /input typecheckbox namemusic value7 /北京北京br /input typecheckbox namemusic value8 /海阔天空br /input typecheckbox namemusic value9 /真的爱你br /input typecheckbox namemusic value10 /光辉岁月br /input typecheckbox namemusic value11 /红日br /input typecheckbox namemusic value12 /小苹果br /9.3 循环JSON数组生成无刷新的table并能删除和添加
!DOCTYPE htmlhtmlheadmeta charsetUTF-8title01表单处理.html/title!--引入jquery--script src../js/jquery-3.6.0.js charsetUTF-8/script/headbodyh1添加用户/h1form iduserAddFrm action# methodgetID:input typetext nameidNAME:input typetext namenameSEX:input typeradio namesex checked value男男 input typeradio value女 namesex女SAL:input typetext namesalinput typebutton iddoSubmit value添加input typereset value重置/formhrh1用户列表/h1table iduserTable width100% border1 cellspacing3 cellpadding3 styleborder: 1px solid green/table/bodyscript//声明一个json数组的容器let users[{id:1,name:小明,sex:男,sal:5998.00},{id:2,name:小红,sex:女,sal:1998.00},{id:3,name:小丽,sex:女,sal:2998.00},{id:4,name:小芳,sex:女,sal:3998.00}]//数据初始化的方法function initTableData(){let userTable$(#userTable);let htmltrthID/ththNAME/ththSEX/ththSAL/thth操作/th/tr$.each(users,function (index,item){htmltrthitem.id/ththitem.name/ththitem.sex/ththitem.sal/ththinput typebutton οnclickdel(item.id) value删除/th/tr})userTable.html(html)}initTableData();//监听添加按钮的事件$(#doSubmit).click(function (){let userAddFrm$(#userAddFrm);let arraysuserAddFrm.serializeArray()let jsonObj{};$.each(arrays,function (index,item){jsonObj[item.name]item.value;})//把组装好的json对象放到users数组里面users.push(jsonObj);//刷新表格initTableData()})function del(id){//循环users找到id传入id这个对象再删除$.each(users,function (index,item){if(item.idparseInt(id)){//删除users.splice(index, 1);//刷新表格initTableData()return;}})}/script
