jQuery的导入和绑定

jQuery

jQuery是什么

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

  • jQuery的版本

    目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构

  • jQuery的引入

    根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

jQuery对象和Dom对象的关系

<ul class="c1">
    <li>123</li>
    <li>234</li>
    <li>345</li>
</ul>

<script>

       // $(".c1 li").css("color","red");
       console.log($(".c1 li"));   // dom集合对象  [dom1,dom2,...]

       // 如何将jQury对象转换为Dom对象
       console.log($(".c1 li")[1].innerHTML);

       // 如何将Dom对象转换为jQuery对象;
       var ele = document.querySelector(".c1 li");
       // console.log(ele);
       // ele.style.color = "red";
      $(ele).css("color","orange")  // [ele]

</script>

image-20220527173108994

image-20220527173228360

image-20220527173454347

jQuery的选择器

直接查找
基本选择器
#id         # id选择符 
element     # 元素选择符
.class      # claw43ss选择符  
selector1, selector2, selectorN   # 同时获取多个元素的选择符 
 
$("#id")   
$(".class")  
$("element")  
$(".class,p,div")
组合选择器
ancestor descendant  // 包含选择符 
  parent > child       // 父子选择符 
  prev + next          // 下一个兄弟选择符 
  prev ~ siblings      // 兄弟选择符 

$(".outer div")  
$(".outer>div")  
$(".outer+div")  
$(".outer~div")
属性选择器
[attribute=value]    // 获取拥有指定数据attribute,并且置为value的元素 
$('[type="checked"]')  
$('[class*="xxx"]')
表单选择器
$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")
同样适用表单的以下属性
:enabled
:disabled
:checked
:selected
筛选器
// 筛选器
  :first               //  从已经获取的元素集合中提取第一个元素
  :even                //  从已经获取的元素集合中提取下标为偶数的元素 
  :odd                 //  从已经获取的元素集合中提取下标为奇数的元素
  :eq(index)           //  从已经获取的元素集合中提取指定下标index对应的元素
  :gt(index)           //  从已经获取的元素集合中提取下标大于index对应的元素
  :last                //  从已经获取的元素集合中提取最后一个元素
  :lt(index)           //  从已经获取的元素集合中提取下标小于index对应的元素
  :first-child         //  从已经获取的所有元素中提取他们的第一个子元素
  :last-child          //  从已经获取的所有元素中提取他们的最后一个子元素
  :nth-child           //  从已经获取的所有元素中提取他们的指定下标的子元素
  // 筛选器方法
  $().first()          //  从已经获取的元素集合中提取第一个元素
  $().last()           //  从已经获取的元素集合中提取最后一个元素
  $().eq()             //  从已经获取的元素集合中提取指定下标index对应的元素

示例：

<div class="c1" id="i1">DIV</div>

<p>P</p>


<div class="c3">
    <div class="c2">
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>


<div class="links">
    <a href="1.png">click1</a>
    <a href="2.jpg">click1</a>
    <a href="3.png">click1</a>
    <a href="4.jpg">click1</a>

    <a>click1</a>
</div>


<input type="text">
<input type="password">

image-20220527175050901

1、基本选择器
$("div").css("color","red");

image-20220527175353397

2. 组合选择器
$(".c3 .c2 ul li").css("color","blue");
$(".c1,p").css("color","red");
$(".c3 ul").css("border","2px dotted red");
$(".c3 > ul").css("color","yellow");

image-20220527175859361

3、属性选择器
$(".links [href]").css("color","red");
$(".links [href$='png']").css("color","red");
$("[type='text']").css("border","1px solid red");

image-20220527181034849

4、表单选择器
$(":password").css("border","1px solid red");
5. 筛选器
 $(".c1 li:first").css("color","red");
 $(".c1 li:last").css("color","yellow");
 $(".c1 li:eq(3)").css("background","skyblue");
 $(".c1 li:gt(1)").css("border","red 2px solid");
 $(".c1 li:lt(4)").css("color","white");
 $(".c1 li:even").css("color","red");
 $(".c1 li:odd").css("color","green");

image-20220527181448961

导航查找
// 查找子代标签：         
 $("div").children(".test")     
 $("div").find(".test")  
                               
 // 向下查找兄弟标签 
$(".test").next()               
$(".test").nextAll()     
$(".test").nextUntil() 
                           
