前端——js库-jQuery

最新推荐文章于 2024-05-07 11:07:47 发布

荔枝同学呀

最新推荐文章于 2024-05-07 11:07:47 发布

阅读量183

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_44349849/article/details/106634992

版权

JavaScript 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1 介绍

1.1 简介
jQuery就是一个js库，封装很多函数
优点：代码量少，实现功能多；解决兼容问题；链式编程；开源免费，插件丰富。
1.2 顶级对象
jQuery或者$
1.3 与DOM之间的转化
jQuery——>DOM

<body>
<div id="box"></div>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript">
	var div=$("#box");//jQuery对象
	var div2=$("#box")[0];//DOM对象
	var div3=$("#box").get(0);//DOM对象
</script>
</body>

DOM——>jQuery

<body>
<div id="box"></div>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript">
	var div = document.getElementById("box");//DOM对象
	var div2 = $("div")//jQuery对象
</script>
</body>

1.4 页面加载
js：window.load();——只能加载一个
jquery:
$(window).load()——页面数据加载完触发
$(document).ready();
jQuery();
$();
后面三个都是标签加载完就触发，速度快

2 选择器

<div id="box"  class="box">
	<p></p>
	<div class="inner"></div>
</div>

2.1 基础
$("#box") $(".box") $(“p”) $(“div.inner”) $(“p,.inner”)
2.2 索引
:eq() :gt() :lt()

3 样式

<div id="box"  class="box">
	<p></p>
	<div class="inner"></div>
</div>

3.1 方法
标签内容：html():innerHTML    val():value    text():innetText
索引：index()    查找：find()
样式：css(“属性”,“属性值”)    css({“属性”:“属性值”,“属性”:“属性值”,“属性”:“属性值”})
3.2 类样式
添加：$("p").addClass("cls")   $("p").addClass("cls cls2")
移除：$("p").removeClass("cls")
切换：$("p").toggleClass("cls")
判断：$("p").hasClass("cls")

4 链式编程

4.1 概念
当一个对象调用完之后返回的是对象，则可以一直调用，从而形成的编码样式就是链式编程。
形式：对象.方法().方法().方法().方法().方法()
断链：当一个对象调用完之后返回的不是对象，则就出现断链。解决办法：在断链出加end()
4.2 兄弟元素
后一个元素：next() 之后所有元素：nextAll()
前一个元素：prev() 之前所有元素：prevAll()
所有兄弟元素：siblings()

5 动画

5.1 参数：字符串(“slow”,“fast”,“normal”)或者数字类型
隐藏：hidden()    显示：show()
滑入：slideUp()    滑出：slideDown()    切换：slideToggle()
淡入：fadeIn()    淡出：fadeOut()    切换：fadeToggle()
fadeTo(时间，透明度)
5.2
animate({键值对},时间,callback)
stop()停止动画

6 动态创建元素

6.1 创建与添加

<body>
<div id="box"></div>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
<script type="text/javascript">
	//创建
	var p1 = $("<p>p1</p>")
	var p2 = $("<p>p2</p>")
	var p3 = $("<p>p3</p>")
	var p4 = $("<p>p4</p>")
	var p5 = $("<p>p5</p>")
	var p6 = $("<p>p6</p>")
	//添加
	$("#box").append(p1);
	p2.appendTo($("#box"));
	$(p2).prepend(p4);//插入p2内部的前面,是父子关系
	$(p2).after(p5);//插入p2之前，是兄弟关系
	$(p2).before(p6);//插入p2之后，是兄弟关系
</script>
</body>

在这里插入图片描述
6.2 清空
清除内容：html("") empty()
移除自身：remove()
克隆:clone()
6.3 设置和获取
attr()用于自定义属性
设置：val(“内容”) attr(“属性”,“属性值”)
获取：val() attr(“属性”)

7 事件

7.1 绑定
①bind()两个参数
一个事件： $(“div”).bind(“事件名称”,callback)
多个事件： $(“div”).bind({“事件名称”:callback,“事件名称”:callback})
②delegate()三个参数
delegate(“绑定事件的元素”,“事件名称”,callback)
③on()三个或者两个参数
on(“事件名称”,callback)
on(“事件名称”,“绑定事件的元素”,callback)
7.2 解除
unbind() undelegate() off()
7.3 触发
触发浏览器默认事件(光标闪烁)：事件名称(); trigger(“事件名称”);
不触发浏览器默认事件：triggerHandler(“事件名称”);
7.4 多库共存
$:由对象变成变量，不可使用后，jquery要对$释放控制权
var news=$.noConfict(),以后使用就用news,变量名称自己取。
7.5 补充
arguments.length——>查看一个方法的参数个数
arguments[i]——>查看具体参数
遍历元素：each(index,element)