导入jQuery文件:
查找标签
基础语法: $/jQuery("语法").方法名()
选择器:找到jQuery对象
不能使用jQuery对象调用原生方法
选择器:
例:
console.log($("#d1")[0].innerText); //根据id查找标签 id选择器 console.log($(".c1")); //根据样式类查找 样式类选择器 console.log($("p")); //根据标签名查找 标签名选择器 console.log($("div.c1")); //找到div标签含有c1样式类的标签 配合使用 console.log($("*")); //找到所有的标签 所有元素选择器 console.log($("#d1, .c1, span")); //找到符合id为d1的标签或者样式类为c1标签或者span标签 组合选择器 层级选择器: console.log($("#d1 p")); //在id为d1的标签中找到所有的p标签 console.log($("#d1 > p")) //在id为d1的标签中找到所有的儿子标签 console.log($("#d2 + span")); //找到在id为d2标签下方并与之紧挨着的span标签 console.log($("span ~ p")); //找到span标签下面的兄弟标签p标签
基本筛选器:
例:
console.log($("#d1 > p:last")); //id为d1标签的最后一个儿子标签 console.log($("#d1 > p:eq(2)")); //id为d1标签中的第3个p标签 console.log($("#d1 > p:even")); //id为d1标签中索引为偶数的(即第奇数个)p标签从0开始 console.log($("#d1 > p:odd")); //id为d1标签中索引为奇数的（即第偶数个）p标签从0开始 console.log($("#d1 > p:gt(1)")); //id为d1标签中索引大于1的p标签即从第二p标签之后的所有的兄弟中的p标签 console.log($("#d1 > p:lt(1)")); //id为d1标签中索引小于1的p标签即从第二p标签之前的所有的兄弟中的p标签 console.log($("#d1 > p:not('#d2')")); //id为d1标签的儿子标签中的p标签的儿子标签没有id为d2的p标签 console.log($("#d1 > div:has(p)")); //id为d1标签的儿子标签中的div标签的儿子标签含有p标签的div的标签
属性选择器:
例:
console.log($("[s14]")); //找到自定义属性为s14的标签 console.log($("input[type='text']")); //找到类型为text的input标签 console.log($("input[type!='text']"));//找到除了类型为text以为的input标签
表单常用筛选器:
例:
console.log($(":text")); //找到类型为text的标签 console.log($(":password")); //找到类型为password的标签 console.log($(":submit")); //找到类型为submit的标签 console.log($(":file")); //找到类型为file(上传文件和图片)的标签 console.log($(":radio")); //找到类型为radio的单选框的标签 console.log($(":checkbox")); //找到类型为checkbox的多选框的标签 console.log($(":reset")); //找到类型为reset(重置按钮)的标签 console.log($(":button")); //找到类型为botton(普通按钮)的标签
表单对象属性:
例:
console.log($(":enabled")); //找到用户可以使用的标签 console.log($(":disabled")); //找到禁止用户使用的标签 console.log($(":checked")); //找到有默认值的标签包括复选框中的默认值 console.log($("input:checked")) //找到input标签中有默认值的标签 console.log($(":selected")); //找到复选框中的默认值的标签
筛选器方法:
例:
下一个元素: console.log($("#d3").next()); //找到id为d3标签的下一个标签 console.log($("#d3").nextAll()); //找到id为d3标签下面的所有标签 console.log($("#d3").nextUntil("#d7"));//找到id为d3标签到id为d7标签之间的标签不包括id为d3和d7的标签 上一个元素: console.log($("#d3").prev()); //找到id为d3标签的下一个标签 console.log($("#d3").prevAll()); //找到id为d3标签上面的所有标签 console.log($("#d3").prevUntil("#d1")); //找到id为d3标签到id为d1标签之间的标签不包括id为d3和d1的标签 父亲元素: console.log($("#d5").parent()); //找到id为d5标签的父标签 console.log($("#d5").parents()); //找到id为d5标签的祖先标签直到HTML为止 console.log($("#d5").parentsUntil("HTML")); //找到id为d5标签的祖先标签直到HTML,不包括HTML 儿子和兄弟标签: console.log($("#d").children()); //找到id为d标签的儿子们 console.log($("#d3").siblings()); //找到id为d3标签所有的兄弟标签包括id为d3标签上方的兄弟标签 查找标签: console.log($("#d").find("p")); //找到id为d1的标签所有的子子孙孙中的p标签 $("#d p") 筛选标签: console.log($("p#d2")); //找到p标签中有id为d2的p标签 相当于$("p#d2")
操作标签
样式操作:
例:
console.log($(".c1").addClass("c2")); //添加指定的css类名,为标签添加css属性 console.log($(".c1").removeClass("c2")); //删除指定的css类名,为标签删除css属性 console.log($(".c1").hasClass("c2")); //判断指定的css类名是否存在 console.log($(".c1").toggleClass("c2")); //判断指定的css类名是否存在;存在就删除不存在就添加
直接操作css
语法:
标签名.css("样式名") ==>获取标签的对应样式的值
标签名.css("样式名","样式值") ==>为标签的样式赋值
例:
样式操作: console.log($(".c2").css("background")); //获取标签的样式对应的值 console.log($(".c2").css("background","yellow")); //更改标签样式对应的值 console.log($(".c1").css({"background":"red","font-size":"12px"})); //一次更改多个样式 位置操作: console.log($(".c1").offset()); //获取标签相当于当前窗口的位置 console.log($(".c1").position()); //获取标签相当于父标签的相对位置 console.log($(".c1").scrollTop()) //获取标签相当于滚动条顶部的位移 console.log($(".c1").scrollLeft()) //获取标签相当于滚动条左侧的位移 大小操作: console.log($(".c1").width()); //获取标签内容的宽度 console.log($(".c1").height()); //获取标签内容的高度 console.log($(".c1").innerWidth()); //获取标签内容的宽度加内边距宽度 console.log($(".c1").innerHeight()); //获取标签内部的高度加内边距高度 console.log($(".c1").outerWidth()); //获取标签内部的宽度加内边距宽度加边框的宽度 console.log($(".c1").outerHeight()); //获取标签内部的高度加内边距高度加边框的高度
文本操作:
例:
文本: console.log($(".p").text()); //获取标签中的文本 console.log($(".p").html()); //获取标签中的文本 console.log($(".div").text("p标签
>")); //为标签重新输入文本,不能识别标签 console.log($(".div").html("p标签
")); //为标签重新输入文本,能识别标签 值: console.log($(":text").val()); //获取标签的value值 console.log($(":text").val("hao")); //为标签的value属性赋值 console.log($("input[name='gender']:checked").val()); //获取名字为gender标签的默认值,适用于radio,checkbox和select console.log($("input[name='hobby']:checked").val()); //获取选中的第一个元素 console.log($(":selected").val()); //获取下拉框的默认的标签对应的value值 .val([val1,val2]) //设置checkbox和select的值
属性操作:
例:
console.log($(".cp").attr("id")); //获取标签的id值 console.log($("#dp").attr("class")); //获取标签的样式类属性 console.log($('.cp').attr("id","d").attr("id")); //设置标签的id值 console.log($("[type='radio']").prop("checked")); //判断属性是否存在,适用于radio和checkbox console.log($(".cp").removeAttr("id")); //删除属性 .removeProp("checked"); //删除属性 注意:
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
文档处理:
例:
var spanEle = document.createElement("span"); spanEle.innerText = "div标签中的span标签"; 添加到指定元素内部的后面: $("div").append(spanEle); //把spanEle添加到div的子标签的最后,比div标签小一级 (spanEle).appendTo($("div")); //把spanEle追加到div的子标签的后面,比div标签小一级 添加到指定元素内部的前面: $("div").prepend(spanEle); //把spanEle前置到div的子标签的前面,比div标签小一级 $(spanEle).prependTo($("div")); //把spanEle前置到div的子标签的前面,比div标签小一级 添加到指定元素外部的后面: $("div").after(spanEle); //把spanEle标签添加到div的后面,和div标签同级 $(spanEle).insertAfter($("div")); //把spanEle标签添加到div的后面,和div标签同级 添加到指定元素外部的前面: $("div").before(spanEle); //把spanEle标签添加到div的前面,和div标签同级 $(spanEle).insertBefore($("div")); //把spanEle标签添加到div的前面,和div标签同级 移除和清空 $("span").remove(); //移除span标签在DOM文档中删除标签 $("span").empty(); //删除标签的内容,但是标签还在DOM文档中 替换 $("span").replaceWith(spanEle); //替换标签 $(spanEle).replaceAll($("span")); //替换标签 克隆 $("#but").click(function() { $(this).clone(true).insertAfter(this); //true是指克隆的标签也具有原标签的事件 });
事件
事件的
例:阻止冒泡
$("div").click(function() { alert("div"); }); $("div p").click(function(ev) { alert("div中的p"); ev.stopPropagation(); //阻止向上冒泡 });