JQuery是什么？它能为我们带来什么便利的操作？

最新推荐文章于 2024-10-18 17:51:23 发布

bootstrapsayno

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量120

点赞数

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/bootstrapsayno/article/details/126296868

版权

那么什么是jQuery呢？

笼统的语言来形容那就是，流行的JavaScript库，js库又是什么呢，它可以简化JavaScript的开发，一些JavaScript库就诞生了，JavaScript库封装了很多预定义的对象和使用函数，能帮助使用者建立高难度交互的web2.0特性的富客户端页面，并且兼容了各大的浏览器。

那么JQuery特点都有哪些呢？

轻量级：封装后的库不到100k下载快

强大的选择器：快速查找Dom元素

隐式遍历(迭代)：一次操作多个元素

读写和一读数据/写数据用的是同一个函数

链式调用

事件处理

Dom操作

样式操作

动画

浏览器兼容

丰富的插件支持

jQuery下载如何安装？

访问jquery官网来进行对jquery文件复制再编辑器中新建一个js文件粘贴进去

jQuery官网：jQuery

jQuery的引入使用

$符即jquery

在head标签中使用<script src="XXXX"></script>进行引入，src为文件路径，这个script标签中不能够抒写js代码否则控制台中jquery会产生出错误提示。

js代码应在一个全新的script标签中进行抒写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
</head>
<body>
    <script>
        
    </script>
</body>
</html>

jQuery的入口函数

jquery的代码段在执行时不需要等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jquery已经做好了封装，不同于原生jsload事件：等页面文件、外部的js文件、css文件，图片等加载完毕才执行内部代码。

//第一种写法
$(document).ready(function(){})
//第二种写法
$().ready(function(){})
//第三种写法
$(function(){})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
</head>

<body>
    <script>
        //第一种写法
        $(document).ready(function () {

        })
        //第二种写法
        $().ready(function () {

        })
        //第三种写法
        $(function () {

        })
    </script>
</body>

</html>

将Dom对象转换为jQuery对象，jQuery对象转换为Dom对象

//获取dom元素
var div0 = docuement.querySelectorAll("div")
//获取jquery对象
var div1 = $("div")
//Dom对象转换为jquery对象
$(div0)
//jquery对象转换为Dom对象共有两种方法
//第一种
var div1 = $(div1[0])
//第二种
var div1 = $(div1.get(0))

JQuery的选择器

id选择器：$("#id") 获取指定id元素

类选择器：$(".className") 获取所有类名相同元素

标签选择器：$("div") 获取所有div元素

并集选择器：$("div,p") 获取所有div元素和p元素

交集选择器：$("div.blue") 获取class为blue的div元素

层次选择器
子代选择器：$("ul>li") 仅包括子级li标签

后代选择器：$("ul li") 包括ul下的所有li标签

属性选择器
基本属性选择器

$("input[checked]") 获取checked选中的标签

$("input[name='username']") 获取input的name属性等于username的标签

$("input[name!='username']") 获取input的name属性不包含username的标签

$("div[class^='b']") 获取类名以b开始的标签

$("div[class*='z']") 获取类名包含z的标签

过滤选择器

div:eq(index) 获取索引为index的元素

div:odd 获取索引为奇数的元素

div:even 获取索引为偶数的元素

div:first 获取第一个元素

div:last 获取最后一个元素

div:gt(index) 获取索引大于index的元素

div:lt(index) 获取索引小于index的元素

div:not(selector) 去除某一个元素

筛选选择器
:contains('12') 如果元素中有某个内容则获取该元素

:has('p') 如果元素中有某个标签时则获取该元素

:empty 获取空元素或者不包含子元素的标签

:parent 获取含有子元素或文本的标签

筛选选择器（方法）
方法   使用   描述
children(selector)   $("ul").children("li")   相当于$("ul>li"),子类选择器
find(selector)   $("ul").find("li")   相当于$("ul li"),后代选择器
siblings(selector)   $("#first").siblings("li")   获取兄弟节点，不包括本身
parent()   $("#first").parent()   查找父亲元素
eq(index)   $("li").eq(2)   查找索引为2的li元素
next()   $("li").next()   下一个兄弟
prev()   $("li").prev()   上一个兄弟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.js"></script>
</head>

<body>
    <script>
        // id选择器： 获取指定id元素
        $("#id")

        // 类选择器： 获取所有类名相同元素
        $(".className")

        // 标签选择器： 获取所有div元素
        $("div")

        // 并集选择器： 获取所有div元素和p元素
        $("div,p")

        // 交集选择器： 获取class为blue的div元素
        $("div.blue")

        // 层次选择器
        // 子代选择器： 仅包括子级li标签
        $("ul>li")

        // 后代选择器： 包括ul下的所有li标签
        $("ul li")

        // 属性选择器
        // 基本属性选择器
        // 获取checked选中的标签
        $("input[checked]")
        // 获取input的name属性等于username的标签
        $("input[name='username']")
        // 获取input的name属性不包含username的标签
        $("input[name!='username']")
        // 获取类名以b开始的标签
        $("div[class^='b']")
        // 获取类名包含z的标签
        $("div[class*='z']")
        // 过滤选择器
        // 获取索引为index的元素
        div: eq(index)
        // 获取索引为奇数的元素
        div: odd
        // 获取索引为偶数的元素
        div: even
        // 获取第一个元素
        div: first
        // 获取最后一个元素
        div: last
        // 获取索引大于index的元素
        div: gt(index)
        // 获取索引小于index的元素
        div: lt(index)
        // 去除某一个元素
        div: not(selector)

        // 筛选选择器
        // 如果元素中有某个内容则获取该元素
        : contains('12')
        // 如果元素中有某个标签时则获取该元素
        : has('p')
        // 获取空元素或者不包含子元素的标签
        : empty
        // 获取含有子元素或文本的标签
        : parent

        // 筛选选择器（方法）
        // 方法    使用    描述
        // 子类选择器
        children(selector)    $("ul").children("li")    相当于$("ul>li"),
        // 后代选择器
        find(selector)    $("ul").find("li")    相当于$("ul li"),
        // 获取兄弟节点，不包括本身
        siblings(selector)    $("#first").siblings("li")
        // 查找父亲元素
        parent()    $("#first").parent()
        // 查找索引为2的li元素
        eq(index)    $("li").eq(2)
        // 下一个兄弟
        next()    $("li").next()
        // 上一个兄弟
        prev()    $("li").prev()    
    </script>
</body>

</html>

在JQuery中如何操作标签的属性

标签属性方法 attr(name)/attr(name,value) 读/写非布尔值的标签属性

标签属性方法 prop(name)/prop(name,value) 读/写布尔值的标签属性

删除属性方法 removeAttr(name)/removeProp(name) 删除指定名字属性

自定义属性方法 data() 读写标签的附加数据（data-*属性）

这里是Bootstrapsayno，写博客真的好痛苦哦！！！ ~~>_<~~