jQuery基础

最新推荐文章于 2025-05-20 11:57:34 发布

玲玲酱

最新推荐文章于 2025-05-20 11:57:34 发布

阅读量199

点赞数

分类专栏： jQuery 文章标签：前端 html5 css3 jquery

本文链接：https://blog.youkuaiyun.com/qq_45758587/article/details/109323248

版权

jQuery 专栏收录该内容

4 篇文章

订阅专栏

jQuery是一个Javascript库，是对于ECMAScript、dom、bom的一个浅封装，让用户更方便操作。

特点：

1）轻量级

2）有强大的选择器和css类似，更加丰富

3）出色的dom封装和可靠的事件处理机制 jQuery对象-->jQuery实例方法

4）不污染顶级变量浏览器： window:{} Linux：global:{}

5）完整的ajax

6）链式操作方法 Array.prototype.slice.call{lis}.forEach 直接用返回值调用下一个方法返回值均为jQuery对象

7）出色的浏览器兼容性

var obj={};//_proto_:prototype

Object.getPrototypeOf（obj）;//返回当前对象的构造函数的原型对象

Object.setPrototypeOf(obj,{});//给obj设置一个新的原型对象

返回一个类数组对象

jQuery功能

1)使用CSS选择器进行元素查询 2)事件机制 3)Dom操作 4)属性操作 5)工具方法6)Ajax

jQuery函数

通过"jQuery"和"$"来调用jQuery函数 jQuery.prototype:

简写：jQuery--》$

1)参数为选择器时

字符串--》选择器

jQuery("#one"); ----->$("#one");

2）参数为dom对象将dom--》转换为jQuery对象 jQuery（dom）-->$(dom)

3)参数为html文本字符串

$("<p>hello</p>"): 创建了dom对象----》将dom转换为jQuery

4）匿名函数 $(function(){})当文档结构加载完毕后再执行函数（效率更高）----->window.onload当文档加载完毕后再执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../jquery-3.5.0/jquery-3.5.0.js">//引入jquery
    </script>
    <script type="text/javascript">
       $(function(){//当文档结构加载完毕后再执行函数
           var one=document.getElementById("oneDiv");
           console.log(one);//one是dom对象
           //var result=jQuery("#oneDiv");基础选择器
           //var result=jQuery("div:contains('hello')");内容过滤 选择div标签中包含hello的
           //var result=jQuery("div:empty()");选择没有子元素的div
           //var result=jQuery(one);参数为dom对象
           //var result=jQuery("<p>hello</p>");参数为html文本字符串
           var result=jQuery(".one");//jQuery和dom的相互转换
           console.log(result);
           console.log(result[0]);
       })
    </script>
</head>
<body>
    <div class="one" id="oneDiv">hello</div>
    <div class="one"></div>
    <div class="one">hello</div>
    <div class="one">world</div>
</body>
</html>

事件绑定

要注意在使用jQuery中的方法时，要把dom对象转换成jQuery对象$()

1）bind(type,handler) unbind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
        }
    </style>
    <script type="text/javascript" src="../jquery-3.5.0/jquery-3.5.0.js">//引入jquery
    </script>
    <script type="text/javascript">
       $(function(){//当文档结构加载完毕后再执行函数
           var one=document.getElementById("oneDiv");
           //var result=jQuery(".one");//直接链式调用var result=jQuery(".one").bind();
           //result.bind();//事件绑定
           function handler(event){//添加一个引用地址handler
               //alert("hello");
               console.log(this);//dom对象
               console.log($(this).text());//dom转jQuery
           }
           $(".one").bind("click",handler);添加绑定
           $(".one").unbind("click",handler);解除绑定
       })
    </script>
</head>
<body>
    <div class="one" id="oneDiv">hello</div>
    <div class="one"></div>
    <div class="one">hello</div>
    <div class="one">world</div>
</body>
</html>

2) on(type,[selector],handler) off 只给选中的某元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
        }  
        p{
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
    <script type="text/javascript" src="../jquery-3.5.0/jquery-3.5.0.js">//引入jquery
    </script>
    <script type="text/javascript">
       $(function(){//当文档结构加载完毕后再执行函数
           var one=document.getElementById("oneDiv");
           function handler(event){
               console.log(this);//dom对象
               console.log($(this).text());//dom转jQuery
           }
           $("div").on("click","p",function(){//对div进行二次筛选，给p标签绑定事件
               alert("hello");
           })
       })
    </script>
</head>
<body>
    <div class="one" id="oneDiv">hello</div>
    <div class="one">
        <p></p>
    </div>
    <div class="one">hello</div>
    <div class="one">world</div>
</body>
</html>

3）简写形式：事件类型为函数名称

click(function(event){}); 这时如果要进行事件代理需要进行条件自己判断

4).one 只能绑定一次事件

5）.trigger 事件对象始终被传递到事件处理程序的第一个参数

$("div").one("click",function(){
       alert();
   })
$("div:first-child").trigger("click");//进入页面默认点击div中的第一个元素

DOM操作

1）a.append(b) 把b追加到a的后面

2）a.appendTo(b) 把a追加到b之后

属性方法

1）.css 事件对象始终被传递到事件处理程序的第一个参数

console.log($("div").css("width"));获取参数值

console.log($("div").css(["width","height"]));获取参数值

console.log($("div").css("color","white");设置新的样式

2).addClass 为每个匹配的元素添加指定的样式类名

$("div").addClass("flag")// 为div添加了flag类名

3）.toggleClass() 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类。

$("div").on("click",function(){
    $(this).toggleClass("current")//点击上去有一个切换的效果 从有到无，从无到有
  });

静态方法

数组及对象操作：each、map、toArray、merge
each->forEach 遍历

$("div").each(function(index,item){
           console.log(index.item);
 })

map->map

var result=$("div").map(function(index,item){
           return item.id
});
console.log(result);

toArray() 转换为数组对象

console.log($("div").toArray());//类数组对象转数组

merge:数组合并

var result=$.merge([1,2,3],[4,5,6]);
console.log(result);

测试操作： type、isEmptyObject、isPlainObject:判断参数是否为纯object类型对象、isNumeric：判断参数是否为number类型

console.log($.isEmptyObject({}));//是否为一个空的object 空的返回true
console.log($.isPlainObject({name:''}))//是否为纯object类型对象 true  isPlainObject([]); 数组是对象，但是是arr类型的对象，返回false
       console.log($.isNumeric("hello"));//--> false  "10"-->true

字符串操作：param、trim

$.param(obj) $.parseJSON(str);

console.log($.param(obj));//返回值为字符串类型 --》name=lisi     console.log($.parseJSON(JSON.stringify(obj)));//-->Object{name:"lisi"}

动画

1）.hide .show .toggle

var btns=$("button");
       btns[0].onclick=function(){
           $("div:first-child").show();//显示匹配元素
       }
       btns[1].onclick=function(){
           $("div:first-child").hide();//隐藏匹配元素
       }
       btns[3].onclick=function(){
           $("div:first-child").toggle();//显示或隐藏匹配元素
       }

2)渐变

var btns=$("button");
       btns[0].onclick=function(){
           $("div:first-child").fadeIn(3000);//3秒渐变显示匹配元素
       }
       btns[1].onclick=function(){
           $("div:first-child").fadeOut(3000);//3秒渐变隐藏匹配元素
       }

通用属性操作

区分attr和prop的不同，在进行布尔值属性的创建和获取最好使用prop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.5.1/jquery-3.5.1.js"></script>
    <script>
        $(function(){
           var input=$("input");
           console.log(input.attr("readonly"));//对于普通属性，返回值都为属性值 attr("id")-->one  对于布尔值的属性来说attr返回值为字符串类型
           console.log(input.prop("readonly"));//prop("id")-->one 对于布尔值的属性来说prop返回值为true/false 能够拿到一个布尔值
           console.log(input.attr("flag","flag")); // "class","one" -->自定义属性,公有属性都可以设置
           console.log(input.prop("flag1","flag1"));//flag1属性没有添加成功，自定义属性不能获取修改，只能获取修改公有属性-->"class","two"
        });
    </script>
</head>
<body>
    <input type="text" readonly id="one" class="two">
    <!-- input 中readonly属性规定输入字段为只读 -->
</body>
</html>