jQuery

最新推荐文章于 2023-11-17 22:12:55 发布

weixin_43297321

最新推荐文章于 2023-11-17 22:12:55 发布

阅读量242

点赞数

分类专栏：线上原生js 相关笔记文章标签： jquery js

本文链接：https://blog.csdn.net/weixin_43297321/article/details/104290550

版权

线上原生js 相关笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、jQuery的下载方式

1、可以去官方网站下载，然后放到入库里，通过script引入的方式来使用。
2、简单的方式：
npm i jquery@版本号 //兼容版
npm i jquery //最新版

我的放在这儿了：  F:\js-exercise\node_modules\jquery ，然后用script引入： "<script src="../../node_modules/jquery/dist/jquery.js"></script>"

二、jQuery的创建

1、先说说通过DOM方式创建的CSS样式，然后再看jQuery方式，作一下对比。

var div;
init();
function init() {
    div = document.createElement("div");
    div.style.width = "100px";
    div.style.height = "100px";
    div.style.backgroundColor = "red";
    div.addEventListener("mouseover", mouseHandler);
    div.addEventListener("mouseout", mouseHandler);
    div.addEventListener("click", clickHandler);
    document.body.appendChild(div);
}
function clickHandler(e) {
    div.style.width = "200px";
    div.style.height = "200px";
}
function mouseHandler(e) {
    if (e.type === "mouseover") {
        div.style.backgroundColor = "blue";
    } else if (e.type === "mouseout") {
        div.style.backgroundColor = "red";
    }
}

2、通过jQuery方式，发现大量使用匿名函数，而且还使用点语法" . " 、" $ " 。

$("<div></div>").width(100).height(100).css("backgroundColor","red").appendTo("body")
.hover(function(){
    $(this).css("backgroundColor","blue");
},function(){
    $(this).css("backgroundColor","red");
}).click(function(){
    $(this).width(200).height(200);
})

3、连缀法，点 " . " 语法的使用，以对象为例，来看下是怎么使用的。

var obj={
    a:function(){
        console.log("aaa");
        return this;  //返回到该对象obj，就能使用点语法了
    },
    b:function(){
        console.log("bbb");
        return this;
    },
    c:function(){
        console.log("ccc");
        return this;
    }
}

// obj.a();  //对象里面，obj的点语法一般是这样用的
// obj.b();
// obj.c();

obj.a().b().c(); //现在就可以连用点语法了

4、再看看$符号的使用，作为变量，作为函数名。

（1）$特殊符号作为变量：
	var $=2; //打印显示结果2

（2）$特殊符号作为函数名：
	function jQuery(){
	    console.log("aaa");
	}
	var $=jQuery; //所以运行$,就相当于写了个jQuery函数并执行了
	$();  //是可以打印出aaa的
或者直接：
	function $() {
	    console.log("jquery");
	}
	$();  //结果是jquery  ， 函数能执行

（3）此时 $===jQuery ，看以下此时$的类型：
	console.log(typeof $,typeof jQuery,$===jQuery);  //function function true

三、jQuery的简单选择器

1、先来简单看一下选择器的用法。

<!--注意写在script标签前面。-->
<div></div>
<div></div>
<div></div>

// $("div") //就可以把div都选中

$("div").text("abc");//等同于给每一个div里面增加textContent值为abc
$("div").html("<a href='#'>超链接</a>");//就相当于给每一个div放入一个超链接
$("div").css({
    width:50,
    height:50,
    backgroundColor: "tomato",
    margin:10
});//相当于给每一个div设置css样式的宽高和背景色及margin值

2、获取

console.log($("div"));
//选择器获取了所有div标签,这个列表就叫做jQuery对象，jQuery对象不能使用任何DOM的方法
// $("div").addEventListener()//错误的

如果希望使用DOM的方法，必须将jQuery转换为DOM对象：

//将jQuery列表中某个一个DOM获取出来，以下两种方法都行
console.log($("div")[0]);
console.log($("div").get(0));

//将jQuery对象转换为DOM数组
console.log(Array.from($("div")));  //(4) [div, div, div, div]

将DOM元素转换为jQuery：

var div=document.createElement("div");
console.log($(div));  //$(DOM) 就可以将DOM元素转换为jQuery对象

