前端--jQuery

导入jQuery文件:

<script src="jquery-3.3.1.min.js"></script>

查找标签

基础语法: $/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>p标签</p>>"));                       //为标签重新输入文本,不能识别标签
console.log($(".div").html("<p>p标签</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();                       //阻止向上冒泡
});