// 向上查找兄弟标签  
$("div").prev()                  
$("div").prevAll()       
$("div").prevUntil() 

// 查找所有兄弟标签  
$("div").siblings()  
              
// 查找父标签：         
$(".test").parent()              
$(".test").parents()     
$(".test").parentUntil()
<div class="c1">
    <div class="c2">
        <div class="c3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>

<ul class="c4">
    <li>111</li>
    <li class="c5">222</li>
    <li>333</li>
    <li>444</li>
    <li id="i1">555</li>
    <li>666</li>
</ul>

image-20220527181711725

查找子代标签

image-20220529162757536

image-20220529163510060

向下查找兄弟标签

image-20220529163048585

向上查找兄弟标签

image-20220529163231112

查找所有兄弟标签

image-20220529163333376

查找父标签

image-20220529163610576

jQuery的绑定方式
三种用法:
  1. on 和 off
  	 // 绑定事件
  	 $().on("事件名",匿名函数)
  	 
  	 // 解绑事件,给指定元素解除事件的绑定
  	 $().off("事件名")
  
  2. 直接通过事件名来进行调用
  	 $().事件名(匿名函数)
  	
  3. 组合事件,模拟事件
  	 $().ready(匿名函数)   // 入口函数
  	 $().hover(mouseover, mouseout)   // 是onmouseover和 onmouseout的组合
  	 $().trigger(事件名)  // 用于让js自动触发指定元素身上已经绑定的事件

案例1:绑定取消事件

<p>限制每次一个按钮只能投票3次</p>
<button id="zan">点下赞(<span>10</span>)</button>

<script>
        var zan = 0;
        $("#zan").click(function () {
            $("#zan span").text(function () {
                zan++;
                let ret = parseInt($(this).text())+1;
                if(zan >= 3){
                    $("#zan").off("click"); // 事件解绑
										console.log("不能继续再赞了");
                }
                return ret;
            });
        })
</script>

image-20220529164536410

\

image-20220529164552845

image-20220529164614383

案例2:模拟事件触发

input[type=file]{
            display: none;
        }
        .upload{
            width: 180px;
            height: 44px;
            border-radius: 5px;
            color: #fff;
            text-align: center;
            line-height: 44px;
            background-color: #000000;
            border: none;
            outline: none;
            cursor: pointer;
        }
    </style>

</head>

<body>
<div class="background">
    <input type="file" name="avatar">
    <button class="upload">上传文件</button>
</div>
<script>
    $(".upload").on("click", function(){
        $("input[type=file]").trigger("click"); // 模拟事件的触发
    });
</script>

如果对input标签没有做css渲染，界面是这样的

image-20220529165114104

为了美观，我希望前面的选择问题可以隐藏掉，并且点击按钮就可以触发选择文件的功能

image-20220529165222991

image-20220529165239774

案例3:组合触发器

ready方法与windows.onload方法类似，网页在解析语言的时候，如果将script放在body的上方，添加ready方法可以等到全部代码解析之后再执行

<script>
        $(document).ready(function () {
            $(".c1").on("click",function () {
                console.log("123");
            });
        })

    </script>

<body>
<div class="background">
   <div class="c1">div</div>
</div>

image-20220529170029448

同时这种写法也可以简写为：

$(function () {
    $(".c1").on("click",function () {
        console.log("123");
    });
})
hover：鼠标悬浮+鼠标离开
$(function () {
    $(".c1").hover(mouseover,mouseout);
    function mouseover(){
        console.log("over");
    }
    function mouseout(){
        console.log("out");
    }
})

hover里面的函数不能加括号

image-20220529170651362

正文到此结束
所属分类：前端技术
相关文章
热门推荐
评论插件初始化中...
Loading...
标签云
Linux Java Spring Spring Boot 其他 redis Python rabbitmq Spring Cloud 随心笔记 maven 爬虫 docker Mybatis 加密 Spring学习 JVM 问题 sql优化 Mysql 微服务 网络 监控 网站 Idea idea插件 Spring MVC CICD Nginx WebSocket JS 数据库 JPA SpringCloud Cookie Git 设计模式 Api 工具 正则 Web 多线程 Swagger Jquery OpenAI ChatGPT 云服务器 小程序 go 面试 C++ SEO Css html rocketmq
本文目录