看一下相关结果：
console.log($(“div”)) 获取的是一个jQuery对象，jQuery对象不能使用任何DOM的方法。
在这里插入图片描述
3、最常用选择器

<div id="div0"></div>
<div class="div1"></div>
<div></div>

console.log($("div"));//标签选择器
console.log($(".div1"));//class选择器
console.log($("#div0"));//id选择器

$("div,span,a");//群组选择器
$("div span");//后代选择器（包含选择器，选择所有span子元素标签）
$("div>span");//子代选择器（只选择div下的子元素span，至于div子元素的子元素里面是不是有span，并不在意）
$(".div1~span");//兄弟选择器（该class为div1的标签，其下面的兄弟span都被选中，上面的不选）
$(".div1+span");//相邻兄弟选择器（该class为div1的标签，只有其下紧密相联的第一个span被选中，没有就不选）
$("*");//通配符,所有的
$(".div1>*");//class是div1的元素的所有子元素
$(".div1 *");//class是div1的元素的所有后代元素
$(".div1+*");//class是div1的元素的任何相邻元素

console.log($(".div1").length);//class是div1这个元素的子元素数量

$("div.div2");//class是div2的div
$("div .div2");//div的后代中所有class是div2的元素

使用jQuery方法比选择器更快：

$(".div1").find("span");  //等同  $(".div1 span");
$(".div1").children("span");//等同于  $(".div1>span");
$(".div1").children();//等同于$(".div1>*");

$(".div1").next("span");//等同于$(".div1+span");
$(".div1").nextAll("span");//等同于$(".div1~span");
$(".div1").nextUntil("span");//class是div1的元素向下选择到span元素之前的所有任何兄弟元素，不包含该元素

$(".div1").prev("span");//向上选择相邻的上一个span元素
$(".div1").prevAll("span");//向上选择所有span元素
$(".div1").prevUntil("span");//向上选择到span元素的所有兄弟元素

$(".div1").siblings();//可以选择.div1元素的向上和向下的所有兄弟元素，不包含该元素

四、jQuery属性选择器

这是用到的div标签元素，以他为例：

<!-- 可以自定义一个属性，此处我定义了property="abc" -->
<div property="">0</div>
<div property="aaa">1</div>
<div property="bbb">2</div>
<div property="bob">2.1</div>
<div property="ccc">3</div>
<div property="ooc">3.1</div>
<div property="dd">4</div>
<div property="dd-oq">4.1</div>
<div property="eee">5</div>
<div property="eee ">5.1</div>
<div property="fff" class="div_fff">6</div>
<div property="ofo">6.1</div>
<div property="odggof">6.2</div>

1、先来看下CSS的属性选择器，与jQuery属性选择器做个对比。

/* 以标签div示例 */
div[property]{
    /* 选中属性名为property的全部div */
    width: 30px;
    height: 30px;
    background: cadetblue;
    display: inline-block; /*转成内联块，可以横向排列*/
}
/* 以下所有属性值，双引号可加可不加 */
div[property=aaa]{ 
    /* 选中属性值为aaa的div */
    background: yellowgreen;
}
/* 以下^ $符号的使用有点像正则中的开头结束 */
div[property^="b"]{
    /* 属性值以b开头的的div */
    background-color: violet;
}
div[property$="c"]{
    /* 属性值以c结尾的div */
    background-color: tomato;
}
div[property|=dd]{
    /* | 的作用：如果值为 ab，或是ab后紧跟一个"-",都满足条件 */
    background-color: yellow;
}
div:not([property="aaa"]){
    /* not 伪类选择器 */
    /* div中 不是property="aaa"的*/
    color: white;
}
div[property~="eee"]{
    /* 属性值必须是eee或者eee后面跟有空格 */
    background-color: brown;
}
div[property*="f"]{
    /* 属性值里存在f字符的div */
    background-color: burlywood;
}
/* 复合写法 */
div[property*="f"][class="div_fff"]{
    /* 且 ；所有条件皆满足才可 */
    color: chartreuse;
}

在这里插入图片描述
2、再看一下用jQuery怎么写：

// jQuery中css样式写法
// 首先要引入这个jQuery.js文件
// 其实就是把css属性选择器拿进来，除了not伪类选择器的那个，我把上面的翻译了下来

