jquery常用
1.jquery选择器有哪些？标签元素选择器条件元素选择器
2.Jquery选择器对象应用2.1jquery修改（设置）对象属性2.2Jquery移除属性2.3Jquery标签遍历2.4Jquery获取DOM数组对象、下标2.5jquery过滤对象2.6Jquery常见事件监听事件on派发（触发）事件trigger
3.Jquery在CSS常用方法汇总3.1 元素属性相关3.2 元素位置相关3.3 样式相关3.4 尺寸相关
4.皇榜彩蛋
【写在前面】其实在开发的过程中jquery是目前我用的最多的，也用的比较的顺手，今天我就针对jquery选择器来进行一次扫盲，可能还有很多你不知道的jquery选择器，下面我就针对我再使用jquery的过程中遇到的所有选择器给大家做一个详解。 涉及知识点：jquery选择器，jquery获取div元素，jquery操作div元素，jquery触发事件，jquery修改元素样式，jquery修改元素位置
1.jquery选择器有哪些？
标签元素选择器
$("div") //元素选择器
$("#id") //id选择器
$(".class") //类选择器
$("[name=1]") //属性值选择器,前面可添加其他选择器
$("div[name*=1]").css({"width":"50px"})
$("#div1,.class1,#id3") //并列选择器
$("div input") //包含选择器
$("#bd input").val("#bd input");
条件元素选择器
$("div>input") //父子选择器
$("div>.class2").val("xxx")
$("div+div") //兄弟选择器
$(".class1:hidden") //所有不可见的元素选择器
$("div>.class2:hidden").val("xxx")
$(".class1:visible") //所有可见的元素选择器
$("#bd input:visible").val("#bd input");
$(".class1:empty") //所有不包含内容的元素选择器,类似的还有:last,:first,:not
$(".class1:enabled") //所有未指定disabled="disabled"的表单组件
$(".i1:enabled").val("未指定disabled的元素")
$(".class1:disabled") //所有指定disabled="disabled"的表单组件
$(".class1:checked") //所有指定checked="checked"的表单组件
$(":focus") //获取焦点的对象
$(".class1:selected") //所有指定selected="selected"的表单组件
$(".class1:nth-child(3n+2)") //所有class="class1"的第2,5,7,11…的元素选择器
$(DOM) //JS的DOM对象
$(document.getElementById("bd")).append(
$("",{ //新增input，使用JSON结构添加属性
type:"button"
,val:"xxx"
,click:function () {
alert("点击了button")
}
})
2.Jquery选择器对象应用
2.1jquery修改（设置）对象属性
要点：
$("div").attr({json})
举例：
$("")
.attr({type:"password"}) //设置属性
.css({"width":"200px","height":"200px"}) //设置样式
2.2Jquery移除属性
要点：
$("a").removeAttr("href")
举例：
$("div").removeAttr("class").removeAttr("id") //将id名和类名都移除
2.3Jquery标签遍历
要点：
$("div").each(function(index,elem){ 执行体 }) //匹配元素执行function内容体
举例：
$("#bd input").each(function (i,ele){//i是$("#bd input")返回的数组中的index
$(this).val(i+"----"); // $(this)jQuery对象
this.innerHTML(i+"----"); // this DOM对象
});
引伸知识点：
$("div").map(function(index,elem){ 执行体 })
其中map和这个each类似，map和.each(fun) 区别在于.map(fun)会生成新的数组newArray，. each(fun)不会。
2.4Jquery获取DOM数组对象、下标
主要作用是返回DOM对象数组，可以指定下标或者满足属性的子元素 要点：
$("div").get()
$("div").toArray()
$("div")[0]
$("div").eq(0) //第index+1个JQuery对象
它们4者的关系是
$("div").get(0)==$("div").toArray(0)[0] == $("div")[0] ==$("div").eq(0)[0]
举例：
$("#bd>input.i1").toArray(); //返回DOM对象数组
$("#bd>input.i1").get(1); //返回DOM对象
2.5jquery过滤对象
要点：
$("div").filter(".div:visible")//过滤获取满足css选择器的jQuery对象
举例：
$("input").filter(function (index) { //获取返回值为true的jQuery对象
if ($(this).val() > 5) //this 为DOM对象，$(this)为jQuery对象
return true;
else
return false;
}).val(">5");
2.6Jquery常见事件
监听事件on
要点：
$("div").on("myevent",fun{})
举例：
$("div").on("click",function{alert("你触发了点击事件")})
派发（触发）事件trigger
要点：
$("div").trigger(event)
举例：
$("button").click(function(){
$("input").trigger("select");
});
trigger() 方法触发被选元素的指定事件类型
3.Jquery在CSS常用方法汇总
3.1 元素属性相关
$("div").attr("href","修改值") //修改href属性值,区别于.css({xx:xx})
$("div").removeAttr("href") //删除href的属性值
$("div").html("abc"); //设置、获取innerHTML属性
$("xxx").is("div"); //判断'xxx'是否是div元素
$("div").text("ab") //设置、获取text文本属性
$("div").val("123"); //设置、获取值
3.2 元素位置相关
$("div").height(val)/width(val); //设置或获取内容的高度、宽度
$("div").position() //返回相对于父节点的{left:xx,top:xx}
$("div").offset() //返回绝对位置{left:xx,top:xx}
$("div").scrollTop(val)/scrollLeft() //设置或获取滚动条的位置
3.3 样式相关
$("div").css(json); //修改样式，区别于.attr({xx:xx})
$("div").css({"width":"100px","background":"#ff00ff"});
$("div").addClass("CSS样式名"); //可以理解为XXX添加Class名
$("div").addClass("mydiv"); //为div添加一个叫’mydiv’的样式名
$("div").toggleClass("CSS样式名"); //在2个Class名之间切换
$("div").addClass("mydiv");
$("div").on("click",function(){
$(this). toggleClass ("mydiv2");
});
$("div").removeClass("CSS样式名"); // 移除xxx的css样式名
$("div").hasClass("CSS样式名") //是否存在xxx的css样式名
3.4 尺寸相关
$("div").innerHeight(val); //内容的高度+padding * 2
$("div").appendTo(jQobj) //添加元素到
$("subdiv").remove() //删除subdiv元素
$("div").empty()
$("div").outHeight(boolean);
// 如果boolean为true：内容的高度+padding * 2 + margin *2 + border * 2
// 如果boolean为false：内容的高度+padding * 2 + border * 2
4.皇榜彩蛋
倾心打造佳作，愿解君之惑，如若有幸，盼君上榜助阵，特此敬谢！ 皇榜入口点击此处
参考链接
您阅读本篇文章共花了：
发表评论