箱包东莞网站建设,free wordpress template,直播间搭建,苏州做网站优化jQuery介绍 官方网站: https://jquery.com jQuery 是一个 JavaScript 库 。极大地简化了 JavaScript 编程#xff0c;例如 JS 原生代码几十行 实现的功 能#xff0c; jQuery 可能一两行就可以实现#xff0c;因此得到前端程序猿广泛应用。#xff08;现在处在比较边… jQuery介绍 官方网站: https://jquery.com jQuery 是一个 JavaScript 库 。极大地简化了 JavaScript 编程例如 JS 原生代码几十行 实现的功 能 jQuery 可能一两行就可以实现因此得到前端程序猿广泛应用。现在处在比较边缘的状态 发展至今主要有三个大版本 : 1.x: 常用版本  2.x 3.x: 除非特殊要求一般用的少 基本使用 cdn导入方式 head script typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script /headbodyscript typetext/javascript// jquery代码/script /body 基础语法是 :$(selector).action() $:代表jQuery本身 (selector):选择器查找HTML元素 action():对元素的操作 js先要去获取dom元素再去click之后给其匿名函数。jquery就简单了直接将$符号填进来直接再去点click完事。 代码示例按钮实现 !DOCTYPE html html head meta charsetUTF-8 title文档的标题/title !-- link hrefmain.css typetext/css relstylesheet/ -- script typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script /head bodybutton typebutton idbtn1点我1/buttonbutton typebutton idbtn2点我2/button script typetext/javascript// js实现var x document.getElementById(btn1)x.onclick function () {alert(亲有什么可以帮助你的?)}// jquery实现$(#btn2).click(function () {alert(亲有什么可以帮助你的?) }) /script /body /html 选择器 代码示例 !DOCTYPE html html head meta charsetUTF-8 title文档的标题/title !-- link hrefmain.css typetext/css relstylesheet/ -- script typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script /head body h2在HTML中如何使用jquery/h2 button classbtn点击/button button idbtn点击1/button script typetext/javascript// 标签选择器$(h2).click(function() {alert(你好标签) })//类选择器$(.btn).click(function() {alert(你好类)})//id选择器$(#btn).click(function() {alert(你好id) }) /script /body /html 操作HTML 隐藏和显示元素: hide() :隐藏某个元素 show() :显示某个元素 toggle() :hide()和show()方法之间切换 !DOCTYPE html html headmeta charsetUTF-8title首页/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script /headbodypxxxxxxxxxxxx/pbutton idhide隐藏/buttonbutton idshow显示/buttonbutton idtoggle切换/buttonscript typetext/javascript$(#hide).click(function(){$(p).hide()})$(#show).click(function(){$(p).show()})$(#toggle).click(function(){$(p).toggle()})/script/body/html 获取与设置内容 : text() 设置或返回所选元素的文本内容  text标签是不会获取到html元素的html() 设置或返回所选元素的HTML内容 val() 设置或返回表单字段的值 下面其实就是先去获取text的内容然后将内容放到这个demo选择器里面去。  !DOCTYPE html html head meta charsetUTF-8 title文档的标题/title !-- link hrefmain.css typetext/css relstylesheet/ -- script typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script /head bodyp idtxt这是一个b段落/b。/p button typebutton idbtn1显示文本/button button typebutton idbtn2显示HTML/button p iddemo/pscript typetext/javascript$(#btn1).click(function () {x $(#txt).text();console.log(x)$(#demo).text(x).css(color,red) //不会解析b标签})$(#btn2).click(function () {x $(#txt).html(); //获取console.log(x) $(#demo).html(x).css(color,red) //会解析b标签.html()设置}) /script/body /html !DOCTYPE html html head meta charsetUTF-8 title文档的标题/title !-- link hrefmain.css typetext/css relstylesheet/ -- script typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script /head bodyh1欢迎访问运维管理系统/h1用户名:input typetext iduname nameusernamebr密码:input typetext idpwd namepasswordbrbutton typebutton idbtn显示输入内容/buttonp iddemo/pscript typetext/javascript$(#btn).click(function () {x $(#uname).val();y $(#pwd).val();$(#demo).text(x y).css(color,red) }) /script/body /html 设置 CSS 样式 : css() 设置或返回样式属性 ( 键值 ) addClass() 向被选元素添加一个或多个类样式 removeClass() 从被选元素中删除一个或多个类样式 toggleClass() 对被选元素进行添加 / 删除类样式的切换操作 !DOCTYPE html html head meta charsetUTF-8 title文档的标题/title !-- link hrefmain.css typetext/css relstylesheet/ -- script typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script /head bodydiv iddemop这是一个段落/p/divbutton idbtn添加样式/buttonscript typetext/javascript$(#btn).click(function () {$(#demo p).css(color, red)// $(#demo p).css({color:red,font-size: 30px})// $(#demo).addClass(cls)// $(#demo).removeClass(cls)})/script/body /html