$("[property]").css({
    width: 30,
    height: "30px",
    background: "cadetblue",
    display: "inline-block"
});
$("[property=aaa]").css({
    background: "yellowgreen"
})
$("[property^=b]").css({
    backgroundColor: "violet"
})
$("[property$=c]").css("backgroundColor","tomato");
$("[property|=dd]").css("backgroundColor","yellow");
$("div:not([property=aaa])").css("color","white");
$("[property~=eee]").css("backgroundColor","brown");
$("[property*=f]").css("backgroundColor","burlywood");
$("[property*=f][class=div_fff]").css("color","chartreuse");

在这里插入图片描述
能够发现，jQuery的属性选择器的结果与css属性选择器的结果并无二致。

五、jQuery过滤器

以ul、li、a为例。

<ul>
    <a href="">超链接</a>
    <a href="">超链接</a>
    <li>1</li>
    <a href="">超链接</a>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <a href="">超链接</a>
</ul>

1、first、last、nth-child()、type…

// 以ul、li、a为例，先设置下横向排列以及间距
$("li").css({
    display: "inline-block",
    margin: 10
})
        
$("li:first").css("backgroundColor","red");//全部li中的第一个
// 等同于
// $("li").first().css("backgroundColor","red");
$("li:first-child").css("backgroundColor","blue");//li作为父容器当中第一个子元素时
$("a:first-of-type").css("backgroundColor","orange");//a作为父容器当中的第一个a标签类型的子元素时

$("li:last").css("backgroundColor","lightgreen");//全部li中的最后一个
// 等同于
// $("li").last().css("backgroundColor","lightgreen");
$("li:last-child").css("backgroundColor","yellow");//li作为父容器当中最后一个子元素时
$("a:last-of-type").css("backgroundColor","teal");//a作为父容器当中的最后一个a标签类型的子元素时

$("li:nth-child(2)").css("backgroundColor","violet");//当前元素为父容器的第2个子元素  2不是索引值，从1开始
$("a:nth-of-type(2)").css("backgroundColor","turquoise");//寻找当前元素的父容器中第二个是a类型的元素， 2不是索引值

在这里插入图片描述

2、元素奇数偶数的选中方法：

$("li:nth-child(2n)").css("backgroundColor","red");//偶数 元素
$("a:nth-of-type(2n)").css("backgroundColor","orange");//偶数 元素类型
// $("li:nth-child(even)").css("backgroundColor","red")//偶数 元素
// $("a:nth-of-type(even)").css("backgroundColor","orange")//偶数
// $("a:odd").css("backgroundColor","orange");//奇数  这是按照索引值设置 从0开始 把所有a放在一个列表中，奇偶获取  元素类型

$("li:nth-child(2n-1)").css("backgroundColor","blue");//奇数 元素
$("a:nth-of-type(2n-1)").css("backgroundColor","yellowgreen");//奇数 元素类型
// $("li:nth-child(odd)").css("backgroundColor","blue");//奇数 元素
// $("a:nth-of-type(odd)").css("backgroundColor","yellowgreen");//奇数 元素类型
// $("a:even").css("backgroundColor","blue");//偶数  这是按照索引值设置 从0开始 把所有a放在一个列表中，奇偶获取  元素类型

最后各一项有些特殊，还是自己动手练练比较好。

在这里插入图片描述
这里有一个小栗子：jQuery 表格选中颜色变化。

3、not、eq、gt、lt

<div class="ab">111</div>
<div class="cd">222</div>
<div class="ab">333</div>
<div class="cd">444</div>
<div>
    <div class="ab">555</div>
</div>

// $("div:not(.ab)").css("background","red");//不是什么内容
// 等同于
$("div").not(".ab").css("background","red");

$("div:eq(1)").css("color","yellow");//是按照索引开始从第0个开始的
// 等同于
// $("div").eq(1).css("color","yellow");
$("div:gt(1)").css("color","blue");//大于1
$("div:lt(1)").css("color","violet");//小于1

在这里插入图片描述

4、header、animated、focus 用的不多

$(":header");//选择h1-h6标签
$(':animated');//选择所有动画元素
$(":focus");//获取焦距的元素  一般针对表单元素和超链接

5、子元素、父元素

<div class="ab">
    <div class="ab">919</div>
</div>
<div class="cd">
    <div class="ab"></div>
