jQuery基础（选择器，jQuery对象，文档操作）

最新推荐文章于 2024-02-24 22:51:16 发布

咸鱼one

最新推荐文章于 2024-02-24 22:51:16 发布

阅读量189

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45921263/article/details/117741459

版权

文章目录

前言
一、jQuery的选择器
二、dom对象和jQuery对象的转化（重点）
- 1.dom对象和jQuery对象的概念
- 2.dom对象与jQuery对象之间的转化
三.jQuery的核心
四.jQuery的文档操作（方法）

前言

由于上篇文章对于jQuery的基本的概念及原理做了阐述，这篇主要是其中的重要内容总结，比如说，选择器，jQuery对象，核心，文档操作，筛选

一、jQuery的选择器

1.id选择器

console.log($('#p').html()); //写在<script></script>中
<body>
		<p id = "p">张三</p> 
</body>

2.标签名去获取

alert($('p').html() + "defe");
alert($('p').length);
<body>
		<p id = "p">林志玲</p> 
		<p id = "p1" class = "one">李四</p>
</body>

3.类选择器

  alert($('.one').html()) ;
  <body>
		<p id = "p1" class = "one">李四     </p>
  </body>

4.子元素选择器

console.log($('body>p').html()) ;
<body>
		<p id = "p">张三</p> 
</body>

5.通过 :first和:last

alert($('p:first').html())	   		alert($('p:last').html()) ;
<body>
		<p id = "p">林志玲</p> 
		<p id = "p1" class = "one">李四</p>
</body>

补充：
1.通过属性来获取元素对象( 获取写了name属性的元素)
2.其中:first,:last,:after,:eq(),:gt(),:lt() 同时也是jQuery的筛选

  
alert($("[name]").length)    //表示获取写了name属性的元素
alert($('div[name]').length)  //表示获取写了name属性的div标签
alert($('div[name=d1]').length) ;  //表示获取name属性的值是d1的div标签 
 alert($('div[name!=d1]').length) ;  //表示获取name属性的值不是d1和没有写name属性的div标签
<body>
	<div name >张三</div>
		<div >李四</div>
		<div name = "d1">赵五</div>
		<div name = "d1">吴六</div>
		<span name = "span">刘德</span>
</body>

2.获取属性的值以某个值开头/结尾/包含

alert($('h4[name^=a]').html())   //获取name属性的值是以a开头的h4标签
alert($('h4[name$=de]').html())   //获取name属性的值是以de结尾的h4标签
alert($('h4[name*=c]').html())  

<body>
<h4 name = "abcde">小刘</h4>
</body>

6.过滤选择器

选择器	描述
:odd()	选取索引是`偶数`
:even()	选取索引是`奇数`
:eq(索引序号)	选取索引`等于`索引号的元素
:gt(索引序号)	选取索引`大于`索引号的元素
:lt(索引序号)	选取索引`小于`索引号的元素

 $('tr:odd').css("background-color",'pink')
 $('tr:even').css("background-color",'hotpink')
 $('tr:eq(0)').css("background-color",'pink') ;
 $('tr:lt(2)').css("background-color",'pink') ;
 $('tr:gt(1)').css("background-color",'green') ;

二、dom对象和jQuery对象的转化（重点）

1.dom对象和jQuery对象的概念

dom对象：就是通过dom对象获取到的对象。(dom方式：通过document对象的方法或者导航属性)
jQuery对象：将dom对象进行了封装后的对象。
注意：dom对象不能调用jQuery的方法
jQuery对象也不能调用dom独享的属性和方法。

2.dom对象与jQuery对象之间的转化

1.dom对象----->jQuery对象：$(dom对象)
2.jQuery对象------>dom对象：
（1）jQuery对象.get(0);
（2）jquery对象[索引]

  //获取dom对象
   var p = document.getElementById("p") ;
	alert(p.innerHTML) ;
    //alert(p.html()) ;   //报错的，因为没有给p对象定义html方法
			   
  //将dom对象转为jquery对象
  alert($(p).html())
			   
  //获取jquery对象
   let p = $('#p') ;
   alert(p.innerHTML) ;   //弹出undefined，因为jquery对象不能调用dom对象的属性和方法
			   
   alert(p.get(0).innerHTML)
   alert(p[0].innerHTML)

