概述
目录
一、.html()和.text()的区别
二、移除元素中 .remove()和.empty()的区别
三、遍历
一、祖先
二、后代
三、同胞
四、获取raido选中的值
五、获取checkbox选中的值
六、获取select选中的值
一、.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');
})效果：
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">第一名</option>
<option value="two" selected="selected">第二名</option>
<option value="three">第三名</option>
</select>js部分：
$('option:selected').val();最后
以上就是淡定小蝴蝶为你收集整理的jquery基础之易混淆知识点汇总（一）一、.html()和.text()的区别二、移除元素中 .remove()和.empty()的区别三、遍历四、获取raido选中的值五、获取checkbox选中的值六、获取select选中的值的全部内容，希望文章能够帮你解决jquery基础之易混淆知识点汇总（一）一、.html()和.text()的区别二、移除元素中 .remove()和.empty()的区别三、遍历四、获取raido选中的值五、获取checkbox选中的值六、获取select选中的值所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复