2. 技术
    3. Jquery的笔记整理

    Jquery的笔记整理

    技术2025-08-04  15

    Jquery简介

    使用js完成对网页的操作，代码的书写量比较大。js中对网页操作提供的方式过 于简单，造成获取和操作HTML元素对象过于麻烦。 那么我们就使用Jquery来解决这个问题！！ 其实jQuery就是讲常用的js操作封装了起来。jQuery是js的一个框架，jQuery本质上还是js，基本语法和js一致。将js的DOM操作重新封装 整合了。

    Jquery的封装原理

    <html> <head> <title>jquery的封装原理</title> <meta charset="UTF-8"/> <!--引入外部声明的js文件--> <script src="js/my.js" type="text/javascript" charset="utf-8"></script> <!--声明js代码域--> <script type="text/javascript"> function test(){ alert("我是test"); } var bjsxt=123; //闭包原理:在全局区中不能够获取函数体内的数据。使用更大作用域的变量来记录小作用域变量的值。 function testA(){ function test2(){ test2.name="张三"; var n=999; alert(bjsxt); return n; } return test2; } </script> </head> <body> <h3>jquery的封装原理</h3> <hr /> <input type="button" name="" id="" value="测试test" onclick="bjsxt.test()"/> <ul> <li>1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。</li> <li>2、使用对象封装，将代码封装到对象中.但是对象如果被覆盖，则全部失效，风险极高。</li> <li>3、使用工厂模式,将代码进行封装，但是并没有解决问题</li> <li>4、将封装的函数名字去除，避免覆盖。但是函数没有办法调用了。</li> <li>5、匿名自调用，可以在页面加载的时候调用一次。但是不能重复调用，并且数据没有办法获取</li> <li>6、使用闭包,将数据一次性挂载到window对象下</li> </ul> </body> </html>

    Jquery的选择器

    <html> <head> <title>jquery的选择器</title> <meta charset="UTF-8"/> <!-- jquery的选择器学习： 基本选择器 id选择器 标签选择器 类选择器 组合选择器 层级选择器 简单选择器 内容选择器 可见性选择器 属性选择器 子元素选择器 表单选择器 注意： jQuery中选择器获取的是存储了HTML元素对象的数组。 jquery获取的元素对象不能够直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容。 jquery对我们提供了多种多样的选择器来选择需要操作的HTML元素对象。 --> <!--引入jQuery文件--> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <!--声明js代码域--> <script type="text/javascript"> //id选择器 function testId(){ //jquery--id var inp=$("#uname"); alert(inp.val()); } //标签选择器 function testEle(){ var inps=$("input"); alert(inps[1].value); } //类选择器 function testClass(){ var inps=$(".common"); alert(inps.length); } //组合选择器： function testAll(){ var eles=$("h3,input"); alert(eles.length); } //测试子选择器 function testChild(){ var inps=$("#showdiv>input"); alert(inps.length); } //测试层级选择器 function testCj(){ var inp=$("input:first"); alert(inp.val()); } function testCj2(){ var tds=$("td:not(td[width])"); alert(tds.html()); } </script> <style type="text/css"> .common{} div{ width: 300px; height: 100px; border: solid 2px orange; } </style> </head> <body> <h3>jquery的选择器</h3> <input type="button" name="" id="" value="测试id" onclick="testId()" class="common"/> <input type="button" name="" id="" value="测试标签选择器" onclick="testEle()"/> <input type="button" name="" id="" value="测试类选择器" onclick="testClass()"/> <input type="button" name="" id="" value="测试组合选择器" onclick="testAll()"/> <hr /> 用户名: <input type="text" name="uname" id="uname" value="张三" class="common"/> <hr /> <input type="button" name="" id="" value="测试子选择器" onclick="testChild()" /> <input type="button" name="" id="" value="测试层级选择器--first" onclick="testCj()" /> <input type="button" name="" id="" value="测试层级选择器--not" onclick="testCj2()" /> <hr /> <div id="showdiv"> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> </div> <div id=""> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> <input type="text" name="" id="" value="" /> </div> <table border="1px" height="200px"> <tr> <td width="100px"></td> <td width="100px"></td> <td width="100px"></td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>

    Jquery操作元素属性

    <html> <head> <title>jQuery操作元素的属性</title> <meta charset="UTF-8"/> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <!-- jQuery操作元素属性： 获取: 对象名.attr("属性名") //返回当前属性值 注意此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。 修改 对象名.attr("属性名","属性值"); --> <!--声明js代码域--> <script type="text/javascript"> function testField(){ //获取元素对象 var uname=$("#uname"); //获取 alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val()); } function testField2(){ //获取元素对象 var uname=$("#uname"); uname.attr("type","button"); } </script> </head> <body> <h3>jquery操作元素属性</h3> <input type="button" name="" id="" value="测试获取元素属性" onclick="testField()" /> <input type="button" name="" id="" value="测试修改元素属性" onclick="testField2()" /> <hr /> 用户名:<input type="text" name="uname" id="uname" value="哈哈" /> </body> </html>

    Jquery操作元素的内容

    <html> <head> <title>操作元素HTML</title> <meta charset="UTF-8"/> <!--引入jQuery文件--> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <!-- jquery 操作元素内容学习： 获取元素对象 1、获取 对象名.html()//返回当前对象的所有内容，包括HTML标签。 对象名.text()//返回当前对象的文本内容，不包括HTML标签 2、修改 对象名.html("新的内容")//新的内容会将原有内容覆盖，HTML标签会被解析执行 对象名.text("新的内容")//新的内容会将原有内容覆盖，HTML标签不会被解析 --> <!--声明js代码域--> <script type="text/javascript"> //声明函数 function testHtml(){ //获取元素对象 var showdiv=$("#showdiv"); //获取元素的内容 alert(showdiv.html()); } function testHtml2(){ //获取元素对象 var showdiv=$("#showdiv"); //修改元素内容 showdiv.html(showdiv.html()+"<i>今天天气真好，适合抓鬼子</i>"); } function testText(){ //获取元素对象 var showdiv=$("#showdiv"); //获取元素内容 alert(showdiv.text()); } function testText2(){ //获取元素对象 var showdiv=$("#showdiv"); //修改元素内容 showdiv.text("<i>今天天气真好，适合抓鬼子</i>"); } </script> </head> <body> <h3>操作元素HTML</h3> <input type="button" name="" id="" value="测试获取元素内容--html()" onclick="testHtml()" /> <input type="button" name="" id="" value="测试修改元素内容--html()" onclick="testHtml2()" /> <input type="button" name="" id="" value="测试获取元素内容--text()" onclick="testText()" /> <input type="button" name="" id="" value="测试修改元素内容--text()" onclick="testText2()" /> <div id="showdiv"> <b>皇军，前面有八路的干活</b> </div> </body> </html>

    Jquery操作元素的样式

    操作元素样式 对象名.addClass("类选则器名")//追加一个类样式 对象名.removeClass("类选择器 名")//删除一个指定的类样式 --> <!--声明js代码域--> <script type="text/javascript"> //jQuery操作样式---css() function testCss(){ //获取元素对象 var showdiv=$("#showdiv"); //操作样式--增加 showdiv.css("background-color","orange"); //操作样式--获取 alert(showdiv.css("width")); } function testCss2(){ //获取元素对象 var div=$("#div01"); //操作样式 div.css({"border":"solid 1px","width":"300px","height":"300px"}); } //jquery操作样式--addClass() function testAddClass(){ //获取元素对象 var div=$("#div01"); //操作元素样式 div.addClass("common"); } function testAddClass2(){ //获取元素对象 var div=$("#div01"); //操作元素样式 div.addClass("dd"); } function testRemoveClass(){ //获取元素对象 var div=$("#div01"); //删除元素样式 div.removeClass("dd"); } </script> </head> <body> <h3>操作元素样式</h3> <input type="button" name="" id="" value="操作样式---css()" onclick="testCss()" /> <input type="button" name="" id="" value="操作样式---css()--json" onclick="testCss2()" /> <input type="button" name="" id="" value="操作样式---addClass()" onclick="testAddClass()" /> <input type="button" name="" id="" value="操作样式---addClass()--2" onclick="testAddClass2()" /> <input type="button" name="" id="" value="操作样式---removeClass" onclick="testRemoveClass()" /> <hr /> <div id="showdiv"> </div> <div id="div01" class="common dd"> 我是div01 </div> </body> </html>

    Jquery操作文档结构

    <html> <head> <title>操作文档结构</title> <meta charset="UTF-8"/> <!--引入jQuery文件--> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <!-- 操作文档结构学习： 获取元素对象 1、内部插入 append("内容") 将指定的内容追加到对象的内部 appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容 prepend() 将指定的内容追加到对象的内部的前面 prependTo() 将制定的元素对象追加到指定的对象内容前面 2、外部插入 after 将指定的内容追加到指定的元素后面 before 将指定的内容追加到指定的元素前面 insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面 insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。 3、包裹 4、替换 5、删除 empty() --> <!--声明js代码域--> <script type="text/javascript"> //内部插入 function testAppend(){ //获取元素对象 var div=$("#showdiv"); //使用内部插入 div.append("<i>，饭</i>"); } function testAppendTo(){ //获取元素对象 var div=$("#showdiv"); //使用appendTo() $("#u1").appendTo(div); } function testPrepend(){ //获取元素对象 var div=$("#showdiv"); //使用prepend() div.prepend("<i>你好，</i>"); } //外部插入 function testAfter(){ //获取元素对象 var div=$("#showdiv"); //使用after外部插入 div.after("<b>今天天气不错，适合学习</b>"); } function testBefore(){ //获取元素对象 var div=$("#showdiv"); //使用before外部插入 div.before("<b>今天天气不错，适合学习</b>") } function testEmpty(){ $("#showdiv").empty() } </script> <style type="text/css"> #showdiv{ width: 300px; height: 300px; border: solid 3px orange; } </style> </head> <body> <h3>操作文档结构</h3> <input type="button" name="" id="" value="测试append" onclick="testAppend()" /> <input type="button" name="" id="" value="测试appenTo" onclick="testAppendTo()" /> <input type="button" name="" id="" value="测试prepend" onclick="testPrepend()" /> <hr /> <input type="button" name="" id="" value="测试after" onclick="testAfter()" /> <input type="button" name="" id="" value="测试before" onclick="testBefore()" /> <input type="button" name="" id="" value="测试删除--empty()" onclick="testEmpty()" /> <hr /> <u id="u1">每天下午都是充斥着面包浓浓的香味</u> <div id="showdiv"> <b>今天中午吃什么</b> </div> </body> </html>

    Jquery事件机制

    <html> <head> <title>操作事件</title> <meta charset="UTF-8"/> <!--引入jQuery文件--> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <!-- jQuery动态操作事件 元素对象.bind("事件名",fn)//动态的给指定的元素对象追加指定的事件及其监听的函数。 注意： js中的是一次添加，多次添加时覆盖的效果 jQuery是追加的效果，可以实现给一个事件添加不同的监听函数。 元素对象.unBind("事件名")//移除指定的元素对象的指定事件 注意：js方式添加的事件不能移除。 元素对象.one("事件名",fn)//给指定的元素对象添加一次性事件，事件被触发执行一次即失效。 注意：可以给事件添加多个一次函数，unBind可以用来解绑 页面载入事件 $(document).ready(fn); 页面载入成功后会调用传入的函数对象 注意： 此方式可以给页面载入动态的增加多个函数对象，不会被覆盖。 --> <!--声明js代码域--> <script type="text/javascript"> //js动态添加事件 function testThing(){ //获取元素对象 var btn=document.getElementById("btn2"); //添加事件 btn.onclick=function(){ alert("我是js方式"); } } //jquery //测试bind绑定 function testBind(){ $("#btn2").bind("click",function(){alert("我是bind绑定单击事件")}); $("#btn2").bind("click",function(){alert("我是bind绑定单击事件2w2222")}); } //测试unBind解绑 function testUnfBind(){ $("#btn3").unbind("click"); } //测试one function testOne(){ $("#btn3").one("click",function(){alert("我是one")}); } //页面载入事件 //js方式 window.onload=function(){ alert("我是js方式页面加载"); } window.onload=function(){ alert("我是js方式页面加载2222"); } //jquery方式 $(document).ready(function(){ alert("我是jQuery"); }) $(document).ready(function(){ alert("我是jQuery22222"); }) </script> </head> <body> <h3>操作事件</h3> <input type="button" name="" id="" value="测试js动态添加事件" onclick="testThing()"/> <input type="button" name="" id="" value="测试jquery动态添加事件--bind" onclick="testBind()"/> <input type="button" name="" id="" value="测试jquery动态解绑事件--unbind" onclick="testUnfBind()"/> <input type="button" name="" id="" value="测试jquery动态解绑事件--one" onclick="testOne()"/> <hr /> <input type="button" name="" id="btn" value="测试js" /> <input type="button" name="btn2" id="btn2" value="测试jQuery-bind" /> <input type="button" name="btn2" id="btn3" value="测试jQuery-one" /> </body> </html>

    Jquery动画效果

    <html> <head> <title>动画效果</title> <meta charset="UTF-8"/> <!--引入jQuery文件--> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <!--声明css代码域--> <style type="text/css"> #showdiv{ height: 300px; background-color: orange; display: none; } #div01{ height: 300px; background-color:#8A2BE2; } </style> <!--声明js代码域--> <script type="text/javascript"> function test(){ $("#showdiv").show(3000); $("#div01").hide(3000); /*$("#showdiv").hide(3000); $("#div01").show(3000);*/ $("div").toggle(3000); $("#showdiv").slideDown(3000); $("#div01").slideUp(2000); $("#showdiv").fadeOut(3000); } </script> </head> <body onload="test()"> <div id="showdiv"> </div> <div id="div01"> </div> </body> </html>

    动画我这就不好截图了。

    Jquery操作表格

    <html> <head> <title>jQuery操作表格</title> <meta charset="UTF-8"/> <!-- jQuery学习的内容： 1、jQuery的封装原理（闭包，匿名自调用） 2、jQuery的选择器 3、jQuery操作元素的属性、内容、样式、文档结构 4、jQuery中的事件 5、jQuery中的动画 注意： 一定不要二合一操作 js、jQuery是动态的脚本语言，用来操作HTML的，让网页和用户之间互动 HTML用来格式化展示信息 CSS用来增加网页样式 都是由浏览器解析执行的 注意： 所有的网页都是存储在服务器端，运行在浏览器端。 所有的网页都是服务器实时的根据请求发送给浏览器执行的。 所有的网页数据可以实现动态的拼接。 --> <!-- 1、jquery操作checkbox 操作checkbox的选择状态使用prop()方法 prop("checked")//返回选择的状态，选择返回true,未选返回false prop("checked",true)//置为选择状态 prop("checked",false)//置为未选状态 使用each进行遍历 对象名.each(fn)//在遍历的时候会给每个对象默认执行fn函数 this表示js对象 $(this)表示jQuery对象 parents("标签名")//获取指定的上级元素对象 parent() 2、jQuery操作表格 --> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //实现全选 $(function(){ //给按钮绑定单击事件 $("#btn1").click(function(){ //实现全选 $("input[type='checkbox']").prop("checked",true); }); }) //实现取消选择 $(function(){ //给按钮绑定事件 $("#btn2").click(function(){ //实现全不选 $("input[type='checkbox']").prop("checked",false); }) }) //反选 $(function(){ //给按钮绑定事件 $("#btn3").click(function(){ $("input[type='checkbox']").each(function(){ //alert(this.checked); $(this).prop("checked",!$(this).prop("checked")); }) }) }) //选择奇数行 $(function(){ $("#btn4").click(function(){ $("input[type=checkbox]:odd").prop("checked",true) }) }) //隔行变色 $(function(){ $("#btn5").click(function(){ $("tr:odd").css("background-color","orange"); }) }) //删除选中的行 $(function(){ $("#btn6").click(function(){ $(":checkbox:checked").parents("tr").remove(); }) }) //添加行---操作文档结构 $(function(){ $("#btn7").click(function(){ $("tr:last").after("<tr><td><input type='checkbox' name='chk' id='chk' value='' /></td><td>"+name+"</td><td>123</td><td>123</td><td>123</td><td>123</td></tr>"); }) }) </script> <style type="text/css"> tr{ height: 35px; } td{ width: 100px; } </style> </head> <body> <h3>操作表格</h3> <input type="button" name="" id="btn1" value="全选" /> <input type="button" name="" id="btn2" value="全不选" /> <input type="button" name="" id="btn3" value="反选" /> <input type="button" name="" id="btn4" value="选择奇数行" /> <input type="button" name="" id="btn5" value="隔行变色" /> <input type="button" name="" id="btn6" value="删除行" /> <input type="button" name="btn7" id="btn7" value="添加行" /> <hr /> <table border="1px"> <tr> <td><input type="checkbox" name="chk" id="chk" value="" /></td> <td>12344</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td><input type="checkbox" name="chk" id="chk" value="" /></td> <td>12355</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td><input type="checkbox" name="chk" id="chk" value="" /></td> <td>12366</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td><input type="checkbox" name="chk" id="chk" value="" /></td> <td>12377</td> <td>123</td> <td>123</td> <td>123</td> <td>123</td> </tr> </table> </body> </html>

    菜单案例

    <html> <head> <title>菜单案例</title> <meta charset="UTF-8"/> <!--声明css--> <style type="text/css"> ul li{ list-style-type: none; } #na{ position: relative; left: 20px; } </style> <!--引入jQuery文件--> <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> <!--声明js代码域--> <script type="text/javascript"> var flag=false; //页面载入 $(function(){ $("ul>label").bind("mouseover",function(){ /*if(flag){ $("#na").slideUp(1000); $("#naImg").attr("src","img/close.gif"); flag=true; }else{*/ $("#na").slideDown(1000); $("#naImg").attr("src","img/open.gif"); //flag=true; }); $("ul>label").bind("mouseout",function(){ //if(flag){ $("#na").slideUp(1000); $("#naImg").attr("src","img/close.gif"); //flag=true; /*}else{ $("#na").slideDown(1000); $("#naImg").attr("src","img/open.gif"); flag=true; }*/ }); }) </script> </head> <body> <h3>jQuery-菜单案例</h3> <hr /> <ul> <img src="img/open.gif" id="naImg"/>&nbsp;&nbsp;<label for="">国际动态</label> <div id="na" style="display: none;"> <li><img src="img/item.gif" alt="" /><label for="">国内新闻</label></li> <li><img src="img/item.gif" alt="" /><label for="">国际新闻</label></li> </div> </ul> <div id="div01" style="height: 100px;width: 100px; background-color: royalblue; display: none;"> </div> <div id="div01" style="height: 100px;width: 100px; background-color: orange;"> </div> </body> </html>

    效果就是鼠标移动到父菜单后，父菜单自动打开。 关闭时： 打开时;

    Processed: 0.043, SQL: 9