上海建设工程造价网站,wordpress wplms,网站做线上销售,中国最新新闻JQuery基本介绍和使用方法
W3C 标准给我们提供了⼀系列的函数, 让我们可以操作:
⽹⻚内容⽹⻚结构⽹⻚样式
但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们可以使⽤JQuery来操作⻚⾯对象.
jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于20…JQuery基本介绍和使用方法
W3C 标准给我们提供了⼀系列的函数, 让我们可以操作:
⽹⻚内容⽹⻚结构⽹⻚样式
但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们可以使⽤JQuery来操作⻚⾯对象.
jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于2006年发布. 它封装JavaScript常⽤的功能代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素从⽽减少了开发⼈员编写的代码量提⾼了开发效率,
它提供的 API 易于使⽤且兼容众多浏览器这让诸如 HTML ⽂档遍历和操作、事件处理、动画和 Ajax 操作更加简单. JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件使开发⼈员能够更⽅便地处理各种交互⾏为.
引入依赖
使⽤JQuery需要先引⼊对应的库
在使⽤jQuery CDN时只需要在HTML⽂档中加⼊如下代码
script srchttps://code.jquery.com/jquery-3.7.1.min.js/script参考地址jQuery CDN Jquery官⽅共提供了4种类型的JQuery库 uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢) minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐) slim: 精简瘦⾝版, 没有Ajax和⼀些特效 slim minified : slim 的压缩版 开发时, 建议把JQuery库下载到本地, 放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险.
下载⽅式:
通过浏览器访问上述连接右键 - 另存为… 保存到本地, 放在项⽬中即可.
也可以从其他CDN上下载引⽤JQuery
⽐如
script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/scrjQuery语法
jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作
基础语法 $(selector).action()$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素. Selector 选择器, ⽤来查询和查找 HTML 元素 action 操作, 执⾏对元素的操作
JQuery 的代码通常都写在 document ready 函数中 document整个⽂档对象, ⼀个⻚⾯就是⼀个⽂档对象, 使⽤document表⽰. 这是为了防⽌⽂档在完全加载就绪之前运⾏ jQuery 代码即在⽂档加载完成后才可以对⻚⾯进⾏操作。
如果在⽂档没有完全加载之前就运⾏函数操作可能失败
$(document).ready(function(){// jQuery functions go here
})示例
button typebutton点我消失/button
script srchttps://code.jquery.com/jquery-3.7.1.min.js/script
script$(document).ready(function(){$(button).click(function(){$(this).hide();});
});/script给按钮添加了click事件,点击后元素消失. 简洁写法: $(function(){ // jQuery functions go here });jQuery选择器
我们通过JQuery选择器来选择⼀些HTML元素.然后对元素进⾏操作.
JQuery选择器基于已经存在的CSS选择器,除此之外,还有⼀些⾃定义的选择器.
jQuery中所有选择器都以$ 开头$().
语法描述$(“*”)选取所有元素$(this)选取当前 HTML 元素$(“p”)所有 元素$(“p:first”)选取第一个 元素$(“p:last”)最后一个 元素$(“.box”)所有 class“box” 的元素$(“#box”)id“box” 的元素$(“.intro.demo”)所有 class“intro” 且 class“demo” 的元素$(“p.intro”)选取 class 为 intro 的 元素$(“ul li:first”)选取第一个 元素的第一个 元素$(“:input”)所有 元素$(“:text”)所有 type“text” 的 元素$(“:checkbox”)所有 type“checkbox” 的 元素 jQuery事件
JS要构建动态⻚⾯,就需要感知到⽤⼾的⾏为.
⽤⼾对于⻚⾯的⼀些操作(点击,选择,修改等)操作都会在浏览器中产⽣⼀个个事件,被JS获取到,从⽽进⾏更复杂的交互操作. 浏览器就是⼀个哨兵,在侦查敌情(⽤⼾⾏为).⼀旦⽤⼾有反应(触发具体动作),哨兵就会点燃烽⽕台的狼烟(事件),后⽅就可以根据狼烟来决定下⼀步的对敌策略. 事件由三部分组成
事件源:哪个元素触发的事件类型:是点击,选中,还是修改?事件处理程序:进⼀步如何处理.往往是⼀个回调函数.
例如:某个元素的点击事件:
$(p).click(function(){//动作发⽣后执⾏的代码
});常⻅的事件有:
事件代码文档就绪事件(完成加载)$(document).ready(function)点击事件$(selector).click(function)双击事件$(selector).dblclick(function)元素的值发生改变$(selector).change(function)鼠标悬停事件$(selector).mouseover(function)
操作元素
获取/设置元素内容
三个简单的获取元素内容的JQuery⽅法
JQuery方法说明text()设置或返回所选元素的文本内容html()设置或返回所选元素的内容包括 HTML 标签val()设置或返回表单字段的值
**这三个⽅法即可以获取元素的内容,⼜可以设置元素的内容. ** 有参数时,就进⾏元素的值设置 没有参数时,就进⾏元素内容的获取
代码示例
获取元素内容
div idtestspan你好/span/divinput typetext valuehelloscript$(document).ready(function () {var html $(#test).html();console.log(html内容为:html);var text $(#test).text();console.log(⽂本内容为:text);var inputVal $(input).val();console.log(inputVal);});
/script
设置元素内容
div idtest/div
div idtest2/div
input typetext valuescript$(document).ready(function () {$(#test).html(h1设置html/h1);$(#test2).text(h1设置text/h1);$(input).val(设置内容);
});
/script
获取/设置元素属性
JQuery attr()⽅法⽤于获取属性值.
代码示例
获取元素属性
pa hrefhttps://www.bitejiuyeke.com/index idbite小明/a/pscript$(function(){var href $(p a).attr(href)console.log(href);
});
/script设置元素属性
pa hrefhttps://www.bitejiuyeke.com/index idbite小明/a/pscript$(function(){$(p a).attr(href,baidu.com)console.log($(p a).attr(href));
});
/script
获取/返回css属性
css()⽅法设置或返回被选元素的⼀个或多个样式属性
代码⽰例
获取元素属性
div stylefont-size: 36px;我是⼀个⽂本/divscript$(function(){var fontSize $(div).css(font-size);console.log(fontSize);
});
/script
设置元素属性
div stylefont-size: 36px;我是⼀个⽂本/divscript$(function(){$(div).css(font-size,24px);
});
/script
添加元素
添加HTML内容
append():在被选元素的结尾插⼊内容prepend():在被选元素的开头插⼊内容after():在被选元素之后插⼊内容before():在被选元素之前插⼊内容
olliList item 1/liliList item 2/liliList item 3/li
/ol
img srcpic/rose.jpgscript$(function () {$(ol).append(liappend/li);$(ol).prepend(liprepend/li);$(img).before(图⽚前插⼊);$(img).after(图⽚后插⼊);
});
/script
删除元素
删除元素和内容⼀般使⽤以下两个jQuery⽅法
remove():删除被选元素及其⼦元素empty():删除被选元素的⼦元素。
代码示例
删除被选元素及其子元素
div iddiv1我是⼀个div/div
button删除 div 元素/buttonscript$(function () {$(button).click(function(){$(#div1).remove();});
});
/script
删除被选元素的子元素
olliList item 1/liliList item 2/liliList item 3/li
/ol
button删除列表元素/buttonscript$(function () {$(button).click(function(){$(ol).empty();});
});
/script{ $(‘button’).click(function(){ $(‘#div1’).remove(); }); }); **删除被选元素的子元素**javascript
olliList item 1/liliList item 2/liliList item 3/li
/ol
button删除列表元素/buttonscript$(function () {$(button).click(function(){$(ol).empty();});
});
/script
