• jQuery基础知识

    目录

    一、初步认识jQuery

    二、选择器

    三、事件

    四、动画

    五、jQuery操作Dom

    一、初步认识jQuery

    1、之前的js,会发现onload事件在写是时候，只能写一次

    1. <script>
    2.          window.onload = function(){
    3.             alert("one")
    4.          }
    5.          
    6.          window.onload = function(){
    7.             alert("two")
    8.          }
    9. function fun01(){
    10.             alert("我是第一个函数")
    11.         }
    12.         function fun02(){
    13.             alert("我是第二个函数")
    14.         }
    15.         window.onload =fun
    16.         window.onload = fun02
    17. script>

    结论：window.onload事件只能书写一次。如果，现在fun01与fun02都需要执行，怎么办？可以更改代码

    1.1 jQuery使用

    如果需要使用jQuery需要导入jQuery的库，就是一个js文件

    <script src="js/jquery-1.12.4.js">script>

    基本语法

    1. <script>
    2.             //window.onload
    3.             $(function(){
    4.                  alert("one")
    5.             })
    6.             //
    7.             $(document).ready(function(){
    8.                 alert("two")
    9.             })
    10.             jQuery(function(){
    11.                 alert("three")
    12.             })
    13.             jQuery(document).ready(function(){
    14.                 alert("four")
    15.             })
    16.     
    17.           $(function(){
    18.                 fun01()
    19.             })
    20.             function fun01(){
    21.                 alert("函数1")
    22.             }
    23. script>
    window.onload$(document).ready()
    执行时机必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
    编写个数同一页面不能同时编写多个同一页面能同时编写多个
    简化写法无$(function(){ //执行代码}) ;

    1.2 节点类型

    元素节点
文本节点
属性节点

    1.3 Dom对象和jQuery对象

    之前在js的时候，获取元素节点，全部是获取的Dom对象 document.getElementXXXX全部获取的都是Dom对象，Dom对象只能使用Dom的属性和方法

    1. <script src="js/jquery-1.12.4.js">script>
    2. <script>
    3.            $(function(){
    4.               var v =  $("#div").html()
    5.               console.log(v)
    6.            })
    7. script>

    说明: $("#div") 选择器 如何使用jQuery快速的定位元素

    1.4 jQuery语法

    $(选择器).方法()

    $()称为工厂函数

    dom对象和jQuery对象的相互转换

    1. <script>
    2. 	//window.onload
    3. 	$(function(){
    4. 		  $("h1").css("background-color","red")
    5.         //$("h1")是jQuery对象，此时获取的元素是一个集合，可以从中拿到想要的元素，调用get方法，传递索引，获取的对象是Dom对象
    6. 		  var h1Ele =  $("h1").get(0)//获取第一个h1标签，此时获取的标签的类型是dom对象
    7. 		  h1Ele.style.backgroundColor="blue"//只能使用dom的方法
    8. 		   
    9.         //document.getElementXXX获取的是dom元素
    10. 		  var pEle =  document.getElementsByTagName("p")[0];//dom元素
    11. 		  var $p = $(pEle)//工厂函数将一个dom对象转换为jQuery对象
    12. 		  $p.css("background-color","orange")//可以使用jQuery的方法
    13. 	})
    14. script>

    页面中有个按钮，点击按钮的时候，给页面中的h1标签添加已经定义好的风格

    二、选择器

    2.1 基本选择器

    名称语法构成描述示例
    标签选择器element根据给定的标签名匹配元素$("h2" )选取所有h2元素
    类选择器.class根据给定的class匹配元素$(" .title")选取所有class为title的元素
    ID选择器#id根据给定的id匹配元素$(" #title")选取id为title的元素
    并集选择器s1,s2……sn将每个选择器匹配的元素合并$("div,p,.title" )选取所有div、p和拥有class为title的元素
    交集选择器Ele.class或ele#id匹配指定clss或id的某个元素$("h2.title")选取所有拥有class为title的h2元素
    全局选贼*匹配所有元素$("*" )选取所有元素
    1. <head>
    2. 		<meta charset="utf-8" />
    3. 		<title>title>
    4. 		<script src="js/jquery-1.12.4.js">script>
    5. 		<script>
    6. 			 $(function(){
    7. 			 	//$("*").css("background-color","red")  //* 全局选择器
    8. 			 	/*$("h1").css("background-color","red")  //标签选择器
    9. 			 	$(".one").css("color","orange")  //类选择器，通过.命名的
    10. 			 	$("#one").css("color","blue")  //id选择器，id选择器是通过#命名的*/
    11. 			 
    12. 			    //$("h1.one").css("color","red")//交集选择器
    13. 			    $("div,.one").css("color","red")//并集选择器
    14. 			 })
    15. 		script>
    16. 	head>
    17. 	<body>
    18. 		 <h1 class="one">标题1h1>
    19. 		 <p class="one">段落p>
    20. 		 <div>divdiv>
    21. 		 <h1 id="one">标题1h1>
    22. 		 <h1 class="two">标题1h1>
    23. 	body>

    2.2 后代选择器

    名称语法构成描述示例
    后代选择器ancestor descendant选取ancestor元素里的所有descendant（后代）元素$("#menu span" )选取#menu下的元素
    子选择器parent>child选取parent元素下的child（子）元素$(" #menu>span" )选取#menu的子元素
    相邻元素选择器prev+next选取紧邻prev元素之后的next元素$(" h2+dl " )选取紧邻

    元素之后的同辈元素

    同辈元素选择器prev~sibings选取prev元素之后的所有siblings元素$(" h2~dl " )选取

    元素之后所有的同辈元素

    2.3 属性选择器

    名称语法构成描述示例
    属性选择器[attribute]选取包含给定属性的元素$(" [href]" )选取含有href属性的元素
    [attribute=value]选取等于给定属性是某个特定值的元素$(" [href ='#']" )选取href属性值为“#”的元素
    [attribute !=value]选取不等于给定属性是某个特定值的元素$(" [href !='#']" )选取href属性值不为“#”的元素
    [attribute ^=value]选取给定属性是以某些特定值开始的元素$(" [href^='en']" )选取href属性值以en开头的元素
    [attribute$=value]选取给定属性是以某些特定值结尾的元素$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素
    [attribute*=value]选取给定属性是以包含某些值的元素$(" [href* ='txt']" )选取href属性值中含有txt的元素
    [selector] [selector2] [selectorN]选取满足多个条件的复合属性的元素$("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的
  • 元素
    1. <html>
    2. 	<head>
    3. 		<meta charset="UTF-8">
    4. 		<title>title>
    5. 		<script src="js/jquery-1.12.4.js">script>
    6. 		<script>
    7. 			 $(function(){
    8. 			 	// $("#menu span").css("color","red") // #menu下的所有的span元素
    9. 			 	// $("#menu>span").css("color","red")  //#menu下的子元素
    10. 			 //	$(".one+h2").css("color","red")//相邻兄弟选择器，往后，找相邻
    11. 			 	//$("h2.one~h2").css("color","red")//同辈兄弟选择器，往后找。
    12. 			 	//$("a[href][title='one']").css("background-color","red") //a标签，有href属性的，而且title属性的值=one
    13. 			 	//$("a[title][title!='one']").css("background-color","red")//注意区分a[title!='one']区别在于a[title!='one'] 如果标签中不包含title属性也是满足条件的。a[title][title!='one']a标签，而且要有title属性，并且title属性的值不能是one
    14. 			 	//$("a[title^='f']").css("background-color","red")//a标签中有title属性并且属性的值以f开头
    15. 			 	//$("a[title$='e']").css("background-color","red")//以e结尾的
    16. 			 	$("a[title*='o']").css("background-color","red")//包含字母o
    17. 			 	
    18. 			 })
    19. 		script>
    20. 	head>
    21. 	<body>
    22. 		<div id="menu">
    23. 		    aa
    24. 			 <span class="one">商品查看列表span>
    25. 		    <dl>
    26. 		        <dt>生活用品<span>特价span>dt>
    27. 		        <dd><a name="mark">marka> <a href="#" title="one">最低价格a> <a href="#"  title="two">最多折扣a> <a href="#"><span>销量最多span>a>dd>
    28. 		    dl>
    29. 			 <h2>全部产品分类h2>
    30. 		    <dl>
    31. 		        <dt>生活用品<span>特价span>dt>
    32. 		        <dd><a href="#">最低价格a> <a href="#"  title="three">最多折扣a> <a href="#"><span>销量最多span>a>dd>
    33. 		    dl>
    34. 		    <dl id="#test">
    35. 		        <dt>烟酒dt>
    36. 		        <dd><a href="#">茅台a> <a href="#">西凤a> <a href="#">五粮液a>dd>
    37. 		        <dd><a href="#">高端a> <a href="#"  title="four">最受欢迎a>dd>
    38. 		    dl>
    39. 			<div>
    40. 			      <dl id="test">
    41. 		        <dt>水果dt>
    42. 		        <dd><a href="#">香蕉a> <a href="#" title="five">香蕉a> <a href="#">香蕉a>dd>
    43. 		        <dd><a href="#">香蕉a> <a href="#">香蕉a>dd>
    44. 		    dl>
    45. 			div>
    46. 		    <span id="one">这个是spanspan>
    47. 		    <span>更多分类span>
    48. 		    <h2>h2h2> 
    49. 			<h2 class="one">这个是h2h2> 
    50. 			<h2 id="two">ID=twoh2> 
    51. 			<span>更多分类span>
    52. 		    <h2>h2h2> 
    53. 		div>
    54. 	body>
    55. html>

    2.4 伪类选择器

    语法构成描述示例
    :first选取第一个元素$(" li:first" )选取所有
  • 元素中的第一个
  • 元素
    • :last选取最后一个元素$(" li:last" )选取所有
  • 元素中的最后一个
  • 元素
    • :even选取索引是偶数的所有元素（index从0开始）$(" li:even" )选取索引是偶数的所有
  • 元素
    • :odd选取索引是奇数的所有元素（index从0开始）$(" li:odd" )选取索引是奇数的所有
  • 元素
    • :eq(index)选取索引等于index的元素（index从0开始）$("li:eq(1)" )选取索引等于1的
  • 元素
    • :gt(index)选取索引大于index的元素（index从0开始）$(" li:gt(1)" )选取索引大于1的
  • 元素（注：大于1，不包括1
    • :lt(index)选取索引小于index的元素（index从0开始）$(“li:lt(1)” )选取索引小于1的
  • 元素（注：小于1，不包括1）
    • :nth-child$("ul li:nth-child(2)"):ul下的第二个儿子是li的。必须保证类型和数匹配
    :nth-of-type$("ul li:nth-of-type(1)"):ul下的类型是li的第一个元素
    :only-child只有一个儿子的元素
    1.  <ul>
    2. 				   <div>divdiv>
    3. 					<li>这个是孙子列表0li>
    4. 					<li>这个是孙子列表1li>
    5. 					<li>这个是孙子列表2li>
    6. 					<li>这个是孙子列表3li>
    7. 					<li>这个是孙子列表4li>
    8.  ul>
    9. <script>
    10. 			 $(function(){
    11. 			 	//$("ul li:odd").css("background-color","red") 奇数
    12. 			 	// $("ul li:eq(0)").css("background-color","red")  等于0
    13. 			 	// $("ul li:gt(0):odd").css("background-color","red")  大于0取奇数，从0开始
    14. 			 	// $("ul li:lt(4):odd").css("background-color","red")  小于4
    15. 			 //	$("ul li:not(:first)").css("background-color","red")  不是第一个
    16. 			    $("ul li").eq(0).css("background-color","red")
    17. 			 })
    18. script>
    :parent     $("ul li:parent").html("OK")  匹配 li里面有文本或子元素的li元素
.parent()   $("li").parent()  :找li的父元素，直接父元素，只找一级
.parents()  $("li").parents() :找li的所有的父元素，找到根
.parents()  $("li").parents("div") :找li的所有的父元素，只要div的

    2.5 基本过滤选择器

    语法构成描述示例
    :not(selector)选取去除所有与给定选择器匹配的元素$(" li:not(.three)" )选取class不是three的元素
    :header选取所有标题元素，如h1~h6$(":header" )选取网页中所有标题元素

    2.6 可见性过滤选择器

    语法构成描述示例
    :visible选取所有可见的元素$(":visible" )选取所有可见的元素
    :hidden选取所有隐藏的元素$(":hidden" ) 选取所有隐藏的元素

    2.7 表单选择器以及表单属性选择器

    具体见帮助文档

    1.  $(function(){
    2. 			 	//$(":input").css("background-color","red") 获取所有的input
    3. 			 //	 $("input[type='text']").css("background-color","red")  获取文本框
    4.              //$(":text").css("background-color","red") 
    5.      //获取所有的checked="checked"元素的值
    6.      /*
    7.        .each()//循环每个元素
    8.      */
    9.      $("input:checked").each(function(i,v){//i,代表的是索引，v代表的循环出的每个元素，该元素是dom对象
    10. 			      	 var val =   $(v).val()
    11. 			      	 console.log(val)
    12. 	 })
    13.  })

    三、事件

    3.1 鼠标事件

    鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

    方法描述执行时机
    click( )触发或将函数绑定到指定元素的click事件单击鼠标时
    mouseover( )触发或将函数绑定到指定元素的mouse over事件鼠标移过时
    mouseout( )触发或将函数绑定到指定元素的mouse out事件鼠标移出时

    对应mouseover以及mouseout有一个复合试卷hover事件

    1. $("input[type='button']").hover(function(){
    2.  
    3. },function(){
    4.  
    5. })

    3.2 键盘事件

    方法描述执行时机
    keydown( )触发或将函数绑定到指定元素的keydown事件按下键盘时
    keyup( )触发或将函数绑定到指定元素的keyup事件释放按键时
    keypress( )触发或将函数绑定到指定元素的keypress事件产生可打印的字符时
    1. <script>
    2. 			 $(function(){
    3. 			 	 $("input[type=text]").keydown(function(){
    4. 			 	 	var v =  $("div").html()//取到原来的值
    5. 			 	 	$("div").html(v+"keydown")
    6. 			 	 }).keyup(function(e){
    7. 			 	 	 $("div").html($("div").html()+"keyup")
    8. 			 	 	 var code = e.keyCode//获取值 键盘对应 a:65  b:66
    9. 			 	 	 console.log(code)
    10. 			 	 	 if(code==13){
    11. 			 	 	 	alert("做表单提交")
    12. 			 	 	 }
    13. 			 	 }).keypress(function(){
    14. 			 	 	 $("div").html($("div").html()+"keypress")
    15. 			 	 })
    16. 			 })
    17. 		script>
    18. 	head>
    19. 	<body>
    20. 		 <input type="text" />
    21. 		  <div>div>
    22. 	body>

    3.3 表达事件

    方法描述执行时机
    focus( )触发或将函数绑定到指定元素的focus事件获得焦点
    blur( )触发或将函数绑定到指定元素的blur事件失去焦点

    3.4 绑定事件

    bind事件

    1. <script>
    2. 			 $(function(){
    3. 			 	/* $("input[type='button']").click(function(){
    4. 			 	 	 alert("ok")
    5. 			 	 })*/
    6. 			 	//绑定事件
    7. 			 	 $("input[type='button']:first").bind("click",function(){
    8. 			 	 	alert("ok")
    9. 			 	 })
    10. 			 	 
    11. 			 	 $("input[type='button']:last").click(function(){
    12. 			 	 	 $(this).prev().unbind("click")//接触绑定事件
    13. 			 	 })
    14. 			 })
    15. 		script>
    16. 	head>
    17. 	<body>
    18. 		 <input type="button" value="点击" />
    19. 		 
    20. 		 <input type="button" value="取消" />
    21. 	body>

    绑定多个事件

    1. $("ul li").bind({
    2. 			 	 	mouseover:function(){
    3. 			 	 		 console.log("mouseover")
    4. 			 	 	},
    5. 			 	 	mouseout:function(){
    6. 			 	 		console.log("mouseout")
    7. 			 	 	}
    8. 			 	 })
    9. 			 	 $("input[type='button']").click(function(){
    10. 			 	 	 $("ul li").unbind("mouseout")
    11. 	 })

    bind绑定的事件对于新添加的元素不起效果的

    1. <html>
    2. 	<head>
    3. 		<meta charset="UTF-8">
    4. 		<title>绑定多个事件title>
    5. 		<script src="js/jquery-1.12.4.js">script>
    6. 		<script>
    7. 			 $(function(){
    8. 			 	/* $("ul li").on({
    9. 			 	 	mouseover:function(){
    10. 			 	 		 $(this).css("background-color","orange")
    11. 			 	 	},
    12. 			 	 	mouseout:function(){
    13. 			 	 		$(this).css("background-color","green")
    14. 			 	 	}
    15. 			 	 })*/
    16. 			 	$("ul").on("mouseover","li",function(){
    17. 			 		 $(this).css("background-color","orange")
    18. 			 	})
    19. 			 	$("ul").on("mouseout","li",function(){
    20. 			 		$(this).css("background-color","green")
    21. 			 	})
    22. 			 	 $("input[type='button']:first").click(function(){
    23. 			 	 	 $("ul li").unbind("mouseout")
    24. 			 	 })
    25. 			 	 $("input[type='button']:last").click(function(){
    26. 			 	 	 var $li = $("
    27. 5
      28. ")
  • $("ul").append($li)
  • })
  • })
  • script>
  • head>
  • <body>
  • <input type="button" value="解除" />
  • <input type="button" value="追加元素" />
  • <ul>
  • <li>1li>
  • <li>2li>
  • <li>3li>
  • <li>4li>
  • ul>
  • body>
  • html>

    • 对于新添加的元素，需要使用on事件。请注意使用语法

    1. $(parent).on("事件名","具体的子元素",function(){
    2.  
    3. })

    3.5 复合事件

    hover()方法相当于mouseover与mouseout事件的组合

    1. <script type="text/javascript">
    2.     $(document).ready(function(){
    3.         $("#myaccound").hover(function(){
    4.             $("#menu_1").css("display","block");
    5.         },
    6.         function(){
    7.             $("#menu_1").css("display","none");
    8.         });
    9.     });
    10. script>

    四、动画

    1、显示及隐藏元素

    1. $(document).ready(function(){
    2.     $("#show").click(function(){
    3.         $("div").show(2000);
    4.     });
    5.     $("#hidden").click(function(){
    6.         $("div").hide("fast");
    7.     });
    8. });

    toggle()除了可以模拟鼠标的连续单击事件外，还能用于切换元素的可见状态

    1. $("#togg").click(function(){
    2.     $("div").toggle();
    3. });

    fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果

    1. $("#in").click(function(){
    2.     $("div").fadeIn("slow");
    3. });
    4. $("#out").click(function(){
    5.     $("div").fadeOut(2000);
    6. });

    slideDown() 可以使元素逐步延伸显示，slideUp()则使元素逐步缩短直至隐藏

    1. $("#down").click(function(){
    2.     $("div").slideDown("slow");
    3. });
    4. $("#up").click(function(){
    5.     $("div").slideUp("slow");
    6. });

    五、jQuery操作Dom

    5.1 、操作CSS

    1、css来改变样式

    选择器.css("属性名","值").css("属性名","值")
选择器.css({"属性名":"值","属性名":"值"})
    1. <script>
    2. 			 $(function(){
    3. 			 	 $("p").css("color","white").css("text-indent","2em")
    4. 			 	 $("p").css({"font-size":"16px","background-color":"orange","line-height":"35px"})
    5. 			 })
    6. script>
    7.  
    8. <body>
    9. 		 <p>我是一个段落p>
    10. body>

    2、addClass，removeClass的使用

    选择器.addClass("className1 className2")
选择器.removeClass("className1 className2")
    1.  $(function(){
    2. 			 	 $("p").css("color","white").css("text-indent","2em")
    3. 			 	 $("p").css({"font-size":"16px","background-color":"orange","line-height":"35px"})
    4. 			     
    5. 			     $("div").addClass("two one")// 可以添添加一个样式也可以用空格隔开添加多个样式
    6. 			     $("div").mouseover(function(){
    7. 			     	$(this).removeClass("two").addClass("three")
    8. 			     }).mouseout(function(){
    9. 			     		$(this).removeClass("three").addClass("two")
    10. 			     })
    11. 			 })

    3、 toggleClass()模拟了addClass()与removeClass()实现样式切换的过程

    toggleClass(class)

    5.2 内容以及value属性

    内容：html()以及text()

    可以借助html()来获取元素中的内容，包含html的内容。也可以借助改方法给元素内部添加信息

    可以借助text()获取元素内部的文本信息。

    1. <body>
    2. 		 <p>我是一个段落p>
    3. 		 
    4. 		 <div>
    5. 		 	我的一个div <input type="checkbox" />java
    6. 		 div>
    7. 		 <div>
    8. 		 <input type="button" value="GET" /> 
    9. 		 <input type="text" name="username" />
    10. 		 <textarea name="intro">我的兴趣爱好是.....textarea>
    11. 		 div>
    12. 	body>
    13.  $("input[type='button']").click(function(){
    14. 			     	var v =  $("div:first").text()
    15. 			     	console.log(v)
    16. 			     	$("div:first").html("<input type='radio'/>男")
    17. 			     	$("div:first").text("<input type='radio'/>男")
    18. })
    语法参数功能
    html()无参数用于获取第一个匹配元素的HTML内容或文本内容
    html(content)content参数为元素的HTML内容用于设置所有匹配元素的HTML内容或文本内容
    text()无参数用于获取所有匹配元素的文本内容
    text (content)content参数为元素的文本内容用于设置所有匹配元素的文本内容

    val()可以获取或设置元素的value属性值

    1.  $("input[type='button']").click(function(){
    2. 			     	var v =  $("div:first").text()
    3. 			     	console.log(v)
    4. 			     	$("div:eq(1)").html("男")
    5. 			     //	$("div:first").text("男")
    6. 			        var name  =   $("input[name='username']").val()
    7. 			        console.log(name)
    8. 			        var intro =   $("[name='intro']").val()
    9. 			        console.log(intro)
    10. 			     })

    获取其他属性的值 attr

    1. var src =  $("img").attr("src")//获取属性值src
    2.  
    3. $("img").attr("src","images/meiri.gif")//给img标签的src属性重新赋值

    如何获取select框的值

    1. //如果是一个值
    2. var $selectedop = 	$("[name='address']").children(":selected")//选中的option的选项
    3. var address =  $selectedop.val();
    4.  console.log(address)
    5.  
    6. //如果是多个值，获取的是一个集合，需要循环
    7. $("[name='address']").children(":selected").each(function(i,v){
    8. 			 	  	  var v =  $(v).val()
    9. 			 	  	  console.log(v)
    10. 			 	  })
    11. 如何获取单选框是否选中
    12.  
    13.  //获取是否选中，不能使用attr属性，要使用prop获取是否选中的结果
    14. // $("[name='sex']") 应该是一个集合，如果直接$([name='sex']").prop("checked") 值判断了第一个元素
    15. /* var ch =   $("[name='sex']").prop("checked")
    16. 	console.log(ch)*/
    17. var b = false;
    18.  var sex = "";
    19.  $("[name='sex']").each(function(i,ele){
    20. 			 	 var c =  $(ele).prop("checked")
    21. 			 	  	  if(c){
    22. 			 	  	  	 b=true
    23. 			 	  	  	 sex = $(ele).val()
    24. 			 	  	  }
    25. })			 	 	
    26. console.log(b+"---"+sex)

    多选框同单选框

    1. var tec = new Array()
    2. 				 	$("[name='tec']").each(function(i,ele){
    3. 				 		var c =  $(ele).prop("checked")
    4. 				 		if(c){
    5. 				 			tec.push($(ele).val())
    6. 				 		}
    7. 	})
    8. 	console.log(tec)

    5.3 节点操作

    5.3.1 创建节点

    $(html)：使用HTML字符串创建jQuery节点
如: var $newNode2=$(“
  • 海贼王
    • ”);

    5.3.2 追加子节点

    插入子节点 元素内部插入子节点

    语法功能
    append(content)$(A).append(B)表示将B追加到A中 如：$("ul").append($newNode1);
    appendTo(content)$(B).appendTo(A)表示把B追加到A中 如：$newNode1.appendTo("ul");
    prepend(content)$(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1);
    prependTo(content)$(A). prependTo (B)表示将A前置插入到B中 如：$newNode1. prependTo ("ul");
    1.  $(function(){
    2. 			 	
    3. 			 	$("[type='button']").click(function(){
    4. 			 		var $li = $("
    5. li新
      6. ")
  • //$("ul").append($li) 等价下面一行 都是再ul元素的内部追加li节点
  • //$li.appendTo($("ul"))
  • //$("ul").prepend($li) 等价下面一行，也是再ul的内部在前面追加li节点
  • $li.prependTo($("ul"))
  • })
  • })

    • 插入同辈节点

    语法功能
    after(content)$(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1);
    insertAfter(content)$(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul");
    before(content)$(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
    insertBefore(content)$(A). insertBefore (B)表示将A插入到B之前 如：$newNode1.insertBefore("ul");
    1. <script>
    2. 			 $(function(){
    3. 			 	
    4. 			 	$("[type='button']").click(function(){
    5. 			 		var $li = $("
    6. li新
      7. ")
  • //$("ul").append($li)
  • //$li.appendTo($("ul"))
  • //$("ul").prepend($li)
  • // $li.prependTo($("ul"))
  • // $("ul li:eq(1)").after($li)//在第二个li后面追加元素，此时追加的是与li平级的元素 等价下一行
  • // $li.insertAfter( $("ul li:eq(1)"))
  • // $("ul li:eq(1)").before($li)//在第二个li前面追加一个元素此时追加的是与li平级的元素等价下一行
  • $li.insertBefore($("ul li:eq(1)"))
  • })
  • })
  • script>
  • head>
  • <body>
  • <input type="button" value="添加"/>
  • <ul>
  • <li>节点1li>
  • <li>节点2li>
  • <li>节点3li>
  • <li>节点4li>
  • <li>节点5li>
  • ul>
  • body>

    • 5.3.3 替换节点

    1. $("ul li:eq(1)").replaceWith($li) //等价下面的代码
    2. $li.replaceAll($("ul li:eq(1)"))

    5.3.4 克隆节点

    复制节点

    clone()用于复制某个节点（true:指示事件处理函数是会被复制,false:不会赋值）

    1.  var $newli =  $("ul li:eq(0)").clone(true)
    2. $("ul").append($newli)）

    5.3.5 刪除節點

    remove()：删除整个节点 (该方法会保留当前jquery对象，该方法会有返回值类型，是该节点)

    detach()：删除整个节点，保留元素的绑定事件、附加的数据

    empty()：清空节点内容 【不多】

    5.3.6 移除元素的属性

    removeAttr()用来删除元素的属性

    语法功能
    css()设置或返回匹配元素的样式属性
    height([value])设置或返回匹配元素的高度
    width([value])设置或返回匹配元素的宽度
    offset([value])返回以像素为单位的top和left坐标。此方法仅对可见元素有效
  • 相关阅读:
    前端框架 React中Typecript的使用
    解锁小鹏G9的隐藏功能
    python使用matplotlib可视化subplots子图、subplots绘制子图并为可视化的多个子图设置共享的X轴
    Arduino框架下轻量级ssd1306 I2C屏幕驱动库
    怎么成为稚晖君？
    css样式操作、动画操作
    matlab 最小二乘拟合平面并与XOY平面对齐
    Spark任务调度概述_大数据培训
    公共方法~~
    【CNN-GRU预测】基于卷积神经网络-门控循环单元的单维时间序列预测研究（Matlab代码实现）
  • 原文地址：https://blog.csdn.net/qq_58029155/article/details/127796206