JQuery

最新推荐文章于 2023-07-07 14:28:52 发布

多啦爱梦的梦想

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量65

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_56263402/article/details/116429164

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.Jquery是什么？jquery是一个快速而简洁的JavaScript库，当时设计它的宗旨就是WriteLess DoMore,而且J就代表Javascript，而Query就是查询。意思就是查询javaScript,把js中的DOM操作做了封装，我们可以快速的查询和使用里面的内容。原生的js就像走楼梯，jq就像做电梯，（下载地址：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js

可以以jquery-min.js命名文件)，

2.Jquery的优点：轻量级、核心文件才有几十kb，不会影响页面加载速度。跨浏览器兼容，基本兼容了现在主流的浏览器。链式编程、隐式迭代，对事件，样式，动画支持，大大简化了DOM的操作。支持插件扩展开发，有着丰富的第三方的插件：例如树形菜单，日期控件，轮播图等。最重要的特点是免费，开源，用他！用他！用他！

3.JQuery的入口函数和JS的入口函数：

// Js入口函数

window.οnlοad=function(){

console.log("哈哈哈，我也是入口函数，猜猜我是谁的入口函数")

}

// jq的入口函数两种方式

// 方法1

$(document).ready(function(){

console.log("哈哈啥，我是入口函数里面的内容");

}

// 方法2

$(function(){

console.log("hahaha 我也是入口函数里面的内容");

})

// jq的入口函数在window.onload函数之前执行

4.Jquery的$(document).ready(function () {})，$(function () {})与原生JS的window.onload有什么不同？

执行时间 window.onload必须等到页面内包括图片、音频、视频在内的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行

5.Jquery获取标签的方式：（jquery对象是以伪数组的形式存储的）

1.基础选择器：CSS选择器

名称	用法	描述
id选择器	$("#id名字")	通过ID选中标签
class选择器	$(".class名字")	通过class选择标签
标签选择器	$("div")	获取同一类标签的所有元素
交集选择器	$("li.current")	交集元素
全选选择器	$("*")	匹配所有元素
并集选择器	$("div,p,li")	选取多个元素

2.层级选择器：子代选择器和后代选择器

3.获取标签_ 其他方法：

筛选	$("css选择器").eq(n)	选中css选择器集合中指定下标的标签
父级	$("选择器").parent()	获取父级元素
子代元素	$("css选择器").children()	获取子代元素
指定后代	$("css选择器").find("css选择器")	查找后代目标元素
兄弟元素	$("css选择器").siblings()	查找目标的兄弟元素们

6.JQ操作对象的方式：行内样式 ==>.css("属性"，“属性值");==>.css({属性：”属性值"})

:操作类的方式：addClass(),removeClass(),hasClass(),toggleClass()

7.JQ注册事件；三种方式

1.$("XX").on("事件类型“，”事件处理函数）

2.$("XX").事件类型（事件处理函数）

3.$("XX").on("事件类型","筛选器“，事件处理函数）====》事件委托

8.DOM对象转换为Jq对象发方式（1）我们直接通过$("XX")得到的就是jq对象，2）当我们已经使用原生js,获取过的DOM对象，$(dom对象)；比如js中有play()这个方法，而jq里面就没有这个方法，就需要转换一下才能使用这个方法。。。jquery对象装换成DOM对象有两种方法：$("")[index]和$("‘).get（index) ==》index是索引

9.jq内置动画：

show(),hide(),toggle().mouseenter(),mouseleave()mouseover(),mouseout(),slideUp(),slideDown(),slideToggle(),hover(),stop(),fadeIn(),fadeOut(),fadeToggle(),fadeTo(),animate()