目录
1.jQuery简介
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
2.jQuery的使用
首先进入jQuery官网获取jQuery库文件,下载jQuery库文件
*http://jquery.com/
jquery库分为开发板和发布版,两种版本有细微的差别
名称 | 大小 | 说明 |
---|---|---|
jQuery-3版本号js(开发版) | 约268KB | 完整无压缩版本,主要用于测试学习和开发 |
jQuery-3版本号min.js(发布版) | 约91KB | 经过工具压缩,或经过服务器Gzip压缩,主要用于发布产品和项目 |
3.初识jQuery
3.1json简化创建自定义对象的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简化创建自定义对象的方式</title>
</head>
<body>
<!-- js方式定义Person对象 -->
<script type="text/javascript">
function Person(id,name,sal) {
this.id = id;
this.name = name;
this.sal = sal;
}
var p = new Person(1,"杨",7000);
document.write("编号"+p.id+"<br/>");
document.write("姓名"+p.name+"<br/>");
document.write("薪水"+p.sal+"<br/>");
</script>
<hr/>
<!-- json方式定义Person对象 -->
<script type="text/javascript">
var d = {
id :1,
name:"李",
sal :8000
}
document.write("编号"+d.id+"<br/>");
document.write("姓名"+d.name+"<br/>");
document.write("薪水"+d.sal+"<br/>");
//属性里面可以使单引号,或者双引号,字符串必须加单引号或双引号,其他类型比价读好
</script>
</body>
</html>
3.2json创建一个数组,数组中有三个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建一个数组,数组中有三个对象</title>
</head>
<body>
<!--json数组-->
<script type="text/javascript">
var js = [
{
id:1,
name:"张"
},
{
id:2,
name:"思"
},
{
id:3,
name:"嘉"
}
];
</script>
<script type="text/javascript">
/*遍历数组*/
/*for(var i=0;i<js.length;i++){
document.write("编号:"+js[i].id+"<br/>");
document.write("姓名:"+js[i].name+"<br/>");
}
document.write("共有:"+js.length+"个学生<br/>")*/
</script>
</body>
</html>
3.3json创建一个对象,其中一个属性是数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建一个对象,其中一个属性是数组</title>
</head>
<body>
<script type="text/javascript">
var student = {
id:1,
name:"李",
home:["朝阳","大连","本溪"]
}
for (var i=0;i<student.home.length;i++){
document.write(student.home[i]+" ")
}
</script>
</body>
</html>
3.4.jQuery入门
引入jquery库
在页面 中引入jQuery库的方法是HTML文档的头部,加上一行代码
<script type="text/javascript" src="js/jquery-3.3.1.js"></script> <---引入jquery库-->
列表中:
注 :src:是路径js包下的 jquery-3.3.1.js 文件, 这种路径适用于html项目裸露在外面的, 如果在包下,例如我列表中selector包下的html项目引入js路径前面就会加 '..'例如:
../js/jquery-3.3.1.js
jQuery的语法
jQuery的语法格式如下:
$(selector).action();
语法说明 :
工厂函数 $():将DOM对象转换为jQuery对象
选择器 selector :获取需要操作的DOM元素
方法 action(): jQuery提供的方法, 其中绑定事件出来的方法
jQuery 语法实例
-
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
-
演示 jQuery hide() 函数,隐藏 id="test" 的元素。
-
演示 jQuery hide() 函数,隐藏所有 <p> 元素。
-
演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。
-
注 ! : jQuery代码与JavaScript代码类似, 都是在页面中通过<script>标签嵌入jQuery代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入门</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input id="inputID" type="button" value="这是jQuery框架,写少代码,多做事情"/>
<div id="divID"><div>哈哈</div></div>
<script type="text/javascript">
//获取<input>标签中的value属性内容
/*var $input = $("#inputID");
var input = $input.val();
alert(input);*/
//获取div标签中的文本内容
/*1---1
var $div = $("#divID");
var div = $div.text();
alert( div);*/
/*1---2*/
/*$("#divID").text();*/
var $div = $("#divID");
var div = $div.html();//html和text的区别:
// html获取里面的元素相当于innerHTML,插入里面的都会输出出来
//div里套div :输出<div>哈哈</div>
//text只会获取里面的文本内容 : 哈哈
alert( div);
</script>
</body>
</html>
小提示
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
empty() -清空标签下的内容
3.5js对象和jQuery对象的相互转换
DOM对象与jQuery对象相互转换的原因 ?
-
DOM对象比较麻烦.为了完成一个功能写很多代码,还要考虑兼容性,而jQuery对象的操作封装成了函数,不用考虑兼容性
-
jQuery并不是封装了所有方法,编写复杂的功能还是需要原生js实现
DOM对象如何转换成jQuery对象
概述 : 对于一个DOM对象,只需要用 $() 把DOM对象包装起来即可, 就可以获得一个jquery对象了
语法 :
$ (DOM对象)
jQuery对象转换成DOM对象
-
索引 : jQuery对象是一个类似数组的对象,可以通过[index] 方法得到想用的对象
-
get(index) : jQuery本身提供了一个get(index)方法,可以通过该方法的到相应的DOM对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js对象和jQuery对象的相互转换</title>
<!--加入jquery库-->
<script src="../js/jquery-3.3.1.js"></script>
<!--加入css样式-->
<style type="text/css">
ul.circle {list-style-type:square}
div{width: 150px;height: 80px;background-color:lightsalmon; align: center}
</style>
</head>
<body>
<input id="inputID" type="button" value="这是jQuery框架,写少代码,多做事情"/>
<div>
<!--无序列表-->
<ul class="circle">
<li>学好</li>
<li>jquery</li>
<li>要多学多练</li>
</ul>
</div>
<script type="text/javascript">
//获取input标签value属性的内容[js-->jQuery]
/*var inputElement = document.getElementById("inputID");
var $input = $(inputElement);
alert($input.val());*/
//获取li标签的文本内容 [js-->jQuery]
/*var liNode = document.getElementsByTagName("li");
var $li = $(liNode);
alert($li.text());*/
//获取input标签value属性的内容 [jQuery-->js]
/*方式一*/
//alert($("#inputID")[0].value);
/*方式二*/
//alert($("#inputID").get(0).value);
//获取li标签的文本内容 [jQuery-->js]
var $li = $("li");
//方式一 : 索引
//var liElement = $li[2];
/*let li = liElement.innerHTML;*/
//var li = liElement.innerText;
//alert(li)
//方式二 : get(index)
var liElement = $li.get(2);
alert(liElement.innerText)
</script>
</body>
</html>