</div>
<div class="ab">333</div>
<div class="cd">444</div>
<div></div>
<div>
    <div id="ofo" class="ofo">ofo</div>
</div>

$("div").css({
    width:30,
    height:30,
    display:"inline-block"
})
$("div:empty").css("background","tomato");//没有子元素或者没有内容的空元素
$("div:has(.ofo)").css("background","pink");//判断div元素中是否后代元素中有class是ofo的元素，返回被选中的元素
// 等同于
//$("div").has("#ofo").css("background","pink");//这里用的是ID选择器，但作用元素都是这个div
$(".ab:parent").css("background","yellow");//class是ab的元素如果有子元素或者内容的被选中
$("div:contains(1)").css("color","blue");//判断div的后代中是否包含文本内容1

以上这几项的结果是页面上的几个方块的颜色字体展示。

console.log($(".ofo").parent());//选择父容器
console.log($(".ofo").parents());//选择所有父容器
console.log($(".ofo").parentsUntil("html"));//选择所有父容器到html之前的

这几项的结果是控制台的显示内容，这样就好理解的多了。

在这里插入图片描述

6、隐藏、显示

console.log($(":hidden"));//隐藏  
// display:none这是隐藏的; visibility: hidden不属于隐藏; visibility: visibie是显示
console.log($(":visibie"));//显示的内容

7、判断对错，结果为true、false；到目前为止，只有这两项返回值是true、false，其他都是返回被选中的元素。

console.log($("div").is(".ab")); //判断div中有没有class是ab的元素  返回值true或者false
console.log($("div").hasClass("ab")); //判断div中有没有class是ab的元素  返回值true或者false

区别：is不单可以判断class，还可以判断其他选择器；而hasClass只能判断class

8、截取

console.log($("div").slice(2,4)); //将所有选中元素的列表截取第几个到第几个,不包含尾部，跟数组中的slice用法相同

六、text html value each

1、text

功能：填充文本。根据不同的选择器，不同的情况，填充文本。

<1> 直接填充文本
$("p").text("the first").css("color","tomato");

<2> 可以写匿名函数，有两个参数，index是从0开始的索引，item是标签中的内容
$("div").text(function(index,item){
    // return "div-"+item; // 根据内容有关
    return "div-"+index; // 根据索引有关
})

<3> 获取
console.log($("div").text());//获取元素内容，会将所有元素的textContent结果连在一起返回一个字符串

在这里插入图片描述

2、html

功能：可以往标签里填充另外的标签元素（innerHTML内容）。

<1> 设置innerHTML内容
$(".three").html("<a href='#'>超链接</a>"); 

<2> 也可以给每一个div设置不同的内容
$("div").html(function(index,item){   
    return `<a href='#'>${item}</a>`;//这样就可以根据div的呢内容设置超链接
})

<3> 下面方法获取的html结果只有第一个
console.log($("div").html()); //在选择的列表中返回第一个元素的html的内容

在这里插入图片描述

value

<1> 可以给多个表单来写
$("input").val("aaa");

<2> 如果希望不一样
$("input").val(function(index){
    return index;
});

<3> 在选择列表中返回第一个元素的value值
console.log($("input").val());

在这里插入图片描述

each

功能：遍历，可以遍历数组、对象、jQuery对象

<1> 遍历数组
var arr=["a","b"];
$.each(arr,function(index,item){
    console.log(item);
})

<2> 遍历对象
var data={a:1,b:2}
$.each(data,function(prop,value){
    console.log(prop,value);
})

<3> 遍历jQuery的对象
$.each($("div"),function(index,item){
    console.log(item);//就是每一个元素内容
})
// 而元素自身就带一个each，自身可以遍历
$("div").each(function(index,item){
    console.log(index,item);
})

在这里插入图片描述

综合小应用

要求实现：把网址一次添加进去，然后横向排列。

在上面先创建好6个div。

var list = [
    { site: "网易", url: "http://www.163.com" },
    { site: "腾讯", url: "http://www.qq.com" },
    { site: "京东", url: "http://www.jd.com" },
    { site: "淘宝", url: "http://www.taobao.com" },
    { site: "CSDN", url: "http://www.csdn.com" },
    { site: "搜狐", url: "http://www.sohu.com" }
];
//第一种方法
$("div").html(function (index) {
    return `<a href='${list[index].url}'>${list[index].site}</a>`
}).css("display","inline-block"); 

