jQuery的使用和简介

最新推荐文章于 2023-08-12 10:47:33 发布

Bird鸟人

最新推荐文章于 2023-08-12 10:47:33 发布

阅读量258

点赞数

分类专栏：前端文章标签： javascript jQuery

本文链接：https://blog.csdn.net/wcc27857285/article/details/89042569

版权

前端专栏收录该内容

13 篇文章 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.显示隐藏动画

代码如下：

<style>
		#dv{
			width: 200px;
			height: 150px;
			background-color: red;
		}
</style>


<input type="button"  value="隐藏" id="btnhide">
<input type="button"  value="显示" id="btnshow">
<div id="dv"></div>

<script>
$("#btnhide").click(function () {
	$("#dv").hide();
});

$("#btnshow").click(function () {
	$("#dv").show();
});
</script>

效果如下：

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);
});

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则是切换

效果如下：

这三个方法和上面的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");

Bird鸟人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录