jQuery 笔记

发布于: 2020 年 08 月 20 日
jQuery笔记

调试

  • 手动断点

debugger;



  • 弹窗(字符串)

alert();



  • 控制台(对象)

console();



元素

  • 获取当前对象

$srcObj



select

  • 取得当前点击的下拉框中的value值

//method1
var param = $srcObj.val();
//method2
var param = $srcObj.find("option:selected").val();



  • 取得当前点击的下拉框中的文本值并截取

var param = $srcObj.find("option:selected").text().split("[")[0];



  • 选中某个option(value=1)

//method1
$("#id").val("1");
//method2
$('#rmCaseTypeTd').children('option').each(function(){
if($(this).val()=="1"){
$(this).prop('selected',true);
}
});



  • 下拉框排序

$('#selectId option').sort(function(a,b){
//text
var aText = $(a).text().toUpperCase();
var bText = $(b).text().toUpperCase();
//value
var aText = $(a).val()*1;
var bText = $(b).val()*1;
//attr()
var aText = $(a).attr("rmcasecomnum");
var bText = $(b).attr("rmcasecomnum");
if(aText>bText) return 1;
if(aText<bText) return -1;
return 0;
}).appendTo('#selectId');



  • 清空下拉框

$("#selectId").empty();



  • 在下拉框中最前面增加选项

$("#select").prepend("<option value='' selected='selected'>----请选择----</option>");



  • 拼接下拉框

var content="<option value='' selected>----请选择----</option>";
$.each(data.data,function(i,n){
content+="<option value="+n+">"+n+"</option>"
})
$("#select").html(content);



table

  • 循环表格

$.each($("#tbody").find("tr"),function(i,n){
var oper = $(n).find("input[name='oper']").val();
var applyId = $(n).find("td[name='PaaSProdApplyId']").text();
});



  • 拼接表格

var MegTbl = "<table>";
$.each(resultStr,function(i,n){
var productName = n.productName;
MegTbl += "<tr><td>" + productName + "</td></tr>";
});
MegTbl += "</table>";



  • 上(左)一个/下(右)一个

.prev();
.next();



  • 隐藏当前元素所在行的span

$srcObj.closest("tr").find("span").removeClass("none");



单选框/复选框

  • 获取被选中的checkbox的值(以数组的形式)

var projIds = [];
$("input:checkbox[name='checkboxTd']:checked").each(function() {
projIds.push($(this).val());
});



  • 获取被选中的radio的值

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();



属性

  • 根据id(a)取value值

$("#a").val();



  • 根据name(a)取value值

$("*[name='a']").val();



  • 获取元素长度(该元素下是否有子元素)

.length;



  • 获取父元素下的第一个子元素的自定义属性xxx的值

$(".name")[0].attributes.xxx.value;



  • 设置(单个或多个)元素的属性值

attr("","");
// 非自定义属性可使用true/false
attr("disabled",true);



  • 获取元素的属性值

attr("");



  • 移除某个元素的属性(可以去掉style属性)

$("#this").removeAttr("style");
// 非自定义属性可使用true/false
attr("disabled",false);



  • 添加某个元素的class

addClass("");



  • 移除某个元素的class

removeClass("");



  • 切换class

.toggleClass("");



  • style

style="background-color:white;"
style="cursor:pointer;"



  • 其他

readonly



发布于: 2020 年 08 月 20 日 阅读数: 25
用户头像

还未添加个人签名 2019.03.28 加入

还未添加个人简介

评论

发布
暂无评论
jQuery笔记