//第二种方法
$.each(list, function (index, item) {
$("div").eq(index).html(`<a href='${item.url}'>${item.site}</a>`).css("display","inline-block"); 
})

在这里插入图片描述

七、attr data prop

attr 是给标签属性设置。
prop 是给jQuery对象的所有DOM元素设置属性，不设置标签属性。
data 是给所有jQuery对象的引用增加属性，并不设置DOM属性，亦不设置标签属性。

attr

功能：操作属性。

<p></p>
<p class="abc"></p>
<div></div>
<div></div>
<span></span>
<span></span>
<a href=""></a>
<a href=""></a>

<1> 设置一样的属性
$("p").attr("property", "aaa"); //给所有属性设置值
$(".abc").attr("property", "bbb");//给class为abc的p标签设置自定义属性property值为bbb
//属性值得获取，下面这种方法只能获取第一个元素的这个属性值；
//不可以获取多个属性值，只能获取某一个属性值
console.log($("p").attr("property"));

<2> 设置一个属性的多个不同值
$("div").attr("div000", function (index, item) {
    return index + 1;//index从0开始，现在是从1开始
})

<3> 以对象形式设置多个元素的多个相同属性值
$("span").attr({
    span001: 1,
    span002: 2
})

<4> 设置多个属性的不同属性值
$("a").attr({
    a001: function (index, item) {
        return index + 1;
    },
    a002: function (index, item) {
        return index + 2;
    }
})

<5> 删除attr
$("span").removeAttr("span001");//删除某个属性

在这里插入图片描述

prop

功能：给每一个DOM元素都设置了对象属性，不设置标签属性。

<1> 设置对象属性
$("div").prop("ab","3");//尽管没有div有ab这个属性，照样可以设置
console.log($("div").prop("ab"));//而且还可以得到这个属性  结果是3

<2> 错误的方法
$("div").ab=3;//增加一个
console.log($("div").ab);//undefind
// 但是已打印就undefined了，为什么会这样？
// 因为如果直接给jQuery对象设置对象属性时，jQuery再重新选择时，这个对象和上一次选择的对象引用不同。
// jQuery对象一般是若干个，每次使用选择器获取的jQuery对象的引用都不同。
// <p class="abc"></p>
console.log($("p").class);//undefind

<3> 下面的设置方法是可以的
var divs=$("div");
divs.ab=30;
console.log(divs.ab);//这就可以打印出来，因为对象引用一样 结果30
$("div").prop("ab",300);//prop是给每一个DOM元素都设置了对象属性 
// 所以用prop来存储属性ab等于300，这样就可以打印出
console.log($("div").prop("ab"));//获取第一个jQuery对象的DOM元素的对象属性  结果300

在这里插入图片描述

data

功能：是给每个jQuery对象的引用增加属性，并不设置DOM属性，也不设置标签属性。这样我们可以随时获取到这个属性了。

<div class="div0"></div>
<input type="text" name="" id="" value="lalala">
<input type="checkbox">

$("div").data("ab","3");//给jQuery引用对象增加了属性ab，没有给DOM增加属性
// 获取一下看看
console.log($("div").data("ab"));//也能打印出3，有点类似于prop，担又不一样
console.log($(".div0").data("ab")); //给jQuery的引用关系都增加了属性

// 这样可以避免冲突，比如说：
$("input").data("value",300) //这样跟DOM属性名冲突时，不会改变DOM的，而会存储同样一个jQuery对象引用属性
console.log($("input").data("value"));

// 注意：多选框时，checkBox或者radio不能使用attr设置checked，必须使用prop设置checked
 $("[type=checkbox]").prop("checked",true);

在这里插入图片描述

jQuery中的css样式设置

1、样式设置，通过.css()

<div>
    <div>
        <div></div>
    </div>
</div>

// 行内样式 
$("div").css("color", "red");

// 不同div单个style样式设置
$("div").css("color", function (index) { 
    if (index === 0) return "red";
    if (index === 1) return "green";
    return "blue";
})

// 写多个样式
$("div").css({
    width: "50px",
    height: 50,
    backgroundColor: "tomato"
})

