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

posted @ 2022-05-29 17:10  ivanlee717  阅读(213)  评论(0)  编辑  收藏  举报