jQuery的使用和简介

怼烎@ 2022-02-22 23:42 203阅读 0赞

jQuery是一个javascript库，使用js代码编写的

作用：

1.解决浏览器中的兼任问题，如IE6,IE7  
2.可以简化代码的编写方式，操作DOM对象可以很方便  
3.Dom中window.onload事件只能有一个，前面的会被覆盖，而jQuery可以有多个

jQuery的基本用法：

首先引入jQuery：  
<script  src="https://code.jquery.com/jquery-3.1.1.js"></script>

## ##

# 1.获取页面Dom对象： #

<div id="divobj">abc</div>
    
    //使用正常的方式获取DOM元素
    var a=document.getElementById('divobj');
    
    //使用jQuery获取
    var b=$("#divobj");

在上述例子中使用$符号代表jQuery,  $在js中并不代表什么，但是jquery.js中将其定义为了一个函数名，其实$就代表jQuery对象本身

> var b=$("\#divobj");  
> 就等价于：  
> var b=jQuery("\#divobj");

因为jquery.js中是这么定义的：

jQuery = function( selector, context ) {
    		// The jQuery object is actually just the init constructor 'enhanced'
    		return new jQuery.fn.init( selector, context, rootjQuery );
    	}
    
    window.jQuery = window.$ = jQuery;

jQuery是一个函数，而window.$ =jQuery ，所以$可以理解成jQuery的缩写

> 将Dom对象传入$函数，就代表将该对象转换成jquery对象，就可以使用jquery提供的方法和属性了

# 2.事件 #

一般的dom当中，页面的加载事件是这样的：

window.onload=function() {
        alert('加载完毕');
    }

但是jQuery中是这样的：

$(window).on("load" ,function (){ 
        alert('加载完毕');
    });

将window传入$函数，返回jquery的对象，然后调用jquery提供的on方法，传入“load”，代表加载事件，传入要执行的匿名函数

页面加载完毕事件还可以这么写：

$(function (){ 
        alert('加载完毕');
    });

直接传入一个 匿名函数，就可以代表加载完毕的函数了

点击事件可以这么写：

$("#divobj").click( function(){ 
    	alert('点击事件触发');
    });

得到一个div对象，然后直接调用jquery的click事件即可

# 3.dom对象和jquery对象互转 #

DOM对象---->jquery对象：

$(Dom的对象)  ---->jquery对象

jquery对象---->DOM对象有两种写法：

1. $("\#btn")\[0\]  ---> DOM对象

2. $("\#btn").get(0) --->Dom对象

# 4.jquery选择器 #

jqeury中的选择器和css选择器很类似，最常用的有id选择器，类选择器，标签选择器

jquery获取元素的方式：

1.根据id获取--->id选择器----->$("\#id的值")；     一个

2.根据标签的名字获取 --->标签选择器 -----> $(标签的名字")；   多个

3.根据类名获取-----> 类选择器 ------>$(.类名)；    多个

举例类选择器：

<div class="c1">abc</div>
    
    
    $(".c1").click( function(){ 
    	alert('点击事件触发');
    });

# 5.设置样式CSS #

css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性：

返回指定的 CSS 属性的值，如返回首个匹配到的p元素的 background-color 值：

$("p").css("background-color");

设置 单个CSS 属性

$("p").css("background-color","yellow");

设置多个CSS属性：

$("p").css({"background-color":"yellow","font-size":"200%"});

注意：设置单个和多个的分割符不一样，单个则用逗号，多个则是冒号和逗号配合使用，这是我比较费解的

# 6.链式编程 #

是把多行代码变成一行代码,如下：

<input type="button" name="" value="变换样式" id="btn">
    <div id="dv">abc</div>
    
    
    $("#btn").click(function () {
        $("#dv").html("<p>这是一个P</p>");
        $("#dv").css("backgroundColor","red");
    });

html方法是在元素内插入一段html片段，css则是为元素设置样式

我还可以这样写：

$("#btn").click(function () {
        $("#dv").html("<p>这是一个P</p>").css("backgroundColor","red");
    });

把两行代码变成一行，原理就是在html函数中返回this

听这名字挺唬人，其实没什么软用

# 7.动画 #

## ##

### 1.显示隐藏动画 ###

代码如下：

效果如下：

![20190406181329513.gif][]

jQuery提供了两个方法来控制元素的显示隐藏，show和hide

接下来演示动画，省略btn等元素代码，如下：

//hide和show方法可以传参数，可以是字符串，也可以是整数
    //1.字符串："slow","normal","fast" 分别代表慢中快
    //2.整数，单位为毫秒，1000既代表1000毫秒
    
    $("#btnhide").click(function () {
    	$("#dv").hide("fast");
    });
    
    $("#btnshow").click(function () {
    	$("#dv").show(3000);
    });

![20190406181742341.gif][]

###  2.滑入滑出动画 ###

代码如下：

<head>
    	<style>
    		#dv{
    			width: 200px;
    			height: 150px;
    			background-color: green;
    		}
    	</style>
    </head>
    <body>
    
    
    <input type="button"  value="滑入" id="btn1">
    <input type="button"  value="滑出" id="btn2">
    <input type="button"  value="切换" id="btn3">
    <div id="dv"></div>
    
    <script >
    $("#btn1").click(function () {
    	$("#dv").slideUp();
    });
    
    $("#btn2").click(function () {
    	$("#dv").slideDown();
    });
    
    $("#btn3").click(function () {
    	$("#dv").slideToggle();
    });
    
    </script>
    </body>

slideUp代表滑入，就是向上收起，slideDown代表向下展开，而slideToggle则是切换

效果如下：

![20190406183000980.gif][]

这三个方法和上面的show，hide方法一样，也可以传入slow，normal，fast字符串代表快慢，或者传入1000代表毫秒数，不再演示

# 8.创建元素 #

DOM中创建元素有三种方式：

1.document.write("标签代码");   //缺陷:页面加载后创建元素,把页面中原有的内容全部的干掉

2.innerHTML

3.document.createElement("标签的名字")  
          
jQuery中创建元素有两种方式:

**1.$("标签的代码")**

**2.对象.html("标签的代码");**

# 9.绑定事件和解绑事件 #

1.on和off

//用on方法绑定click事件
    $("#btn").on("click",function(){
        alert("我被点击了")；
    })
    
    //解绑,参数传入事件的名称
    $("#btn").off("click");

2.bind和unbind

//用bind方法绑定click事件
    $("#btn1").bind("click", function(){
        alert("我被点击了");
    });
    
    
    //解绑unbind ,参数传入事件的名称
    $("#btn1").unbind("click");

[20190406181329513.gif]: /images/20220223/9c4af938c6b44e97a0c746762aa66ec1.png
[20190406181742341.gif]: /images/20220223/6434ab20e06c491a90065af5ef047d13.png
[20190406183000980.gif]: /images/20220223/3ef9caf59979439dab776fcc4db6a148.png