对JQuery的初次的理解和使用

最新推荐文章于 2024-04-21 17:50:12 发布

weixin_45846291

最新推荐文章于 2024-04-21 17:50:12 发布

阅读量124

点赞数

本文链接：https://blog.csdn.net/weixin_45846291/article/details/105917264

版权

对JQuery的初次的理解和使用

对JQuery的初次理解

对JQuery的初次理解

1、为什么要使用JQuery？
写起页面功能时会更简单，更省事，开发效率高，兼容性好的这几个特点。

2、什么是JQuery？
JQuery是一个兼容多浏览器的JavaScript库

3、如何使用JQuery？
现在在你要使用JQuery的语法前面把JQuery文件导入到页面上，导入的方法是和导入JavaScript外部文件一样进行导入。
使用JQuery的语法规则：$("")

4、JS和jQuery的区别？
jQuery就是用JS写的
js是基础，jQuery是工具

5、选择器
标签选择器
使用方法：$(“p”)

类选择器
使用方法：$(".intro")

id选择器
使用方法：$("#intro")

这里看的出来这里的选择器的使用和CSS里面使用的方法几乎一样。但是在这里要注意的是，原生JS选择结果是DOM对象：
例：

var dom = document.getElementById(“id”); // 这里获得是是一个DOM对象，它可以直接使用JS中的方法
dom.innerHTML = “hello”;

JQuery选择器选出的结果是一个JQuery对象，是一个通过jQuery包装DOM对象后产生的对象，只能使用jQuery里的方法：

var $dom = $(“#id”);

$dom.html(“hello”);

6、JQuery对象

用JQuery选择器查出的就是JQuery对象，JQuery对象，他就可以使用JQuery方法，不能使用DOM的方法，DOM对象和JQuery对象转换：
$(".c1")[0] --> DOM对象
$(DOM对象)

表现形式图：
在这里插入图片描述
7、筛选器

写在引号里面的：
7.1 基本选择器
:first 找第一个
:last 找最后一个
:not(’’) 不是/非（这个选择器的后面跟着的括号里面是表示除了括号里面的选择器之外的其它元素）
:even 偶数
:odd 奇数
:eq(index) 找到等于index的元素
:gt(index) 找到大于index的元素
:lt(index) 找到小于index的元素

7.2、内容
$(" .c1:contains(‘我是第一个’)") 包含文档的内容的标签
$(" :parent") 找有孩子的父亲
$("#nac").parent() 找nac的父亲

		可见性
        　　$(" :hidden")   找到隐藏的
        　　$(" :visible")    找不隐藏的，也就是显示的
        　　$(this).hide()   隐藏当前元素
				$("p").hide()    隐藏所有 <p> 元素
				$("p.test").hide()    隐藏所有 class="test" 的 <p> 元素
				$("#test").hide()     隐藏 id="test" 的元素
     　　属性
        　　input[name]  --> 找有name属性的input
        　　input[type='password']  --> 类型是password的input标签
        表单(下面这些属性都是写在括号里面的，而这些属性也是一些input上面的属性，出来第一个:input这个不知为其他的都是的寓意也是一样的)
       　　 :input   获取到 input元素
        　　:password     
        　　:checkbox
       　　 :radio
        　　:submit
       　　 :button
        　　:image
        　　:file

        表单对象属性
            :enable   可选的
            :disable  不可选
            :checked  选中的
            :selected 下拉框选中

7.3、写在信号外面当方法用的
过滤
$("").first() 找第一个
$("").parent() 找父亲
$("").eq(index) 找等于index的
.hasClass() 判断有没有某个类的
查找
.children() 找孩子
.find() 查找
.next() 下面的
.nextAll() 下面所有的
.nextUntil() 找下面的直到找到某个标签为止
.parent() 找父亲
.parents() 找所有的父亲
.parentsUntil() 直到找到你要找的那个父亲为止
.prev() 上面的
.prevAll() 上面的所有
.prevUntil() 上面的直到找到某个标签为止
.siblings() 所有的兄弟

注意这里有几个特殊的：

toggleClass()  切换|开关：有就移除，没有就添加
addClass("hide")  添加类
removeClass("hide") 删除类

下面就是开关实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery的初次理解和使用</title>
    <!-- 这里就是JQuery包 -->
    <script src="JQuery-3.5.0.js"></script>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            border :1px solid #f0f;
            border-radius: 50%;
            display: inline-block;
        }
        .c2 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <button class="btn">点击我</button>
    <script>
    //    找到button添加事件
        $(".btn").on('click',function () {
            //当点击的时候让变色
            $(".c1").toggleClass('c2') 
        });
    
    </script>
</body>
</html>

还可以这样使用：
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JQuery的初次理解和使用</title>
    <!-- 这里就是JQuery包 -->
    <script src="JQuery-3.5.0.js"></script>
    <style>
        .c1{
            width: 200px;
            height: 200px;
            border :1px solid #f0f;
            border-radius: 50%;
            display: inline-block;
        }
        .c2 {
            background-color: blue;
        }
        .yuanshu1{
            width: 300px;
            height: 300px;
            transition: all 1s;
            background-color: blueviolet;
        }
        .yuanshu2{
            width: 150px;
            height: 150px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <button class="btn">点击我</button>
    <script>
    // 创建元素
    var dom = $("<div class='yuanshu1'>Holo Wode</div>");
    //将创建的元素插入到body上面
    $("body").append(dom);

    //    找到button添加事件
        $(".btn").on('click',function () {
            //当点击的时候让变色
            $(".c1").toggleClass('c2') 
            dom.toggleClass('yuanshu2');
        });
    
    </script>
</body>
</html>

效果图：
在这里插入图片描述
JQuery最好的就是他可以节省一些我们js的代码量。

weixin_45846291

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对JQuery的初次的理解和使用

对JQuery的初次的理解和使用对JQuery的初次理解对JQuery的初次理解1、为什么要使用JQuery？写起页面功能时会更简单，更省事，开发效率高，兼容性好的这几个特点。2、什么是JQuery？JQuery是一个兼容多浏览器的JavaScript库3、如何使用JQuery？现在在你要使用JQuery的语法前面把JQuery文件导入到页面上，导入的方法是和导入JavaScript...
复制链接

扫一扫