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> 专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停升级最新的教程和学习技巧（从零基础开始到前台项目实战教程，学习工具，全栈开发学习路线以及规划） 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>说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » jq初始,选择器,事件,内容操作,样式操作
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » jq初始,选择器,事件,内容操作,样式操作
