jQuery操作 0715~0718
2019-07-19 本文已影响0人
煤球快到碗里来
jQuery
1.jQuery和js入口函数
1.1jQuery和js入口函数的区别
<script> window.onload = function (ev) { // 1.通过原生的JS入口函数可以拿到DOM元素 var images = document.getElementsByTagName("images")[0]; console.log(images); // 2.通过原生的JS入口函数可以拿到DOM元素的宽高 var width = window.getComputedStyle(images).width; console.log("onload", width); } /* * 1.原生JS和jQuery入口函数的加载模式不同 * 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行 * jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行 * */ $(document).ready(function () { // 1.通过jQuery入口函数可以拿到DOM元素 var $images = $("images"); console.log($images); // 2.通过jQuery入口函数不可以拿到DOM元素的宽高 var $width = $images.width(); console.log("ready", $width); }); /* 1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的 2.jQuery中编写多个入口函数,后面的不会覆盖前面的 */ // window.onload = function (ev) { // alert("hello lnj1"); // } // window.onload = function (ev) { // alert("hello lnj2"); // } $(document).ready(function () { alert("hello lnj1"); }); $(document).ready(function () { alert("hello lnj2"); }); </script>
1.2 jQuery入口函数其他写法
// 1.第一种写法 $(document).ready(function () { // alert("hello lnj"); }); // 2.第二种写法 jQuery(document).ready(function () { // alert("hello lnj"); }); // 3.第三种写法(推荐) $(function () { // alert("hello lnj"); }); // 4.第四种写法 jQuery(function () { alert("hello lnj"); });
1.3 jQuery冲突问题
// 1.释放$的使用权,避免与其他框架产生冲突 // 注意点: 释放操作必须在编写其它jQuery代码之前编写 // 释放之后就不能再使用$,改为使用jQuery // jQuery原理.noConflict(); // 2.自定义一个访问符号 var nj = jQuery.noConflict(); nj(function () { alert("hello lnj"); });
2.jQuery核心函数
// 1.接收一个函数 $(function () { alert("hello lnj"); // 2.接收一个字符串 // 2.1接收一个字符串选择器 // 返回一个jQuery对象, 对象中保存了找到的DOM元素 var $box1 = $(".box1"); var $box2 = $("#box2"); console.log($box1); console.log($box2); // 2.2接收一个字符串代码片段 // 返回一个jQuery对象, 对象中保存了创建的DOM元素 var $p = $("<p>我是段落</p>"); console.log($p); $box1.append($p); // 3.接收一个DOM元素 // 会被包装成一个jQuery对象返回给我们 var span = document.getElementsByTagName("span")[0]; console.log(span); var $span = $(span); console.log($span); });
jQuery对象是一个伪数组,有下标 长度等信息
3.静态方法和实例方法
3.1 常用的静态方法
-
each
<script> var arr = [1, 3, 5, 7, 9]; var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}; /* 第一个参数: 遍历到的元素 第二个参数: 当前遍历到的索引 注意点: 原生的forEach方法只能遍历数组, 不能遍历伪数组 */ // arr.forEach(function (value, index) { // console.log(index, value); // }); // obj.forEach(function (value, index) { // console.log(index, value); // }); // 1.利用jQuery的each静态方法遍历数组 /* 第一个参数: 当前遍历到的索引 第二个参数: 遍历到的元素 注意点: jQuery的each方法是可以遍历伪数组的 */ $.each(arr, function (index, value) { console.log(index, value); }); $.each(obj, function (index, value) { console.log(index, value); }); </script>-
map
var arr = [1, 3, 5, 7, 9]; var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}; // 1.利用原生JS的map方法遍历 /* 第一个参数: 当前遍历到的元素 第二个参数: 当前遍历到的索引 第三个参数: 当前被遍历的数组 注意点: 和原生的forEach一样,不能遍历的伪数组 */ // arr.map(function (value, index, array) { // console.log(index, value, array); // }); // obj.map(function (value, index, array) { // console.log(index, value, array); // }); /* /* 第一个参数: 要遍历的数组 第二个参数: 每遍历一个元素之后执行的回调函数 回调函数的参数: 第一个参数: 遍历到的元素 第二个参数: 遍历到的索引 注意点: 和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组 */ $.map(arr, function (value, index) { console.log(index, value); }); var res = $.map(obj, function (value, index) { console.log(index, value); return value + index; }); var res2 = $.each(obj, function (index, value) { console.log(index, value); return value + index; }); /* jQuery中的each静态方法和map静态方法的区别: each静态方法默认的返回值就是, 遍历谁就返回谁 map静态方法默认的返回值是一个空数组 each静态方法不支持在回调函数中对遍历的数组进行处理 map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回 */ console.log(res); console.log(res2);-
tirm
/* $.trim(); 作用: 去除字符串两端的空格 参数: 需要去除空格的字符串 返回值: 去除空格之后的字符串 */ var str = " lnj "; var res = $.trim(str); console.log("---"+str+"---");// 真数组 var arr = [1, 3, 5, 7, 9]; // 伪数组 var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5}; // 对象 var obj = {"name":"lnj", age:"33"}; // 函数 var fn = function(){}; // window对象 var w = window; /* $.isWindow(); 作用: 判断传入的对象是否是window对象 返回值: true/false */ var res = $.isWindow(w); console.log(res); /* $.isArray(); 作用: 判断传入的对象是否是真数组 返回值: true/false */ var res = $.isArray(w); console.log(res); /* $.isFunction(); 作用: 判断传入的对象是否是一个函数 返回值: true/false 注意点: jQuery框架本质上是一个函数 (function( window, undefined ) { })( window ); */ var res = $.isFunction(jQuery); console.log(res); //true-
holdreday
<script> // $.holdReady(true); 作用: 暂停ready执行 我们需要进等一些其他的操作执行完后在执行, $.holdReady(true); $(document).ready(function () { alert("ready"); }); </script> <button>回复ready事件</button> <script> var btn = document.getElementsByTagName("button")[0]; btn.onclick = function () { $.holdReady(false); } </script>
4.jQuery属性操作
4.1内容选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-jQuery内容选择器</title> <style> div{ width: 50px; height: 100px; background: red; margin-top: 5px; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 // :empty 作用:找到既没有文本内容也没有子元素的指定元素 // var $div = $("div:empty"); // console.log($div); // :parent 作用: 找到有文本内容或有子元素的指定元素 // var $div = $("div:parent"); // console.log($div); // :contains(text) 作用: 找到包含指定文本内容的指定元素 // var $div = $("div:contains('我是div')"); // console.log($div); // :has(selector) 作用: 找到包含指定子元素的指定元素 var $div = $("div:has('span')"); console.log($div); }); </script> </head> <body> <div></div> <div>我是div</div> <div>他们我是div123</div> <div><span></span></div> <div><p></p></div> </body> </html>
4.2.属性和属性节点
<script> $(function () { /* 1.什么是属性? 对象身上保存的变量就是属性 2.如何操作属性? 对象.属性名称 = 值; 对象.属性名称; 对象["属性名称"] = 值; 对象["属性名称"];*/ function Person() { } var p = new Person(); // p.name = "lnj"; p["name"] = "zs"; // console.log(p.name); console.log(p["name"]); /* 3.什么是属性节点? <span name = "it666"></span> 在编写HTML代码时,在HTML标签中添加的属性就是属性节点 在浏览器中找到span这个DOM元素之后, 展开看到的都是属性 在attributes属性中保存的所有内容都是属性节点 4.如何操作属性节点? DOM元素.setAttribute("属性名称", "值"); DOM元素.getAttribute("属性名称"); 5.属性和属性节点有什么区别? 任何对象都有属性, 但是只有DOM对象才有属性节点 */ var span = document.getElementsByTagName("span")[0]; span.setAttribute("name", "lnj"); console.log(span.getAttribute("name")); }); </script>-
jQuery中对属性和属性节点的操作
-
attr方法
<script> $(function () { /* 1.attr(name|pro|key,val|fn) 作用: 获取或者设置属性节点的值 可以传递一个参数, 也可以传递两个参数 如果传递一个参数, 代表获取属性节点的值 如果传递两个参数, 代表设置属性节点的值 注意点: 如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值 如果是设置:找到多少个元素就会设置多少个元素 如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增 2.removeAttr(name) 删除属性节点 注意点: 会删除所有找到元素指定的属性节点 */ // console.log($("span").attr("class")); $("span").attr("class", "box"); // $("span").attr("abc", "123"); // $("span").removeAttr("class name");删除span里面的class属性和name属性 }); </script> <span class="span1" name="it666"></span> <span class="span2" name="lnj"></span>-
prop方法
<script> $(function () { /* 1.prop方法 特点和attr方法一致 2.removeProp方法 特点和removeAttr方法一致 */ /* $("span").eq(0).prop("demo", "it666"); $("span").eq(1).prop("demo", "lnj"); console.log($("span").prop("demo")); $("span").removeProp("demo"); */ /* 注意点: prop方法不仅能够操作属性, 他还能操作属性节点 官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr() */ // console.log($("span").prop("class")); // $("span").prop("class", "box"); console.log($("input").prop("checked")); // true / false console.log($("input").attr("checked")); // checked / undefined }); </script> <span class="span1" name="it666"></span> <span class="span2" name="lnj"></span> <input type="checkbox">
4.3. jQuery类操作方法
-
addClass removeClass toggleClass
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>19-jQuery操作类相关的方法</title> <style> *{ margin: 0; padding: 0; } .class1{ width: 100px; height: 100px; background: red; } .class2{ border: 10px solid #000; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { /* 1.addClass(class|fn) 作用: 添加一个类 如果要添加多个, 多个类名之间用空格隔开即可 2.removeClass([class|fn]) 作用: 删除一个类 如果想删除多个, 多个类名之间用空格隔开即可 3.toggleClass(class|fn[,sw]) 作用: 切换类 有就删除, 没有就添加 */ var btns = document.getElementsByTagName("button"); btns[0].onclick = function () { // $("div").addClass("class1"); $("div").addClass("class1 class2"); } btns[1].onclick = function () { // $("div").removeClass("class2"); $("div").removeClass("class2 class1"); } btns[2].onclick = function () { $("div").toggleClass("class2 class1");//有这两个类就删除它们 } }); </script> </head> <body> <button>添加类</button> <button>删除类</button> <button>切换类</button> <div></div> </body> </html>
4.4.文本值操作
/*1.html([val|fn]) 和原生JS中的innerHTML一模一样 2.text([val|fn]) 和原生JS中的innerText一模一样 3.val([val|fn|arr]) 多用于给input设置 */
4.5.样式操作
<script> $(function () { // 编写jQuery相关代码 // 1.逐个设置 $("div").css("width", "100px"); $("div").css("height", "100px"); $("div").css("background", "red"); // 2.链式设置 // 注意点: 链式操作如果大于3步, 建议分开 $("div").css("width", "100px").css("height", "100px").css("background", "blue"); // 3.批量设置 $("div").css({ width: "100px", height: "100px", background: "red" }); // 4.获取CSS样式值 console.log($("div").css("background"));; }); </script>
4.6.位置和尺寸操作
//设置两个盒子一个父盒子一个子盒子,子绝父相,进行如下操作 $(function () { // 编写jQuery相关代码 var btns = document.getElementsByTagName("button"); // 监听获取 btns[0].onclick = function () { // 获取元素的宽度 console.log($(".father").width()); // offset([coordinates]) // 作用: 获取元素距离窗口的偏移位 console.log($(".son").offset().left); // position() 作用: 获取元素距离定位元素的偏移位 console.log($(".son").position().left); } // 监听设置 btns[1].onclick = function () { // 设置元素的宽度 $(".father").width("500px") //设置距离左边的距离 $(".son").offset({ left: 10 }); // 注意点: position方法只能获取不能设置,以下是不行的,得通过css设置 // $(".son").position({ // left: 10 // }); $(".son").css({ left: "10px" }); } });-
scollTop
//获取和设置的是一个元素内部的,比如$("html,body").scrollTop(300);就是设置距离整个网页头部的高度 $(function () { // 编写jQuery相关代码 var btns = document.getElementsByTagName("button"); // 监听获取 btns[0].onclick = function () { // 获取滚动的偏移位 // console.log($(".scroll").scrollTop()); // 获取网页滚动的偏移位 // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法 console.log($("body").scrollTop()+$("html").scrollTop()); } btns[1].onclick = function () { // 设置滚动的偏移位 $(".scroll").scrollTop(300); // 设置网页滚动偏移位 // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法 $("html,body").scrollTop(300); } });
5.jQuery事件相关
5.1事件绑定与解绑
$(function () { // 编写jQuery相关代码 /* jQuery中有两种绑定事件方式 1.eventName(fn); 编码效率略高/ 部分事件jQuery没有实现,所以不能添加 2.on(eventName, fn); 编码效率略低/ 所有js事件都可以添加 注意点: 可以添加多个相同或者不同类型的事件,不会覆盖 */ $("button").click(function () { alert("hello lnj"); }); $("button").click(function () { alert("hello 123"); }); $("button").mouseleave(function () { alert("hello mouseleave"); }); $("button").mouseenter(function () { alert("hello mouseenter"); }); }); </script> <script> $(function () { function test1() { alert("hello lnj"); } function test2() { alert("hello 123"); } // 编写jQuery相关代码 $("button").click(test1); $("button").click(test2); $("button").mouseleave(function () { alert("hello mouseleave"); }); $("button").mouseenter(function () { alert("hello mouseenter"); }); // off方法如果不传递参数, 会移除所有的事件 $("button").off(); // off方法如果传递一个参数, 会移除所有指定类型的事件 $("button").off("click"); // off方法如果传递两个参数, 会移除所有指定类型的指定事件 $("button").off("click", test1); }); </script>
5.2 事件冒泡与默认行为
<script> $(function () { // 编写jQuery相关代码 /* 1.什么是事件冒泡? 如下有两个div,father和son,当给他俩添加了点击事件,点击son也会触发father 2.如何阻止事件冒泡 两种方法 3.什么是默认行为? 4.如何阻止默认行为 两种方法 */ $(".son").click(function (event) { alert("son"); return false; event.stopPropagation(); }); $(".father").click(function () { alert("father"); }); $("a").click(function (event) { alert("弹出注册框"); // return false; event.preventDefault(); }); }); </script>
5.3 事件自动触发
$(".son").click(function (event) { alert("son"); }); $(".father").click(function () { alert("father"); }); /* 自动触发就是不用我们点击就能触发事件 trigger: 如果利用trigger自动触发事件,会触发事件冒泡 triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡 */ $(".son").trigger("click");//father也会被触发 $(".son").triggerHandler("click"); /* trigger: 如果利用trigger自动触发事件,会触发默认行为 triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发默认行为 */
5.4 自定义事件
$(function () { // 编写jQuery相关代码 // $(".son").myClick(function (event) { // alert("son"); // }); /* 想要自定义事件, 必须满足两个条件 1.事件必须是通过on绑定的 2.事件必须通过trigger来触发 */ $(".son").on("myClick", function () { alert("son"); }); $(".son").triggerHandler("myClick"); });
5.5 事件命名空间
$(function () { /* 什么是命名空间,在开发时,如果不同的人对一个元素添加了相同的事件,事件就会被多次触发,命名空间就能解 决触发谁的 想要事件的命名空间有效,必须满足两个条件 1.事件是通过on来绑定的 2.通过trigger触发事件 */ $(".son").on("click.zs", function () { alert("click1"); }); $(".son").on("click.ls", function () { alert("click2"); }); // $(".son").trigger("click.zs"); $(".son").trigger("click.ls"); }); /*注意点 $(".father").on("click.ls", function () { alert("father click1"); }); $(".father").on("click", function () { alert("father click2"); }); $(".son").on("click.ls", function () { alert("son click1"); }); /* 利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元 素没有命名空间的事件不会被触发 利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类 型的事件都会被触发 */ // $(".son").trigger("click.ls"); $(".son").trigger("click");
5.6 事件委托
$(function () { /* 1.什么是事件委托? 请别人帮忙做事情, 然后将做完的结果反馈给我们 */ $("button").click(function () { $("ul").append("<li>我是新增的li</li>"); }) /* 在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找 到的元素,给所有找到的元素添加事件 */ $("ul>li").click(function () { console.log($(this).html()); }); //当我点击新增的li时不会打印内容,因为jQuery在遍历完所有元素后才会执行jQuery代码,想要让动态添加 的元素相应,这时候就需要通过事件委托 /* 以下代码的含义, 让ul帮li监听click事件 之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件 之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响 应了事件, 既然事件是从li传递过来的,所以ul必然指定this是谁 */ $("ul").delegate("li", "click", function () { console.log($(this).html()); }); });
5.7 移入移出事件
/*mouseover/mouseout事件, 子元素被移入移出也会触发父元素的事件 mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事件 推荐大家使用 */ /* hover方法既可以接收两个参数,也可以接受一个参数,两个一个移入一个移出,一个既移入又移出 $(".father").hover(function () { console.log("father被移入了"); },function () { console.log("father被移出了"); }); */ $(".father").hover(function () { console.log("father被移入移出了"); });
做几个实例 电影排行榜 tab选项卡
-
掌握的几个方法
var index = $(this).index(); //eq获取在兄弟元素中的位置, var $li = $(".content>li").eq(index); //选择序号为index的元素,返回一个对象 $li.siblings().removeClass("show"); //siblings用来排他
6.jQuery动画
6.1 显示和隐藏动画
<script> $(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { // $("div").css("display", "block"); 没有动画效果 // 注意: 这里的时间是毫秒 $("div").show(1000, function () { // 作用: 动画执行完毕之后调用 alert("显示动画执行完毕"); }); }); $("button").eq(1).click(function () { // $("div").css("display", "none"); $("div").hide(1000, function () { alert("隐藏动画执行完毕"); }); }); $("button").eq(2).click(function () { $("div").toggle(1000, function () { alert("切换动画执行完毕"); }); }); }); </script>-
实例:对联广告
-
掌握的方法
// 1.监听网页的滚动 $(window).scroll(function (){ }
6.2 展开和收起动画
$(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { $("div").slideDown(1000, function () { alert("展开完毕"); }); }); $("button").eq(1).click(function () { $("div").slideUp(1000, function () { alert("收起完毕"); }); }); $("button").eq(2).click(function () { $("div").slideToggle(1000, function () { alert("收起完毕"); }); }); });-
实例:折叠菜单 下拉菜单
6.3.淡入淡出动画
$("button").eq(0).click(function () { $("div").fadeIn(1000, function () { alert("淡入完毕"); }); }); $("button").eq(1).click(function () { $("div").fadeOut(1000, function () { alert("淡出完毕"); }); }); $("button").eq(2).click(function () { $("div").fadeToggle(1000, function () { alert("切换完毕"); }); }); $("button").eq(3).click(function () { $("div").fadeTo(1000, 0.2, function () { alert("淡入完毕"); }) });
收获 :想要一个动画执行完毕后再执行下一个,可以这样写
$(".ad").stop().slideDown(1000).fadeOut(1000).fadeIn(1000);
6.4 自定义动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>47-jQuery自定义动画</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; margin-top: 10px; background: red; } .two{ background: blue; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { /* 以下为三种参数 $(".one").animate({ width: 500 }, 1000, function () { alert("自定义动画执行完毕"); }); */ $(".one").animate({ marginLeft: 500 }, 5000, function () { // alert("自定义动画执行完毕"); }); /* 第一个参数: 接收一个对象, 可以在对象中修改属性 第二个参数: 指定动画时长 第三个参数: 指定动画节奏, 默认就是swing 第四个参数: 动画执行完毕之后的回调函数 */ $(".two").animate({ marginLeft: 500 }, 5000, "linear", function () { // alert("自定义动画执行完毕"); }); }) $("button").eq(1).click(function () { $(".one").animate({ width: "+=100" }, 1000, function () { alert("自定义动画执行完毕"); }); }); $("button").eq(2).click(function () { $(".one").animate({ // width: "hide" width: "toggle" }, 1000, function () { alert("自定义动画执行完毕"); }); }) }); </script> </head> <body> <button>操作属性</button> <button>累加属性</button> <button>关键字</button> <div class="one"></div> <div class="two"></div> </body> </html>
stop和delay属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>48-jQuery的stop和delay方法</title> <style> *{ margin: 0; padding: 0; } .one{ width: 100px; height: 100px; background: red; } .two{ width: 500px; height: 10px; background: blue; } </style> <script src="js/jquery-1.12.4.js"></script> <script> $(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { /* 在jQuery的{}中可以同时修改多个属性, 多个属性的动画也会同时执行 */ /* $(".one").animate({ width: 500 // height: 500 }, 1000); $(".one").animate({ height: 500 }, 1000); */ /* delay方法的作用就是用于告诉系统延迟时长 */ /* $(".one").animate({ width: 500 // height: 500 }, 1000).delay(2000).animate({ 等两秒在执行 height: 500 }, 1000); */ $(".one").animate({ width: 500 }, 1000); $(".one").animate({ height: 500 }, 1000); $(".one").animate({ width: 100 }, 1000); $(".one").animate({ height: 100 }, 1000); }); $("button").eq(1).click(function () { // 立即停止当前动画, 继续执行后续的动画 // $("div").stop(); // $("div").stop(false); // $("div").stop(false, false); // 立即停止当前和后续所有的动画 // $("div").stop(true); // $("div").stop(true, false); // 立即完成当前的, 继续执行后续动画 // $("div").stop(false, true); // 立即完成当前的, 并且停止后续所有的 $("div").stop(true, true); }); }); </script> </head> <body> <button>开始动画</button> <button>停止动画</button> <div class="one" ></div> <div class="two"></div> </body> </html>-
图标特效 无限滚动轮播
7.节点操作
7.1 添加节点相关方法
$(function () { /* 内部插入 append(content|fn) appendTo(content) 会将元素添加到指定元素内部的最后 prepend(content|fn) prependTo(content) 会将元素添加到指定元素内部的最前面
外部插入
after(content|fn)
会将元素添加到指定元素外部的后面
before(content|fn)
会将元素添加到指定元素外部的前面
insertAfter(content)
insertBefore(content)
与上面的功能一样就是看把谁写在前面
*/
$("button").click(function () {
// 1.创建一个节点
var $li = $("<li>新增的li</li>");
// 2.添加节点
$("ul").append($li);
$("ul").prepend($li);
// $li.appendTo("ul");
// $li.prependTo("ul");
// $("ul").after($li);
// $("ul").before($li);
// $li.insertAfter("ul");
});
});
//html
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<div>我是div</div>
###### 7.2 删除节点
* ```JavaScript
$(function () {
/*
删除
remove([expr])
删除指定元素
empty()
删除指定元素的内容和子元素, 指定元素自身不会被删除
detach([expr])
*/
$("button").click(function () {
// $("div").remove();
// $("div").empty();
// $("li").remove(".item");
// 利用remove删除之后再重新添加,原有的事件无法响应
// var $div = $("div").remove();
// 利用detach删除之后再重新添加,原有事件可以响应,这样我在下面弄得点击事件还能响应
var $div = $("div").detach();
// console.log($div);
$("body").append($div);
});
$("div").click(function () {
alert("div被点击了");
});
});
7.3 替换节点
$(function () { /* 替换 replaceWith(content|fn) replaceAll(selector) 替换所有匹配的元素为指定的元素 */ $("button").click(function () { // 1.新建一个元素 var $h6 = $("<h6>我是标题6</h6>"); // 2.替换元素 // $("h1").replaceWith($h6); $h6.replaceAll("h1"); }); });
7.4 复制节点(分为浅复制和深复制)
$(function () { // clone([Even[,deepEven]]) /* 如果传入false就是浅复制, 如果传入true就是深复制 浅复制只会复制元素, 不会复制元素的事件 深复制会复制元素, 而且还会复制元素的事件 */ $("button").eq(0).click(function () { // 1.浅复制一个元素 var $li = $("li:first").clone(false); // 2.将复制的元素添加到ul中 $("ul").append($li); }); $("button").eq(1).click(function () { // 1.深复制一个元素 var $li = $("li:first").clone(true); // 2.将复制的元素添加到ul中 $("ul").append($li); }); $("li").click(function () { alert($(this).html()); }); });
