jquery基础之易混淆知识点汇总（一）

目录

一、.html()和.text()的区别

二、移除元素中  .remove()和.empty()的区别

三、遍历

一、祖先

二、后代

三、同胞

四、获取raido选中的值

五、获取checkbox选中的值

六、获取select选中的值

一、.html()和.text()的区别

1）.html()获取元素内的所有内容，包括标签

2）.text()获取元素内的所有文本内容

示例：

html部分：

	枯藤老树昏鸦
	小桥流水人家

js部分：

$(function(){
	console.log($('.message').html());
	console.log($('.message').text());
				
})

打印结果：

二、移除元素中  .remove()和.empty()的区别

.remove是删除被选元素及子元素

.empty是删除被选元素的子元素

其中，删除同级的某个元素，即过滤被删除的元素。示例：

html部分：

	
001
	
002
	
003

js部分：

$('.mypo4 p').remove('.one');

 浏览器显示：

注意：过滤器只能删除同级，不能作用于子元素。如：$('.mypo4').remove('.one')；是没效果的

三、遍历

一、祖先

1、 .parent():被选中元素的直接父元素。

二、后代

1、 .children()：被选元素的所有直接子元素。

2、 $('div').find('span'):返回属于

后代的所有元素。

三、同胞

1、 .siblings()：被选元素的所有同胞元素。还可以加筛选，如..siblings(‘p')

最常用的是按钮点击效果：

css部分：

html部分：

			

				

					
按钮一
					
按钮二
					
按钮三
					
按钮四
				
			

js部分：

$('.buttonBox .button').click(function(){
    $(this).addClass('option').siblings().removeClass('option');
})

效果：

 

 2、 .next():被选中元素的下一个同胞元素。

3、 .nextAll():被选中元素下面所有同胞元素。

4、.nextUntil():返回介于两个给定参数之间所有跟随的同胞元素。

如：$('h2').nextUntil('h6');

注：.prev()  ,prevAll()  .prevUntil()   表示上一个同胞元素。用法同上。

四、获取raido选中的值

html部分：

			

				
				苹果
				
				香蕉
			

js部分：

				//1.
				let myFuirt  = $(".radio input[type='radio']:checked").val();
				console.log(myFuirt)
				//2
				let myFuirt2  = $(".radio :radio:checked").val();
				console.log(myFuirt2)
				//3
				let myFuirt3  = $(".radio input[name='filter']:checked").val();

三种方式都可以。

五、获取checkbox选中的值

html部分：

	
	牛奶
	
	鸡蛋
	
	面包

js部分：

$.each($(".check:checkbox:checked"), function() {
    console.log($(this).val())
})

var chk_value = []; //定义一个数组
$('input[name="foot"]:checked').each(function() {
 //遍历每一个名字为nodes的复选框，其中选中的执行函数
	chk_value.push($(this).val()); //将选中的值添加到数组chk_value中
});
var selectId = chk_value.join(",");
console.log(selectId)

jquery获取checkbox选中的值，包括全选 取消全选 反选 选中奇数行 获取选中的值。

html部分：

苹果 
橘子 
梨子 
香蕉



 
 
 
 
 

js部分：

$("#btn1").on("click",function(){
	$("[name='xpz']").prop("checked",'checked');//全选 
});
 
$("#btn2").on("click",function(){ 
	$("[name='xpz']").removeAttr("checked");//取消全选 
}) 
$("#btn3").click(function(){ 
	$("[name='xpz']:even").prop("checked",'true');//选中所有奇数 
}) 
$("#btn4").click(function(){ 
	$("[name='xpz']").each(function(){ 
		this.checked=!this.checked;
	}) 
}) 
$("#btn5").click(function(){ 
	var chk_value =[];//定义一个数组
	$('input[name="xpz"]:checked').each(function(){//遍历每一个名字为nodes的复选框，其中选中的执行函数
		chk_value.push($(this).val());//将选中的值添加到数组chk_value中
	});
	var selectId = chk_value.join(",");
	alert(selectId);
}) 

 

六、获取select选中的值

html部分：

	第一名
	第二名
	第三名

js部分：

$('option:selected').val();