jq初始,选择器,事件,内容操作,样式操作
程序员文章站
2022-07-11 18:38:27
`jq操作页面文档`http://jquery.cuishifeng.cn/ jq初始 jq选择器 jq事件 jq内容操作 jq样式操作 ......
jq操作页面文档
jq初始
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jq初始</title> </head> <body> <h1>jquery就是js的工具库 - 一系列功能的集合体</h1> <h2>jq内部语法采用的就是原生js</h2> <h2>jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2> <h2>jq就是优化了原生js鱼页面进行交互的逻辑</h2> </body> <!-- cdn 连接 外部资源 --> <!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>--> <!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>--> <script src="js/jquery-3.4.1.js"></script> <script> // jquery对象 console.log(jquery); console.log($); console.log(owen); console.log($('h1')); $('h1').click(function () { $('h1').css('color', 'red') }) </script> </html>
jq选择器
<!doctype html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <div id="d" class="box"></div> <input type="text" id="d2" class="box" /> <h3 class="h3"></h3> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> // jq选择器:$('css选择器语法') let $div = $('#d'); console.log($div); let $boxs = $('.box'); console.log($boxs); // jq对象如何转换为js对象 - jq对象可以理解为装有js对象的数组 // 就是通过索引取值 let div = $div[0]; console.log(div); console.log(document.getelementsbyclassname('box')[0]); console.log(document.queryselectorall('.box')[0]); console.log($div[0]); console.log($boxs[0]); console.log($boxs[1]); // js如何转换为jq对象 let $newdiv = $(div); console.log($newdiv); </script> </html>
jq事件
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jq事件</title> <style> .box { width: 200px; height: 200px; background-color: orange; margin-bottom: 10px; } </style> </head> <body> <div class="box">1</div> <div class="box">2</div> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> let $box = $('.box'); // $box.click(function () { // // this就是被点击的标签 - js对象 // console.log(this); // console.log($(this)); // }); // jq对象可以完成事件的批量绑定 $box.on('click', function () { console.log(this); console.log(this.innertext); console.log($(this)); }); // js必须手动循环 绑定 // let boxs = document.queryselectorall('.box'); // for (box of boxs) { // box.onclick = function () { // console.log(this); // console.log($(this)); // } // } </script> </html>
jq内容操作
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jq内容操作</title> </head> <body> <h1 class="title">标题</h1> <input type="text" class="title"> <button class="btn">改标题</button> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> // js - jsobj.value | jsobj.innertext | jsobj.innerhtml // jq - jqobj.val() | jqobj.text() | jqobj.html() // 取值:jqobj.text() | jqobj.text('新值') | jqobj.text(fn) let $btn = $('.btn'); let $inp = $('input.title'); let $h1 = $('h1.title'); $btn.click(function () { let val = $inp.val(); if (val) { // $h1.text(val); $h1.html(val); $inp.val(function (index, oldvalue) { // return oldvalue.touppercase() return '' }) } }) </script> </html>
jq样式操作
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jq样式操作</title> <style> .box { /*width: 200px;*/ height: 200px; background-color: pink; } .sup-box { /*width: 400px;*/ height: 100px; background-color: orange; border-radius: 50%; line-height: 100px; text-align: center; color: red; } </style> </head> <body> <div class="box" style="width: 600px">文本</div> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> let $box = $('.box'); $box.click(function () { // 获取 let width = $box.css('width'); console.log(width); // 单个设置 $box.css('background-color', function (i, o) { console.log(o); return 'red' }); // 多条设置 $box.css({ width: '100px', height: '100px', backgroundcolor: 'blue', }); if ($box.hasclass('sup-box')) { $box.removeclass('sup-box') } else { $box.addclass(function (i, o) { console.log(i, o); return 'sup-box' }) } }) </script> <script> // localstorage['name'] = 'owen'; // sessionstorage['age'] = 18; </script> </html>
上一篇: JS实现全景图效果360度旋转
下一篇: 点此处秒后立即下载
推荐阅读
-
JQ选择器 DOM操作 事件处理
-
jq初始,选择器,事件,内容操作,样式操作
-
优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发
-
优雅的获取表单元素、dom树的遍历与常用属性、dom元素的增删改操作、js操作元素内容的几个常用方法、元素的dataset对象、获取元素的计算样式、元素的classList 对象常用方法、事件的添加与派发
-
表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象,获取元素计算样式,classList 对象常用方法 ,事件的添加与派发
-
表单元素获取,dom树的遍历与常用属性,dom元素的增删改, js操作元素内容,留言板实例,dataset对象,获取元素计算样式,classList 对象常用方法 ,事件的添加与派发