三.jQuery的核心

1。核心函数：jQuery():接受一个字符串，其中包含了用于匹配元素集合的 CSS 选择器。

2.css方法：设置或返回被选元素的一个或多个样式属性。有一个参数，就是返回属性值，两个参数，设置属性值。

//此处的jQuery可以写成$形式
  jQuery('#p').css('background-color','yellowgreen').css('width','200px').css('height',"200px").css("border","3px solid green") ;  
  alert(jQuery('#p').css('width')) ;  //获取属性width的值

3.each方法:为每个匹配元素规定运行的函数。
语法：$(selector).each(function(index,element)) :index(选择器的index位置)，element(当前元素)；

//HTML代码没有呈现出来
 $(document).ready(function(){
			    let ds = $('div[name=d1]') 
				
				ds.each(function(){
					alert($(this).html()) ;
				}) ;
})

四.jQuery的文档操作（方法）

注意：由于文档的操作方法较多，我就没有一一列举出来，以展示部分代码来说明方法的用途。

  <script> 
		   $(function(){
			   $('#btn').click(function(){
				   //创建一个图片节点
				   let img = $("<img src = 'img/1.jpg' width=200 height = 200>")
				   
				   //加到div节点之中
				   $('#d').append(img) ;
			   }) ;
			   
			   $('#btn1').click(function(){
					   //创建一个图片节点
					   let img = $("<img src = 'img/2.jpg' width=200 height = 200 id = 'img'>")
					   
					   //加到div节点之后
					  img.appendTo($('#d'))
			   }) ;
			   
			   $('#btn2').click(function(){
					  $('#d').empty() //删除匹配元素的集合中所有的子节点
			   }) ;
			   
			   $('#btn3').click(function(){
					 $('#d').remove() ; //移除所有匹配的元素
			   }) ;
			   
			   $('#btn4').click(function(){
			   		$('#h4').after($("<img src = 'img/3.jpg' width=200 height = 200 >")) ; 
			   }) ;
			   
			   $('#btn5').click(function(){
			   		$('#span').before($("<img src = 'img/4.jpg' width=200 height = 200 >")) ; 
			   }) ;
			   $('#btn6').click(function(){
			   		$('span').replaceWith($("<img src = 'img/1.jpg' width=200 height = 200 >")) ; 
			   }) ;
			   
			   $('#btn7').click(function(){
			   		$("<img src = 'img/2.jpg' width=200 height = 200 >").replaceAll($('span')) ;
			   }) ;
		   })		   
		  
	   </script> 
	<body>
		<div id = "d"></div>
		<button id= "btn">将一幅图片添加到div中（append方法）</button>
		<button id= "btn1">演示appendTo方法</button>
		<button id= "btn2">演示empty方法</button>
		<button id= "btn3">演示remove方法</button>
		<button id= "btn4">演示after方法</button>
		<button id= "btn5">演示before方法</button>
		<button id= "btn6">演示replaceWith方法</button>
		<button id= "btn7">演示replaceAll方法</button>
		
		<p id = "p"><span id = "h4">你好</span><span id = "span">span</span></p>
		
	</body>

咸鱼one

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础（选择器，jQuery对象，文档操作）

文章目录前言一、jQuery的选择器二、dom对象和jQuery对象的转化（重点）1.dom对象和jQuery对象的概念2.dom对象与jQuery对象之间的转化三.jQuery的核心四.jQuery的文档操作（方法）前言由于上篇文章对于jQuery的基本的概念及原理做了阐述，这篇主要是其中的重要内容总结，比如说，选择器，jQuery对象，核心，文档操作，筛选一、jQuery的选择器1.id选择器console.log($('#p').html()); //写在<script>&l
复制链接

扫一扫