一、JQuery,是一套JavaScript的函数库(类库),可以很大程度上简化js代码。所以,利用Jquery对HTML元素的操作更加的便捷。
1、JQuery的核心函数:jQuery()函数,利用这个核心函数可以完成html元素的选取功能。为了简化开发过程,JQuery提供了$号代替JQuery核心函数
比如jQuery("div");等价于$("div");
2、Jquery的文档准备就绪事件
我们知道JavaScript代码要嵌入到<script>元素内,而因为浏览器是以顺序解析法解析前端代码的,
所以<script>元素的位置是有一定要求的。
所以我们经常会看到将JavaScript代码放在body的最下面的情况,同时开发人员也可以通过onload事件,解决以上问题
我们已经看到head中的JavaScript代码也成功执行了。所以开发人员可以将js代码编写到文档准备就绪事件中编写,避免在获取html元素时找不到的情况。
JQuery也一样,也提供了文档准备就绪事件ready()来解决这样的问题,具体代码见下图。(注意,两种写法)
3、JQuery的选择器,JQuery选择器允许我们对单个html元素或者某个元素组(多个html元素)进行操作,与css选择器概念一致,同时CSS选择器在JQuery中照样实用
比如,在css中要设置某个html元素的样式,需要使用css选择器先去选中具体的html元素
比如,在JavaScript中要完成对html元素的操作,首先需要获取html元素对应的dom对象,然后通过dom对象对html元素进行操作
在jquery中,要完成对html元素的操作首先需要通过jquery的选择器选中被操作的html元素后,才能对其操作
4、JQuery对象和DOM对象,在JQuery中通过$获取的对象是JQuery对象,而非DOM对象,同时dom对象和JQuery对象不能通用。也就是JQuery对象不能访问dom对象,而dom对象也不能访问JQuery对象中的方法中的方法
5、DOM对象与JQuery对象之间的转化
①、将dom对象转化成jq对象
var jqObj=$(dom对象);
②、将jquery对象转化成dom对象
var domObj=$("div").get(0);
var domObj=$("div")[0];
6、JQuery对html事件的处理,在JavaScript中,可以通过DOM对象html事件进行相关处理,在JQuery中,JQuery也可以对html事件进行处理
①、JavaScript处理html事件:
②、JQuery对事件的处理方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
background-color: blueviolet;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript">
// javascript提供的用于绑定html元素事件的方法
var pObj=document.getElementById("d1");
pObj.click=function () {
console.log("这里是JavaScript对html单击事件的处理机制");
}
$(document).ready(function () {
// jquery绑定事件,在事件名称括号中通过匿名函数绑定事件的处理程序
$("div").mouseover(function(){
$("div").css("backgroundColor","red");
});
$("div").mouseout(function(){
// $("div").css("backgroundColor","blueviolet");
/*
注意:若直接写this,这个this是dom对象而非是jquery对象,若希望this是JQuery对象的话,
需要将this这个dom对象通过转化方式转化成JQuery对象。类型转换$(domObj) 即 $(this);
*/
$(this).css("backgroundColor","yellow");
});
//jQuery提供的鼠标进入事件,与html原生的mouseover基本一样
// 区别:
$("p").mouseenter(function () {
$(this).css("backgroundColor","blue");
});
//jQuery提供的鼠标离开事件,与html原生的mouseout基本一样
$("p").mouseleave(function () {
$(this).css("backgroundColor","orange");
});
});
</script>
</head>
<body>
<div>我是<p>div</p>元素的值</div>
<p id="d1">我是p元素的值</p>
</body>
</html>
7、JQuery获取html元素的值 Jquery中提供了对html元素和属性进行操作的强大方法,同样也提供了获取html元素值的方法
JQuery提供的获取html元素内容(值)方法与JavaScript对比如下
①、html() —->domObj.innerHTML
②、text() —->domObj.innerText
③、val() —->domObj.value;
代码案例如下: