初学jQuery（1）:简介+jQuery对象+jQuery函数+jQuery选择器+jQuery常用事件+css样式设置

持久的棒棒君

已于 2022-12-05 21:07:10 修改

阅读量1.5k

点赞数

分类专栏：大杂烩文章标签： javascript jquery 前端

于 2022-05-04 00:00:00 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/124297077

版权

大杂烩专栏收录该内容

259 篇文章 2 订阅

订阅专栏

文章目录

jQuery
1、简介
1.1 jQuery框架安装引入
1.1.1 下载
1.1.2 引入
1.1.3 jQuery的基本使用
1.1.4 查看jquery的版本

2、jQuery对象
2.1 介绍
2.2 与js对象的联系与区别
2.3 jQuery对象与js对象的相互转换

3、jQuery基本函数简介
3.1 $与jQuery函数
3.2 入口函数
3.2.1 js中的入口函数
3.2.2 jquery入口函数的写法

3.3 jquery函数$的使用方式

4、jQuery选择器
4.1 基本选择器
4.2 层级选择器
4.3 属性选择器
4.4 过滤选择器
4.5 表单过滤选择器

5、jQuery事件
5.1 常用事件
5.2 绑定事件的方式
5.3 事件代理/事件委托

6、jQuery设置css样式

jQuery

1、简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后有一个优秀的轻量级Javascript库，是对ECMAScript、dom、bom的一个浅封装（轻量库）。jquery倡导写更少的代码，做更多的事情，简化JS开发。这里的叫原生JQuery，还有一类是jQuery-Ajax，功能和ajax类似，不过进行了简单的封装。

jQuery库主要功能有：

简化HTML文档操作
事件处理
动画设计
Ajax交互（ajax的交互就是jquery-ajax来做了）

可以这么理解jQuery框架：
就是将原本js代码中重复的部分进行了封装，例如：纯js写的代码如下

<body>
	<div id="test1">测试1</div>
 	<div id="test2">测试2</div>

    <script>
        var test1 = document.getElementById("test1");
        var test2 = document.getElementById("test2");
        alert(test1.innerHTML);
        alert(test2.innerHTML);
    </script>
</body>

这样显得代码重复，不够简洁，那我们将其抽取封装到方法中，就可以做到简化代码，如下：

<body>
    <div id="test1">测试1</div>
    <div id="test2">测试2</div>
    <script>
        get("test1");
        get("test2");
        function get(id){
            var test = document.getElementById(id);
            alert(test.innerHTML);
        }
    </script> 
</body>

并且此时如果我们将这个get函数抽调到单独一个js文件中，并且在html文件引入这个封装了get方法的js文件就可以进行方法的调用，这就是框架的雏形，如下：

function get(id){
    var test = document.getElementById(id);
    alert(test.innerHTML); 
}

<script src="封装的js文件路径"></script>
<body>
    <div id="test1">测试1</div>
    <div id="test2">测试2</div>

    <script>
        get("test1");
        get("test2");
    </script> 
</body>

此时，我们还是嫌js文件不够简洁，方法名难记，便把方法名用$代替，简化后如下：

function $(id){
    var test = document.getElementById(id);
    alert(test.innerHTML); 
}

<script src="js文件路径"></script> 
<body>
    <div id="test1">测试1</div>
    <div id="test2">测试2</div>

    <script>
        $("test1");
        $("test2");
    </script>
</body>

这样就组成了jQuery框架

1.1 jQuery框架安装引入

1.1.1 下载

从官网下载jquery库

一般我们在下载jquery文件或者引用cdn网站的jquery文件的时候，通常我们选择jquery.js或者jquery.min.js版本，而它们的区别在于jquery.min.js是没有缩进的、体积更小，适用于部署环境。而jquery适用于源码研究，我们对于jquery的学习，应该要上升到源码层次。

1.1.2 引入

jQuery库是一个JavaScript文件，可以使用HTML的<script>标签引用，但需要注意引入的jQuery的版本要和API手册版本/开发使用一致，例如

  <!-- 本地引入 -->
  <script src="../../jquery-3.5.1/jquery-3.5.1.js"></script>
---------------------------------------------------------------------------------------
  <!-- 通过cdn引入  在线引入  通常采用 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1.1.3 jQuery的基本使用

js写在body标签中时

<!-- 在线引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="div1">hello</div>
    <script>
        var div1 = $("#div1");
        alert(div1); //返回的是一个对象
        alert(div1.html());
        //通过html()方法返回div标签中的内容，html()方法是封装在jQuery中返回标签内容的方法，相当于innnerHTML
    </script>
</body>

1.1.4 查看jquery的版本

在浏览器的Console窗口中使用$.fn.jquery命令查看当前jQuery版本
在这里插入图片描述

2、jQuery对象

2.1 介绍

jQuery对象是类数组对象，jQuery的方法都是对类数组中的元素的批量操作。

注意：jQuery对象可以调用jQuery.prototype中声明的方法，js对象则不能调用。在使用jquery的时候，拿到一个对象务必要搞明白该对象是js对象还是jQuery实例

2.2 与js对象的联系与区别

以下省略jq的引入，对比如下代码：

<div class="div1">div1...</div>
<div class="div2">div2...</div>
<script>
    //1. 通过js方式获取名称叫做div的所有html元素对象
    var js = document.getElementsByTagName("div"); // 获取到的是js对象
    
    alert(js); // 输出js对象：[object HTMLCollection]
    console.log(js.length); // 获取返回的数组长度  结果：2
    
    // 对获取到的js对象中所有的div让其标签体内容都变为aaa，js方式实现
    for(var i = 0; i<js.length; i++){
        js[i].innerHTML = "aaa";
    }
</script>

<div class="div1">div1...</div>
<div class="div2">div2...</div>
<script>
    //2. 通过jq方式获取名称叫做div的所有html元素对象
    var $jq = $("div"); //获取到的是jq对象
    
    alert($jq) //输出jQuery对象：[object Object]
    console.log($jq.length); //获取返回的数组长度  结果：2
    
    //对获取到的js对象中所有的div让其标签体内容都变为bbb，jq方式实现
    $jq.html("bbb");
</script>

2.3 jQuery对象与js对象的相互转换

为什么要进行转换呢？虽然JQuery对象在操作时更加方便，但是jQuery对象和js对象中的方法不通用，所以有时要进行转换。

js转jq：格式：$(js对象);

<div class="div1">div1...</div>
<div class="div2">div2...</div>

<script>
   //通过js方式获取名称叫做div的所有html元素对象
   var js = document.getElementsByTagName("div"); //获取到的是js对象

   for(var i = 0; i<js.length; i++){
       // js[i].innerHTML = "aaa"; //原先js方式修改标签体内容
       //将js对象转换为jq对象，并调用jq中的html()方法修改标签体内容
       $(js[i]).html("aaa");
   }
</script>

jq转js：格式：jq对象[索引] 或者 jq对象.get(索引)

    <div class="div1">div1...</div>
    <div class="div2">div2...</div>
    <script>
        //通过jq方式获取名称叫做div的所有html元素对象
        var $jq = $("div"); //通过封装起来的标签选择器获取对象的方法获取到jq对象
     
    	//原先jq方式修改改标题内容
        // $jq.html("bbb"); 
        
        //jq转js，调用js中的innerHTML修改标签体内容
        for(var i = 0; i<$jq.length; i++){
            $jq[i].innerHTML="aaa";
            // $jq.get(i).innerHTML = 'aaa';
        }
    </script>

3、jQuery基本函数简介

3.1 $与jQuery函数

$和jQurey是jQuery中的函数，查看jquery源码可以看到jquery本质是一个函数，jquery向外暴露的就是一个jquery函数，该函数会返回一个jqurey实例对象。

// Define a local copy of jQuery
jQuery = function( selector, context ) {
	// The jQuery object is actually just the init constructor 'enhanced'
	// Need init if jQuery is called (just allow error to be thrown if not included)
	return new jQuery.fn.init( selector, context );
};

<!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>
    <!-- 引入jQuery库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
<script>
	// ready()是jq的一个入口函数
    $(document).ready(function(){
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);
    })
</script>

结果如下：
在这里插入图片描述
说明$就是jQuery函数对象。

3.2 入口函数

这个入口函数与网页中html、js、style等的加载顺序有关，当script写在head标签中时，网页会先加载script，然后才会加载html中的整体内容，这就导致网页可能会显示不出来，而这个入口函数就是让script中的代码在网页加载完html之后再加载，这样就能保证网页的基本框架先出来。（不过咱一般会把script标签写body里面并且靠近后面的位置）

3.2.1 js中的入口函数

<!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>
        window.onload = function(){
            var btn = document.getElementsByClassName("btn")[0];
            btn.onclick = function(){
                alert("原生js入口函数");
            }
        }
    </script>
</head>
<body>
    <button type="button" class="btn">原生js入口函数</button>
</body>
</html>

3.2.2 jquery入口函数的写法

第一种写法：window.onload = function(jq代码)

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        window.onload = function(){
            $(".btn").click(function(){
                alert("jQuery入口函数第一种方式");
            })
        }
    </script>
</head>
<body>
    <button type="button" class="btn">jQuery入口函数</button>
</body>
</html>

第二种写法：$(function(){jQuery代码})

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
       $(function(){
            $(".btn").click(function(){
                alert("jQuery入口函数第二种方式");
            });
        })
    </script>
</head>
<body>
    <button type="button" class="btn">jQuery入口函数</button>
</body>
</html>

第三种写法：$(document).ready(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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
       $(document).ready(function(){
            $(".btn").click(function(){
                alert("jQuery入口函数第三种方式");
            });
        })
    </script>
</head>
<body>
    <button type="button" class="btn">jQuery入口函数</button>
</body>
</html>

window.onload和$(function(){})的区别

window.onload只能定义一次，看如下代码：
<script>
    function fun1(){
        alert("1");
    }
    function fun2(){
        alert("2");
    }
    window.onload = fun1;
    window.onload = fun2;
</script>
此时结果是只显示2，因为，fun2()的结果覆盖住了fun1()的结果，所以显示2，也就是说如果window.onload定义了多次，那么后面的会覆盖掉前面的。

$(function())可以定义多次，如下：
<script>
    function fun1(){
        alert("1");
    }
    function fun2(){
        alert("2");
    }    
    $(fun1);    
    $(fun2); 
</script>
结果就是两者都执行了，都弹出各自的值

Jquery与javascript入口函数的区别

(1)jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
(2) JavaScript 的
window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

3.3 jquery函数$的使用方式

1、作为一般函数调用：$(param)

param有如下取值
1）参数为函数：当DOM加载完成后执行此回调函数
2）参数为选择器字符串：查找所有匹配的标签，并将它们封装成jquery对象
3）参数为DOM对象：将dom对象封装成jquery对象
4）参数为html标签字符串（用的少）：创建标签对象并封装成jquery对象

2、作为对象使用：$ .xxx()调用方法

例如：
$.each() 隐式遍历数组
$.trim() 去除两端的空格
…

4、jQuery选择器

jquey的事件绑定

常用的事件和js中的差不多，只是代码形式上有些许区别，如下：

<button type="button" id="btn">点我没好果子吃</button>
<script>
    //给按钮添加单击事件
    $("#btn").click(function(){
        alert("有你好果子吃！！！")
    })
</script>

$(“#btn”)表示通过id选择器获取jq对象，然后再通过click函数添加点击事件。同js中一样，jquery将获取元素对象的函数封装起来了，并且提供更加简单的方式供使用。下面是jQuery中各类选择器的介绍与使用。

4.1 基本选择器

1、标签（元素）选择器
语法：$("html标签名")
作用：获得所有匹配标签名称的元素

2、id选择器
语法：$("#id属性值")
作用：获得与指定id属性值匹配的元素

3、类选择器
语法：$(".class属性值")
作用：获得与指定class属性值匹配的元素

4、并集选择器
语法：$("标签元素1,标签元素2...)
作用：选择多个元素

5、选取所有标签元素
$("*")

6、选取当前HTML元素
$(this)

4.2 层级选择器

1、后代选择器
语法：$(A B)
作用：选择A元素内部的所有后代元素B

2、子选择器
语法：$(A>B)
作用：选择A元素内部的所有直接子元素B

3、兄弟选择器
语法：$(A + B)
作用：选择所有紧接在A之后的第一个B元素

语法：$)(A ~ B)
作用：选择在A之后的并且与A同级的第一个B元素

4.3 属性选择器

1、属性名选择器
语法：$("A[属性名]")
作用：包含指定属性的选择器

2、属性值选择器
语法：$("A[属性名='值']")
作用：包含指定属性等于指定值的选择器

3、复合属性选择器
语法：$("A[属性名='值'][]...")
作用：包含多个属性条件的选择器

4、属性过滤选择器
（1）语法：$("[属性名!="值"]")
作用：选取所有带有指定属性名并且其属性值不等于指定值的元素

（2）语法：$("[属性名$="值"]")
作用：选取所有带有指定属性名并且其属性值是以指定值结尾的元素。

（3）语法：$("[属性名^="值"]")
作用：选取所有带有指定属性名并且其属性值是以指定值开始的元素。

（4）语法：$("[属性名*="值"]")
作用：选取所有带有指定属性并且其属性值是含有指定值的元素

4.4 过滤选择器

1、首元素选择器
语法：:first
作用：获得选择的元素中的第一个元素

2、尾元素选择器
语法：:last
作用：获得选择的元素中的最后一个元素

3、非元素选择器
语法：:not(selector)
作用：不包括指定内容的元素，selector是选择器。

4、偶数选择器
语法：:even
作用：从0开始计数

5、奇数选择器
语法：:odd
作用：从0开始计数

6、等于索引选择器
语法：:eq(index)
作用：等于指定索引的元素

7、大于索引选择器
语法：:gt(index)
作用：大于指定索引的元素

8、小于索引选择器
语法：:lt(index)
作用：小于指定索引的元素

9、标题选择器
语法：:header
作用：获得标题元素，固定写法

4.5 表单过滤选择器

1、可用元素选择器
语法：:enabled
作用：获得所有可用元素
2、不可用元素选择器
语法：:disable
作用：获得不可用元素
3、选中选择器
（1）语法：:checked
作用：获得单选/复选框中的元素
（2）语法：:selected
作用：获得下拉框选中的元素（下拉框也有多选和单选）

5、jQuery事件

5.1 常用事件

简单罗列下常用的事件：

常用的jQuery事件快速绑定方法
1. $(document).ready(fn)
$(document).ready()方法允许我们在文档完全加载完后执行函数
2. click([data],fn)
click()方法是当点击事件被触发时会调用一个函数，并且可以传data数据给fn函数进行数据
3. dbclick([data],fn)
当双击元素时，会发生dbclick事件，调用fn函数，data可以作为数值传给fn。
4. mouseenter([data],fn)
当鼠标指针穿过元素时，会发生mouseenter事件，调用fn函数，data作为参数值传给fn函数
5. mouseleave([data],fn)
当鼠标指针离开元素时，会发生mouseleave事件
6. mousedown([data],fn)
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件
7. mouseup([data],fn)
当元素上松开鼠标按钮时，会发生mouseup事件
8. hover([mouseenter][mouseout])
hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定当第一个函数（mouseenter）；当鼠标移出这个元素时，会触发指定当第二个函数（mouseleave）
9. blur([data],fn)
当元素失去焦点时，发生blur事件
10、focus([[data],fn])
当元素获得焦点时，触发 focus 事件。
11. keydown()
键盘事件：按键按下事件
12. keyup([data],fn)
键盘事件：按键抬起事件
13、keypress([[data],fn])
当键盘或按钮被按下时，发生 keypress 事件。
keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
14、resize([[data],fn])
当调整浏览器窗口的大小时，发生 resize 事件
15、scroll([[data],fn])
当用户滚动指定的元素时，会发生 scroll 事件
16、select([[data],fn])
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
17、submit([[data],fn])
当提交表单时，会发生 submit 事件

5.2 绑定事件的方式

1、标准绑定方式
jq对象.事件类型(回调函数)

事件类型就是5.1 节中介绍的常用事件类型

2、on绑定事件/off解绑事件
jq对象.on("事件类型",回调函数)
jq对象.off("事件类型")

on()方法其实还有两个参数，例如选择器字符串selector，以及传递给事件处理程序的参数event.data。

还有一个特殊的点是能使代码简化：当一个事件返回值是true或者false时，后面的回调函数可以直接用false或true代替，例如$("form").on("submit", false)

3、bind绑定事件/unbind解绑事件
jq对象.bind("事件类型","参数（可选）",回调函数)
jq对象.unbind("事件类型",回调函数（可选）)

bind()方法中可以同时绑定多个事件，事件类型之间用空格分隔，执行同一个事件处理程序；也可以同时绑定多个事件类型和执行多个对应事件处理程序。
目前这个方法已经被3.0版本以上弃用了

测试：标准绑定方式

    <div id="div" style="background-color: red;width: 100px;height: 100px;"></div>
    <script>
        //绑定点击事件(一个事件)
        $("#div").click(function(){
            alert("我被点击了");
        })
        //同时绑定两个事件：鼠标移入和鼠标移除
        $("#div").mouseover(function(){
        	// 设置div的背景颜色为黄色
            $("#div").css("backgroundColor","yellow")
        })
        $("#div").mouseleave(function(){
        	// 设置div的背景颜色为绿色
            $("#div").css("backgroundColor","green")
        })

		/*
        //绑定多个事件时，也可以通过链式编程简化操作，如下：
        $("#div").mouseover(function(){
            $("#div").css("backgroundColor","yellow")
        }).mouseleave(function(){
            $("#div").css("backgroundColor","green")
        })
		*/
    </script>

测试：on绑定；off解绑

<input type="button" id="btn1" value="点击按钮1触发事件">
<input type="button" id="btn2" value="解绑按钮1绑定的事件">
<script>
    $("#btn1").on("click",function(){
        alert("我被点击了");
    })
    //将点击事件绑定在btn2上，btn2被点击后解绑btn1上绑定的事件
    $("#btn2").on("click",function(){
        $("#btn1").off("click");
        //$("#btn1").off(); //如果off后面不加参数，那么表示解绑组件上所有的事件
    })
</script>

当点击了第二个按钮后，第一个按钮的事件就被解绑了，也就不会再触发指定的事件了。

测试：bind()绑定，unbind()解绑

bind和on很相似，unbind()又和off很相似，使用方式都差不多，简单的就不写了，这里写个稍微复杂一丢丢点的例子

<body>
    <div>标题</div>
    <br>
    <button>新增</button>
    <button>修改</button>
    <button>解绑点击事件</button>


    <script>
        //绑定事件
        /*        
            $("button").bind("click","123",function(event){
            console.log(event); //这里的event是事件处理对象，里面包含事件的信息
            console.log(event.data); //123，event对象中的data参数接收了传进来的参数123        
        }) 
        */

        //点击新增或者修改按钮，改变div内容区的内容
        $("button").bind("click",function(event){
            //可以通过event.target（获取dom节点，可以拿到元素及其内容）来判断当前是哪个按钮被点击
            //console.log(event.target); //<button>新增</button>
            //进一步可以直接获得纯文本内容
            //通过event.target.html()方法获取到的内容判断哪个按钮被点击
            if($(event.target).html() === '新增'){
                $("div").html("执行事件：新增学生信息");
            }else if($(event.target).html() === '修改'){
                $("div").html("执行事件：修改学生信息");
            }else if($(event.target).html() === "解绑点击事件"){
                //unbind()传入参数（事件名）表示解绑指定部件上指定事件
                $("button").unbind("click");
                $("div").html("已解绑");
                //unbind()不传入参数表示解绑本部件上所有事件
                // $("button").unbind();
            }
        })
    </script>
</body>

请添加图片描述
html()方法是jquery中获取文本内容的方法，可以看这里

通过标准绑定方式绑定事件也可以通过unbind()方法来解绑，格式：jq对象.unbind("事件类型",事件名称)如下：

<body>
    <input id="btn1" type="button" value="绑定事件">
    <input id="btn2" type="button" value="解绑事件">
    <script>
        //点击事件执行效果
        function clickEvent(){
            alert("绑定成功");
        }
        //绑定点击事件
        $("#btn1").click(clickEvent);
		//通过点击btn2按钮解绑btn1按钮绑定的事件
        $("#btn2").click(function(){
            $("#btn1").unbind("click",clickEvent);
            alert("成功解绑");
        })

    </script>
</body>

5.3 事件代理/事件委托

当同一个父元素的子元素有相同的事件处理程序时，可以利用事件代理/事件委托（事件冒泡原理）来将相同的事件绑定给父元素，以此提高代码效率。
如下：

<body>
    <button>点我</button>
    <div style="width:50px;height:30px;color:red;">点我</div>
    <script>
        //下面的button和div绑定的都是同一个事件
        //如果还有许多元素都要绑定这个clickEvent事件，那么肯定会增加浏览器负担
        
        function clickEvent() {
            alert("我被点击了");
        }
        /*         

        $("button").click(clickEvent);
        $("div").click(clickEvent);

         */

        //不如通过事件代理，直接将子元素中相同的事件绑定在父元素上
        //这里button和div的父元素是body，所以可直接将事件绑定在body上
        $("body").on("click",clickEvent);
       	//移除指定组件的事件代理
       	$("body).off("click","button"); //移除对button的事件代理
       	//$("body).off("click","div"); //移除对div的事件代理
       	
    </script>
</body>

6、jQuery设置css样式

方法一：css(name,prop|[,function(index,value)])
参数介绍：
- 第一个参数是属性名
- 第二个参数有两个选择，第一个选择是prop：表示属性值；第二个选择是function：是属性的回调函数，其第一个参数是元素在对象集合中的索引位置，value是原先的属性值
作用：可以用来给指定元素动态设置css样式

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .div{
            /* 这里只设置了div的长和宽 */
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        // 给div设置新属性并添加属性值
        $(function(){
            $(".div").css("background-color","red");
        })
    </script>
</head>
<body>
    <div class="div"></div>
</body>
</html>

<script>
 $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });
</script>

还有以下方法，具体使用可以参考jquery中文网
（1）offset([coordinates])：获取匹配元素在当前视口的相对偏移
（2）position()：获取匹配元素相对父元素的偏移
（3）scrollTop([val])和scrollLeft([val])：分别是获取匹配元素相对滚动条顶部和左边的偏移
（4）height([val|fn])/和width([val|fn])：分别是取得匹配元素当前计算的高度值（px）和宽度值（px）
（5）innerHeight()和innerWidth()：分别是获取第一个匹配元素内部区域高度、宽度（包括补白、不包括边框）

持久的棒棒君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初学jQuery（1）:简介+jQuery对象+jQuery函数+jQuery选择器+jQuery常用事件+css样式设置

jQuery简介jQuery是一个轻量级Javascript库，是对ECMAScript、dom、bom的一个浅封装（轻量库），简化用户的操作。jquery是js的基础上对js的部分代码功能进行了封装，用更少的代码做更多的事情。jQuery库主要功能有：HTML选取HTML元素操作CSS操作HTML事件函数JavaScript特效和函数HTML DOM遍历和修改AJAXjQuery安装jQuery安装十分简单，只需要将jQuery的库导入到html中即可，我们可以从官网下载下来
复制链接

扫一扫