前端开发:JQuery
Posted neozheng
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发:JQuery相关的知识,希望对你有一定的参考价值。
JQuery
DOM文档加载的步骤:
1. 解析html结构;
2. 加载外部脚本和样式;
3. 解析并执行脚本代码;
4. DOM树构建完成;
5. 加载图片等外部文件;
6. 页面加载完成;
JS和JQuery的区别:
1.执行时间不同:window.onload必须等到页面内包括图片展览在内的所有元素加载完成后才能执行;$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕
2. 编写个数不同: window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个;$(document).ready()可以同时编写多个,并且都可以执行
3. 简化方式不同: window.onload没有简写;$(document).ready(function(){})可以简写为: $(function(){})
JQuery的引入方式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jqury文件的引入</title> <script type="text/javascript"> // 如果不写window.onload() 代码的执行顺序是从上到下,写了之后浏览器会在所有元素加载完成后再执行window.onload()中的内容(即上面的第6步完成后再执行window.onload()中的内容) </script> </head> <body> </body> <script src="./jquery-3.3.1.slim.js"></script> <!-- 在调用jQuery之前,必须要先把jQuery引入 --> <script type="text/javascript"> console.log($); // 如果没有引入jQuery: $ is not defined // jquery是JS的一个库文件,这个库会抛出构造函数或者对象,如果是构造函数,那么使用new关键字创建对象,如果是对象直接调用属性和方法 // 书写jquery的方式:入口函数(这是个回调函数) // $(document).ready()是DOM结构绘制完成后执行(即上面的第4步完成后) $(document).ready(function(){ alert(1); }) $(function(){ alert(2); }) </script> </html>
jquery基础选择器:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery基础选择器</title> </head> <body> <ul> <li id="brother">哈哈1</li> <li><a href="#">哈哈2</a></li> <li class="li3">哈哈3</li> <li>哈哈4</li> <li>哈哈5</li> </ul> </body> <script src="jquery-3.3.1.slim.js"></script> <script type="text/javascript"> // 使用JQuery的时候,要有入口函数 $(document).ready(function(){ // 基础选择器 // 1.id选择器: $("#id") $("#brother").css("color","red"); // 2.标签选择器: $("标签") $("a").css({"color":"blue","font-size":"24px"}); // 设置多个值,使用对象 key:value的形式 // 3.类选择器: $(".classname") $(".li3").css("background","green"); // 通配符选择器: $("*") }) </script> </html>
jquery的层级选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>层级选择器</title> </head> <body> <div id="box"> <p id="brother">天王盖地虎</p> <p>提莫炖蘑菇</p> <p>宝塔镇河妖</p> <p>蘑菇放辣椒</p> <div id="box2"> <p>我是你老母</p> </div> </div> </body> <script src="./jquery-3.3.1.slim.js"></script> <script type="text/javascript"> $(document).ready(function(){ // 1. 后代选择器 $("#box p").css("color","red"); // 2. 子代选择器 $("#box2>p").css("color","green"); // 3. 毗邻选择器:匹配所有紧接着选定元素的下一个兄弟 + $("#brother+p").css("font-size","24px"); // 4. 兄弟选择器 ~ $("#brother~p").css("background","purple"); // 5. 获取第一个元素 $("p:first").css("font-size","50px"); // 6. 获取最后一个元素 $("p:last").css("font-size","40px"); // 7. 获取索引为2的元素 $("p:eq(2)").css("font-size","60px"); }) </script> </html>
基本过滤选择器:
<ul> <li>哈哈哈</li> <li>666</li> <li>天王盖地虎</li> <li>小鸡炖蘑菇</li> </ul> <script src="jquery-3.3.1.slim.js"></script> <script type="text/javascript"> // 1. 获取第一个: $("li:first") ----- 获取最后一个: $("li:last") $("li:first").text("真的吗?") $("li:last").html("我是最后一个元素?") // 相当于 innerText和innerHTML // 2. odd: 匹配所有索引值为奇数的元素,从0开始计数 $("li:odd") // 3. even: 匹配所有索引值为偶数的元素,从0开始计数 $("li:even") // 4. eq(index):获取给定索引值的元素,从0开始计数 (用的最多) $("li:eq(1)") // 5. gt(index): 匹配所有大于给定位索引值的元素 $("li:gt(1)") // 6. lt(index):匹配所有小于给定索引值的元素 </script>
属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> </head> <body> <div id="box"> <h2 class="title">属性元素器</h2> <p class="p1">我是一个段落</p> <ul> <li id="li1">分手应该体面</li> <li class="what" id="li2">分手应该体面</li> <li class="what">分手应该体面</li> <li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type=\'text\' value="1" checked="checked"> <input name="username1111" type=\'text\' value="1"> <input name="username2222" type=\'text\' value="1"> <input name="username3333" type=\'text\' value="1"> <button class="btn-default">按钮1</button> <button class="btn-info">按钮1</button> <button class="btn-success">按钮1</button> <button class="btn-danger">按钮1</button> </form> </div> </body> <script src="jquery-3.3.1.slim.js"></script> <script type="text/javascript"> $(function () { // 标签名[属性名]:查找所有含有指定属性名的标签元素 $("li[id]").css("color","red"); // 标签名[attr=value]:匹配给定的属性是某个特定值的元素 $("li[class=what]").css("font-size","30px"); // 标签名[attr!=value]:匹配所有不含有指定属性、或者属性不等于特定值的元素 $("li[class!=what]").css("font-size","50px"); // 属性值不等于what的元素(没有class属性的li就是 class="") // [attr^=what]:匹配给定的属性是以某些值开头的元素 $("input[name^=username]").css("background","pink"); // [attr$=what]:匹配给定的属性是以某些值结尾的元素 $("input[name$=222]").css("background","green"); // [attr*=what]:匹配给定的属性包含某些值的元素 $("button[class*=btn]").css("background","blue"); }) </script> </html>
筛选选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>筛选选择器</title> </head> <body> <div id="box"> <p class="p1"> <span>我是第一个span标签</span> <span>我是第二个span标签</span> <span>我是第三个span标签</span> </p> <button>按钮</button> </div> <ul> <li class="list">2</li> <li>3</li> <li>4</li25个可遇不可求的jQuery插件