建设风景网站策划书seo咨询价格找推推蛙
目录
JS的第三方库
jQuery库
jQuery的页面加载方法
jQuery的选择器
jQuery的元素内容操作
jQuery的元素样式操作
jQuery的属性操作
以下皆已引入jQuery库
JS的第三方库
将常用的原生JS对DOM操作功能，通过JS方法的方式进行封装，并以独立的JS文件提供
使用时，只需要引入JS文件，即可使用封装的JS方法
+ jQuery
+ lodash
+ swiper
jQuery库
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!--jQuery:三方的用于简化DOM操作的极简库jquery.版本.min.js => 生产版本jquery.版本.js => 开发版本下载地址：https://jquery.com/--><script src="./jquery/jquery-3.7.1.js"></script><!-- jquery 库引入后，会在全局window对象中增加两个变量 window.$ 等同于 window.jQuerywindow.jQuery 等同于 window.$$ jquery的核心查询方法--><script>console.log(window);console.log(window.$);console.log(window.jQuery);console.log("============");console.log($);console.log(jQuery);</script>
</head>
<body><h1 id="title">h1元素</h1><script>// var obj = $(el);// el css 选择器// obj 被jquery重新包装的类数组对象，对象中记录的符合条件的元素// => jquery 对象 => 调用jquery方法var $h1 = $("#title");console.log($h1);// jquery 对象到 DOM对象的转换var h1Dom = $h1[0];console.log(h1Dom);</script>
</body>
</html>jQuery的页面加载方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery/jquery-3.7.1.js"></script><script>// 查询元素的前提：html标签完成加载var h1Dom = document.querySelector("#title");console.log(h1Dom); // nullvar $h1 = $("#title");console.log($h1); // jQuery空对象// 方法重载// : 同一个方法，因为传入的参数类型，格式，数量不同，提供不同的执行功能// 1. $("el") 查询元素 - 返回jquery对象// 2. $(function(){}) 监听window.onload事件// window.onload = function(){ }// $(document).ready(function(){}) 当页面标签加载完成后执行// document.addEventListener("DOMContentLoaded")// 3. $("<标签>") 将字符串标签转换为jQuery对象 => 元素创建// 等效于 document.createElement();// $("<标签 class='a'>内容</标签>") 创建标签的同时完成内容或属性的增加 // 4. $("el",其它jquery对象) 在指定的jquery对象元素内查询 el 选择器对应元素$(function(){// 页面加载完成var $title = $("#title");console.log($title);});$(document).ready(function(){// 页面标签加载完成var $title1 = $("#title");console.log($title1);});function createDiv(){// $("div") 基于标签查询// $("<div>") 创建元素并封装成jquery对象var $div = $("<div>");console.log($div);var $div1 = $("<div>内容</div>");console.log($div1);}function queryLi(){// var $li = $("#abc li");var $ul = $("#abc");var $li = $("li",$ul);console.log($li);}</script>
</head>
<body><h1 id="title">标题</h1><input type="button" value="创建div元素" onclick="createDiv()"><input type="button" value="查询#abc中li" onclick="queryLi()"><hr><ul id="abc"><li>abc的li</li></ul><ol><li>ol的li</li></ol>
</body>
</html>jQuery的选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body><ul id="app"><li>元素1</li><li>元素2</li><li>元素3</li><li>元素4</li><li class="abc">元素5</li><li>元素6</li><li class="abc">元素7</li><li>元素8</li><li class="abc">元素9</li><li>元素10</li></ul><form id="form"><input type="text"><input type="date"><input type="radio" name="" id=""><input type="checkbox" name="" id=""></form><script>// 查询一个元素，还是查询多个元素都是使用 $(el)var $a = $("#app");console.log($a);var $b = $("li");console.log($b);var $c = $(".abc");console.log($c);var $d = $("#app .abc");console.log($d);var $e = $("#app li:first");console.log($e);// 查询 id=app 内部的后代li元素，但不包含class=abcvar $f = $("#app li:not(.abc)");console.log($f);var $radio = $("#form input[type=radio]");console.log($radio);var $radio1 = $("#form input:radio");console.log($radio1);</script>
</body>
</html>jQuery的元素内容操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{border: 1px solid black;min-height: 100px;}</style><script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body><div class="box" id="a">原始内容<span>span标签</span></div><div class="box" id="b"></div><div class="box" id="c"></div><input type="button" value="操作元素内容" onclick="testContent()"><script>// jquery 中提供：元素内容操作，属性操作 方法都存在如下两种重载功能// 1. 不传递参数 表示 获取对应的值// 2. 传递参数 表示 设置对应值(赋值)function testContent(){var $a = $("#a");// jquery对象.html() 取值 => innerHTMLvar text = $a.html();console.log(text);// jquery对象.html(字符串参数) 赋值[覆盖] => innerHTML=字符串操作var $b = $("#b");// $b.html("文本字符");$b.html("<span style='color:red;'>文本字符</span>");// jqueryObj.text() 取值 => innerText// jqueryObj.text(sting) 赋值 => textContent=值var text1 = $a.text();console.log(text1);var $c = $("#c");$c.text("aaaaaa\nbbbbbb\ncccccc");}</script><hr><ul id="list"><li>原始内容1</li><li>原始内容2</li><li>原始内容3</li><li>原始内容4</li><li>原始内容5</li><li>原始内容6</li><li>原始内容7</li><li>原始内容8</li></ul><input type="button" value="对第一个li原始进行内容获取和修改" onclick="editLi()"><input type="button" value="为所有的li更新内容" onclick="updateLi()"><script>function editLi(){// var $li = $("#list li:first");// console.log( $li.html() );// $li.html("新内容");// console.log( $li.html() );// jquery 第一特性，链式语法var text = $("#list li:first").html();console.log(text);$("#list li:first").html("新内容");}function updateLi(){var $list = $("#list li");console.log($list);// jquery对象中，由多个DOM元素组成，！！取值！！ 操作只会获取第一个元素的内容(下标0的内容)var text = $list.html();console.log(text);// jquery 第二特性 : 内置循环(内置迭代器)// 查询结果是由多个DOM元素组成jquery对象// 如果此时对jquery对象完成是 ！！赋值！！ 相关的操作// 会自动启动内置循环，将该对象中的所有DOM元素都执行当前操作$list.html("新内容");}</script>
</body>
</html>jQuery的元素样式操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.fc{color: red!important;}#a{border: 1px solid black;}.border{border: 1px solid black;}.bc{background-color: #ccc;}</style><script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body><!-- 行内样式操作 --><p class="fc" id="a" style="color:blue;font-size: 20px;">行内样式操作</p><input type="button" value="样式读取" onclick="readStyle()"><script>// jqObj.css("行内样式名") 读取元素行内对于的样式值// jquery在封装函数对元素样式进行统一处理// 可以通过 该方法 获取元素行内样式,也可以获取 独立样式// 当样式产生优先级覆盖问题时,获取最高优先级的样式function readStyle(){var color = $("#a").css("color");console.log(color);var size = $("#a").css("font-size");console.log(size);var border = $("#a").css("border");console.log(border);// 冷门用法var all = $("#a").css( ["color","font-size"] );console.log( all );console.log( all.color );// console.log( all.font-size ); // 取不到console.log( all["font-size"] );}</script><p id="b">行内样式修改</p><p class="p">行内样式修改</p><p class="p">行内样式修改</p><p class="p">行内样式修改</p><p class="p">行内样式修改</p><input type="button" value="样式修改" onclick="setStyle()"><script>// jqObj.css(样式名,样式合法值) 行内样式设置function setStyle(){// $("#b").css("color","blue");// $("#b").css("font-size","20px");// 赋值操作可以链式调用$("#b").css("color","blue").css("font-size","30px");$(".p").css("color","blue").css("font-size","30px");}</script><!-- class样式操作 --><p id="c">class的添加</p><input type="button" value="添加class样式" onclick="addClassFun()"><script>function addClassFun(){$("#c").addClass("border bc");}</script><p class="border bc" id="d">class的删除</p><input type="button" value="class的删除" onclick="removeClassFun()"><script>function removeClassFun(){$("#d").removeClass("bc");}</script><p class="border bc" id="e">class的切换</p><input type="button" value="class的切换" onclick="toggleClassFun()"><script>function toggleClassFun(){$("#e").toggleClass("bc")}</script>
</body>
</html>jQuery的属性操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery/jquery-3.7.1.js"></script>
</head>
<body><p id="a" class="border fc" chw="自定义属性">属性操作</p><!-- 标签事件绑定只能绑定全局的方法 --><input type="button" value="属性操作" onclick="editProp()"><script>// jqObj.prop(标签属性名) 取值[是w3c规范属性]// jqObj.attr(标签属性名) 取值[自定义属性]function editProp(){var arg1 = $("#a").prop("class");console.log(arg1);var arg2 = $("#a").attr("chw");console.log(arg2);}</script><hr><p id="b" class="border fc" chw="自定义属性">属性操作</p><input type="button" value="属性操作" onclick="editProp2()"><script>// jqObj.prop(标签属性名,属性值) 赋值[是w3c规范属性]// jqObj.attr(标签属性名,属性值) 赋值[自定义属性]function editProp2(){$("#b").prop("class","abc fs");$("#b").attr("chw","新值");$("#b").attr("ba","博昂");}</script><hr><p id="c" class="border fc" chw="自定义属性">属性操作</p><input type="button" value="属性操作" onclick="editProp3()"><script>// jqObj.removeProp(标签属性名) 赋值[是w3c规范属性]// jqObj.removeAttr(标签属性名) 赋值[自定义属性]function editProp3(){$("#c").removeProp("class");$("#c").removeAttr("chw");}</script><hr><div id="box"><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="checkbox"></div><input type="button" value="切换选中状态" onclick="changeStatus()"><script>var flag = false;function changeStatus(){flag = !flag;// $("#box input:checkbox").prop("checked",true);$("#box input:checkbox").prop("checked",flag);}</script><hr><!-- 页面方法绑定 可以通过关键字接收特殊参数+ event 事件对象+ this 当前元素的DOM对象--><input id="box2All" type="checkbox" onchange="changeStatus2( this.checked )"><div id="box2"><input type="checkbox" onchange="checkAll()"><input type="checkbox" onchange="checkAll()"><input type="checkbox" onchange="checkAll()"><input type="checkbox" onchange="checkAll()"></div><script>function changeStatus2(flag){console.log(flag);$("#box2 input:checkbox").prop("checked",flag)}function checkAll(){// 都需要将所有 box2 中的子元素的状态进行获取,判断是否都是true// jquery取值只取第一个元素 => 下述操作是错误的// var flag = $("#box2 input:checkbox").prop("checked");// console.log(flag);var $checkboxs = $("#box2 input:checkbox");var flag = true;for (var i = 0; i < $checkboxs.length; i++) {// console.log( $checkboxs[i] ); // DOM对象var checkboxDom = $checkboxs[i];// console.log( checkboxDom.checked );if( !checkboxDom.checked ){flag = false;break;}}$("#box2All").prop("checked",flag);}</script><hr><input id="box3All" type="checkbox" onchange="changeStatus3( this.checked )"><div id="box3"><input type="checkbox" onchange="checkAll()"><input type="checkbox" onchange="checkAll()"><input type="checkbox" onchange="checkAll()"><input type="checkbox" onchange="checkAll()"><input type="checkbox" onchange="checkAll()"><input type="checkbox" onchange="checkAll()"><input type="checkbox" onchange="checkAll()"><input type="checkbox" onchange="checkAll()"></div><script>function changeStatus3(flag){console.log(flag);$("#box3 input:checkbox").prop("checked",flag)}function checkAll(){// :checked 选择 匹配所有勾选的复选框// var $checks =$("#box3 input:checkbox:checked");// console.log( $checks );// console.log( $checks.length );// :not(:checked) 选择 匹配所有未勾选的复选框var $checks =$("#box3 input:checkbox:not(:checked)");console.log( $checks );console.log( $checks.length );$("#box3All").prop("checked",$checks.length==0);}</script>
</body>
</html>