jquery

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > jquery > jQuery操作Dom元素

jQuery操作Dom元素与遍历以及JS遍历详细讲解

作者:六六的小帅

这篇文章主要介绍了jQuery操作Dom元素、jQuery遍历、JavaScript遍历,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

jQuery操作Dom元素

jQuery的主要用法为“选择某个dom元素,再对其进行某种操作”;jQuery一般简写成“$”。使用CSS选择器获取元素

  $(document) //选择整个文档对象
  $('#myId') //选择ID为myId的网页元素
  $('div.myClass') // 选择class为myClass的div元素
  $('input[name=first]') // 选择name属性等于first的input元素

使用jQuery特有的表达式获取

  $('a:first') //选择网页中第一个a元素
  $('tr:odd') //选择表格的奇数行
  $('#myForm :input') // 选择表单中的input元素
  $('div:visible') //选择可见的div元素
  $('div:gt(2)') // 选择所有的div元素,除了前三个
  $('div:animated') // 选择当前处于动画状态的div元素

jQuery的链式操作,选中某个dom元素后进行一系列操作

	// 案例
   $('div').find('h3').eq(2).html('Hello');
	// 分解
  $('div') //找到div元素
     .find('h3') //选择div元素中的h3元素
     .eq(2) //选择第3个h3元素
    .html('Hello'); //将它的内容改为Hello	
  // 之所以可以这样操作,是因为每一步的jQuery操作返回的都是一个对象
  // jQuery还提供了.end()函数,可以使结果后退一步
  $('div')
   .find('h3')
   .eq(2)
   .html('Hello')
   .end() //退回到选中所有的h3元素的那一步
   .eq(0) //选中第一个h3元素
   .html('World'); //将它的内容改为World  

jQuery创建Dom元素:只要把新元素直接传入jQuery的构造函数就行。(注意:jQuery构造函数括号中的内容使用单引号,不要使用双引号,因为单引号可以直接进行字符串拼接,否则无法区分class后面的双引号)

  $('<p>Hello</p>'); // 注意使用单引号
  $('<li class="new">new list item</li>');
  $('ul').append('<li>list item</li>');

jQuery移动元素有两种方式

	// 选中一个div元素,将它移动到p元素的后面
	// 方式一
	$('div').insertAfter($('p'));
	// 方式二
	$('p').after($('div'));

表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。你可以根据需要,选择到底使用哪一种方法。

7. jQuery插入元素

  .insertAfter()和.after():在现存元素的外部,从后面插入元素
  .insertBefore()和.before():在现存元素的外部,从前面插入元素
  .appendTo()和.append():在现存元素的内部,从后面插入元素
  .prependTo()和.prepend():在现存元素的内部,从前面插入元素

jQuery修改元素值,获取元素值,给元素赋值(jQuery使用了同一个函数,来完成取值(getter)和赋值(setter),即"取值器"与"赋值器"合一。到底是取值还是赋值,由函数的参数决定。赋值也可以对原来的属性进行修改。)

  $('h1').html(); //html()没有参数,表示取出h1的值
  $('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值
	// 常用函数
  .html() 取出或设置html内容
  .text() 取出或设置text内容
  .attr() 取出或设置某个属性的值 // 这个常用在修改iframe元素的src属性
  .width() 取出或设置某个元素的宽度
  .height() 取出或设置某个元素的高度
  .val() 取出某个表单元素的值

jQuery遍历几种方式

选择器遍历两种方式

	// 方式一
	$('div').each(function (i){
	   i就是索引值
	   this 表示获取遍历每一个dom对象
	});
	// 方式二
	$('div').each(function (index,domEle){
	  index就是索引值
	  domEle 表示获取遍历每一个dom对象
	});

另一种遍历方式

	// 先获取某个集合对象
	// 遍历集合对象的每一个元素
	var d=$("div");
	$.each(d,function (index,domEle){
	  d是要遍历的集合	
	  index就是索引值	
	  domEle 表示获取遍历每一个dom对	
	});

总结:

JavaScript遍历

数组遍历

// for --使用变量将数组长度缓存起来,在数组较长时性能优化效果明显
for(var i=0,len=arr.length;i<len;i++){
	console.log("元素:"+arr[i]);
}
// forEach --ES5语法,对数组的每个元素执行一次提供的函数,不能使用break、return
arr.forEach(function(item,index,arr){
	console.log("元素:"+item+" 索引:"+index+" 整个数组:"+arr);
})
// map --ES5语法,创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果
arr.map(function(val,index){
	console.log("元素:"+val+" 索引:"+index);
	return val*val;
})
// for...of --ES6语法,可以遍历Array、Set、Map、String、TypedArray、arguments等可迭代对象,可以使用break、continue
for(let item of arr){
	console.log("元素:"+item);
}

对象遍历

// for...in --以任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性,对于每个不同的属性,语句都会被执行
for(var key in obj){
	console.log("属性:"+key+" 值:"+obj[key]);
}
// Object.keys() --返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用for...in循环遍历该对象时返回的顺序一致
Object.keys(obj);
// Object.values() --返回一个给定对象自身的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同(区别在于 for-in 循环枚举原型链中的属性)
Object.values(obj);
// Object.getOwnPropertyNames() --返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组
Object.getOwnPropertyNames(obj);

字符串遍历

// for...of --ES6语法,可以遍历Array、Set、Map、String、TypedArray、arguments等可迭代对象,可以使用break、continue
for(let char of string){
	console.log("字符:"+char);
}

到此这篇关于jQuery操作Dom元素与遍历以及JS遍历详细讲解的文章就介绍到这了,更多相关jQuery操作Dom元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文