// 不同div多个style样式设置
$("div").css({
    width: function (index) {
        return 200-(index + 1)*50; //返回不同的宽度
    },
    height:function(index){
        return 200-(index+1)*50;
    },
    backgroundColor: function (index) {
        if (index === 0) return "tomato";
        if (index === 1) return "yellowgreen";
        return "teal";
    }
})

//获取  $("div").css()
console.log($("div").css("width"));//获取列表第一个元素的width
console.log($("div").css(["width","height"])) ;//获取列表第一个元素的宽高，数组式写法,以对象返回
//除了获取行内样式，也可以获取css计算后样式
console.log($("div").css("backgroundColor"));
var div=document.querySelector("div");
console.log(getComputedStyle(div).backgroundColor);//计算后样式

在这里插入图片描述

2、class属性的增加删除

$("div").addClass("div0 div1") //增加class属性
$("div").removeClass("div0") //删除class属性

3、toggleClass 切换样式

toggleClass 切换样式只能用于操作交互，鼠标点击，飘过啥的.

.div0{
    width:50px;
    height: 50px;
    color: blue;
    background-color: red;
}
.div1{
    width: 100px;
    height: 100px;
    background-color: gold;
    /* border: 1px solid #000; */
}

<div></div>

$("div").addClass("div0").click(function () {
    $(this).toggleClass("div1");
    //把DOM元素变成jQuery元素，再点一次就切换回DOM了 往返切换  点击切换  开关切换
    // 效果是：点击div，从样式.div0变成.div1;再点一下，又变回.div0的样式

    $(this).toggleClass("div1", true);
    // 只可以切换成jQuery元素，不能切换回去
    // 效果是：只能从样式.div0变成样式.div1

    $(this).toggleClass("div1", false);
    //不能切换
    // 效果是：不管你怎么点，div始终是.div0的样式
})

4、直接设置样式，不必通过.css()

<1> 高度height（）与宽度width（）用法等同，下面只演示width的：

//可以直接设置div的宽度
$("div").width("50px");
//数值、字符串都行
$("div").width(50);
//可以设置不同的宽度
$("div").width(function(index){
    return (index+1)*50;
})

// 获取宽度
console.log($("div").width());


<2> innerWidth、outerWidth

console.log($("div").innerWidth()) //width+padding的值
$("div").innerWidth(100)//会重新自动设置这个宽度，并且会将100-padding后再设置
console.log($("div").innerWidth()) //width+padding的值

console.log($("div").outerWidth()) //width+padding+border
$("div").outerWidth(100) //设置时，也会自动减去border

//如果设置了参数true，则只能获取而不能设置
console.log($("div").outerWidth(true)) //占位宽度 width+padding+border+marign

5、定位元素偏移方法

.div0{
    width: 100px;
    height: 100px;
    background-color: tomato;
    position: absolute;
    left: 100px;
    top: 100px;
}
.div1{
    width:50px;
    height: 50px;
    background-color: gold;      
}

<div class="div0">
    <div class="div1"></div>
</div>

<1> 用css样式直接设置，不过这种设置出来的位置不能与offset设置出来的同时存在，毕竟这只是旁门左道，算不得正统，offset才是唯一可以设置定位位置的王。
如果，把position去掉，只写left、top，是不能设置的。
$(".div0").css({
    position:"absolute",
    left:30,
    top:80
});
console.log($("div").offset());//获取  {top: 30, left: 80}

<2> 只有offset可以设置 “定位位置” ；position只能用来获取，不能设置值
$(".div1").offset({left:100,top:100});
console.log($(".div1").offset());//获取 {top: 100, left: 100}
console.log($(".div1").position()) //获取  {top: 100, left: 100}

不过offset与position还是有区别的，获取的结果不一样。offset相对于页面左上角的位置，而position定位时相对于父容器。
var div=document.querySelector(".div0");
console.log(div.getBoundingClientRect());//相对视口
console.log(div.offsetLeft);//结果是100

console.log($(".div1").position().left)//定位时相对于父容器

console.log($(".div1").offset())//相对于页面左上角的位置

<3> 可以设置窗口的滚动条位置
$(document).scrollTop(30);//针对窗口设置滚动条位置
console.log($(window).scrollTop());//同样能获取滚动条位置

在这里插入图片描述

6、事件

