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

林小白的日常

已于 2024-06-19 14:53:47 修改

阅读量744

点赞数

分类专栏： jquery 文章标签： html5 前端 javascript

于 2021-11-25 15:18:22 首次发布

本文链接：https://blog.csdn.net/weixin_51609337/article/details/121508895

版权

jquery 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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

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

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

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

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

示例：

html部分：

<div class="message">
	枯藤老树昏鸦
	<span class="peom">小桥流水人家</span>
</div>

js部分：

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

打印结果：

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

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

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

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

html部分：

<div class="mypo4">
	<p class="one">001</p>
	<p>002</p>
	<p>003</p>
</div>

js部分：

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

浏览器显示：

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

三、遍历

一、祖先

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

二、后代

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

2、 $('div').find('span'):返回属于<div>后代的所有<span>元素。

三、同胞

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

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

css部分：

		<style type="text/css">
			.buttonBox{
				width: 540px;
				display: flex;
				justify-content: space-between;
				margin-top: 20px;
				
			}
			.buttonBox .button{
				height: 60px;
				width: 130px;
				background-color: darkseagreen;
				color: aliceblue;
				line-height: 60px;
				text-align: center;
				border-radius: 10px;
			}
			.buttonBox .button:hover{
				background-color: gainsboro;
				color: black;
			}
			.buttonBox .option{
				background-color: green;
			}
		</style>

html部分：

			<section>
				<div class="buttonBox">
					<div class="button">按钮一</div>
					<div class="button">按钮二</div>
					<div class="button">按钮三</div>
					<div class="button">按钮四</div>
				</div>
			</section>

js部分：

$('.buttonBox .button').click(function(){
    $(this).addClass('option').siblings().removeClass('option');
    //获取点击第几个按钮，从0开始
    let index = $('.buttonBox .button').index(this)
})

效果：

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

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

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

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

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

四、获取raido选中的值

html部分：

			<div class="radio">
				<input type="radio" name="filter" id="apple" value="apple" />
				<label for="apple">苹果</label>
				<input type="radio" name="filter"  id="banana" value="banana" />
				<label for="banana">香蕉</label>
			</div>

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部分：

<div class="check">
	<input type="checkbox" name="foot" id="milk" value="milk" />
	<label for="milk">牛奶</label>
	<input type="checkbox" name="foot" id="egg" value="egg" />
	<label for="egg">鸡蛋</label>
	<input type="checkbox" name="foot" id="bread" value="bread" />
	<label for="bread">面包</label>
</div>

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部分：

<input type="checkbox" name="xpz" value="1"/>苹果 
<input type="checkbox" name="xpz" value="2"/>橘子 
<input type="checkbox" name="xpz" value="3"/>梨子 
<input type="checkbox" name="xpz" value="4"/>香蕉
<br/><br/>
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="取消全选"> 
<input type="button" id="btn3" value="选中所有奇数"> 
<input type="button" id="btn4" value="反选"> 
<input type="button" id="btn5" value="获得选中的所有值">

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部分：

<select name="">
	<option value="one" data="a">第一名</option>
	<option value="two" data="b" selected="selected">第二名</option>
	<option value="three" data="c">第三名</option>
</select>

js部分：

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

更改select并获取data的值：

$('select').change(function (){
    let data = $(this).find("option:selected").attr('data');

})

设置select中第三个为选中选项

$('select').val('three')

七、从select选项中获取自定义属性

html部分：

<select id="location">
    <option value="a" myTag="123">My option</option>
    <option value="b" myTag="456">My other option</option>
</select>

js部分：

$(function() { 
    $("#location").change(function(){ 
        var element = $(this).find('option:selected'); 
        var myTag = element.attr("myTag"); 

        $('#setMyTag').val(myTag); 
    }); 
});