徐汇苏州网站建设,网站开发甲方需求文档,谁会写网站代码,精品网文1. jQuery介绍 官方网站 : https://jquery.com jQuery 是一个 JavaScript 库 。极大地简化了 JavaScript 编程#xff0c;例如 JS 原生代码几十行 实现的功 能#xff0c; jQuery 可能一两行就可以实现#xff0c;因此得到前端程序猿广泛应用。 发展至今#xff0…1. jQuery介绍 官方网站 : https://jquery.com jQuery 是一个 JavaScript 库 。极大地简化了 JavaScript 编程例如 JS 原生代码几十行 实现的功 能 jQuery 可能一两行就可以实现因此得到前端程序猿广泛应用。 发展至今主要有三个大版本 : 1.x:常用版本 2.x3.x:除非特殊要求一般用的少 现在都使用vue这些这些框架其实就是帮你操作了dom元素不需要你去关心对dom元素的操作了。 你只需要去关心这个页面长什么样写一些组件库也给你封装了。再发发请求获取数据渲染到里面就行了。 2. 基本使用 cdn 导入方式 headscript 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(): 对元素的操作 这边定义了两个button第一个给js使用的第二个个jQuery使用的。js使用还需要获取其dom元素然后再去.click再给其匿名函数去实现。 jQuery就直接$符号将其选择器添进来直接再来.click完事最后将方法传进去。这样看起来简便不少。 !DOCTYPE html
html
headmeta charsetUTF-8title文档的标题/titlescript 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/buttonscript typetext/javascript// js实现var x document.getElementById(btn1)x.onclick function () {alert(亲有什么可以帮助你的? js)}// jquery实现$(#btn2).click(function () {alert(亲有什么可以帮助你的?jquery)}) /script
/body
/html 3. 选择器 选择器介绍 !DOCTYPE html
html
headmeta charsetUTF-8title文档的标题/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
bodyh2在HTML中如何使用jQuery/h2button classbtn点击/buttonbutton idbtn点击/buttonscript typetext/javascript// 标签选择器$(h2).click(function(){alert(你好标签)}) //类选择器$(.btn).click(function(){alert(你好类)})//id选择器$(#btn).click(function() {alert(你好,id)})/script/body
/html 4. 操作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
/head
bodyp iddemo这是一个段落。/pbutton idhide typebutton隐藏/buttonbutton idshow typebutton显示/buttonbutton idtoggle typebutton切换/buttonscript typetext/javascript$(#hide).click(function () {$(p).hide();})$(#show).click(function () {$(p).show();})$(#toggle).click(function () {$(p).toggle();})/script/body
/html 获取与设置内容 : text() 设置或返回所选元素的文本内容 html() 设置或返回所选元素的HTML内容 val() 设置或返回表单字段的值
!DOCTYPE html
html
headmeta charsetUTF-8title文档的标题/titlescript typetext/javascript srchttps://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js/script
/head
bodyp idtxt这是一个b段落/b。/pbutton typebutton idbtn1显示文本/buttonbutton typebutton idbtn2显示HTML/buttonp 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
headmeta charsetUTF-8title文档的标题/titlescript 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() 对被选元素进行添加 / 删除类样式的切换操作 代码示例 后面学到组件库的时候它其实是帮你封装好好的组件比如form表单组件和table组件它的样式其实也是通过底层的这种方式去实现的它全部帮你封装好了。