$(".div").on("click",clickHandler);
function clickHandler(e){
    $(".div").off("click",clickHandler);
}

jQuery与DOM

1、DOM元素的创建&添加

body里先手动创建一个div：<div class="div1"></div>

<1> DOM元素的创建、添加
var div = $("<div></div>");//创建DOM元素
$("body").append(div);
// 等同于
var div = document.createElement("div");
document.body.appendChild(div);

// 创建简单的方法
$("body").append("<div></div>");//针对body；这种append的结果，如果没有特别强调的，必然是调用这个方法的对象
$("<div></div>").appendTo("body").css({
    width: 50,
    height: 50,
    backgroundColor: "red"
});//也会返回一个对象，但此时的css是针对div标签的了

append  父容器添加子元素  父容器.append(子元素)
appendTo  子元素向父元素里添加   子元素.appendTo(父容器)
主动性不同。

<2> DOM元素的插入
// 将子元素插入在父元素的最前面（第一位）
// 给body的前面插入
$("body").prepend("<div></div>");//插入到最前面了
$("<div></div>").prependTo("body");//也会插入到body最前面

// 插入到某元素的兄弟节点后
$(".div1").after("<div></div>");
$("<div></div>").insertAfter(".div1");

// 插入到某元素的兄弟节点前
$(".div1").before("<div></div>");
$("<div></div>").insertBefore(".div1");

在这里插入图片描述

2、包裹节点wrap

$("span").wrap("<div></div>");//所有的span外包了一层div

//所有的span外包了一层a标签
let arr=["http://www.qq.com","http://www.taobao.com","http://www.jd.com","http://www.163.com"]
$("span").wrap(function(index,item){
    return `<a href='${arr[index]}'></a>`;
    //这样就可以给不同的span添加不同的超链接
});

// 去掉包裹
$("span").unwrap();//删除父容器，取消包裹

// 把所有东西包裹在一起
$("span").wrapAll("<div></div>");//把所有的元素包裹在一个div中

// 在里层包裹,将该标签里面的内容包裹
$("span").wrapInner("<a href='#'></a>");

在这里插入图片描述

克隆clone

jQuery里的克隆都是深复制，没有浅复制。

$("div").clone(true).appendTo("body"); //true意为是否复制事件

在这里插入图片描述
clone方法得到的结果是被克隆的元素，然后之后的所有操作都是针对被克隆出的元素。clone(true)里的参数意为是否复制事件，为true赋值，否则不复制。

$("<div><span></span></div>").appendTo("body").css({
    width:50,
    height:50,
    backgroundColor:"red"
}).on("click",function(){
    $(this).css({
        backgroundColor:"green"
    })
}).clone(false).appendTo("body");
// }).clone(true).appendTo("body");

没有复制事件时，怎么点击也不会改变克隆出的元素，说明没有复制事件。
在这里插入图片描述

删除节点&事件

$(".div1").remove(); //删除节点及事件
$(".div1").detach(); //删除节点，但不删除事件
$(".div1").empty(); //清空该元素的所有与子元素或内容

举个小栗子：（自己试一下）

var divs=$("<div><span></span></div>").appendTo("body").css({
    width:50,
    height:50,
    backgroundColor:"red"
}).on("click",function(){
    $(this).css({
        backgroundColor:"green"
    })
    // remove删除元素，并且删除该元素的事件
    // $(this).remove();

    // detach 删除元素，但是不删除事件，下一次将这个元素重新放在页面上时，元素仍然有事件
    $(this).detach();
    $("<button>按钮</button>").appendTo("body").on("click",function(){
        divs.appendTo("body");
    })
    
    // $(this).empty();//清空该元素的所有子元素或者内容
})

在这里插入图片描述

替换

举个例子：用span替换掉div1

$("<span></span>").replaceAll(".div1");
// 新的来替换旧的

$(".div1").replaceWith("<span></span>");
// 旧的被替换成新的

jQuery事件机制、动画、插件、通信

jQuery 补充

weixin_43297321

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery的下载方式1、可以去官方网站下载，然后放到入库里，通过script引入的方式来使用。2、简单的方式：npm i jquery@版本号 //兼容版npm i jquery //最新版（我的放在这儿了： F:\js-exercise\node_modules\jquery）jQuery的创建...
复制链接

扫一扫