获取jQuery
1.x 支持老浏览器 ie6,7,8 停止更新
2.x 不支持老浏览器 停止更新
3.x 不支持老浏览器 保持更新
下载网址:https://jquery.com/
体验jQuery
jQuery的优势
- 可以写多个入口函数
- jQuery的API的名字都容易记忆
- jQuery代码简洁
- jQuery帮我们解决了浏览器兼容性问题
- 容错率较高,前面的代码出了问题不会影响后面
jQuery是什么
jQuery是一个快速、小巧、功能丰富的JavaScript库。它使诸如HTML文档遍历和操作、事件处理、动画和Ajax之类的事情变得更加简单,因为它提供了一个易于使用的API,可以跨多种浏览器工作。jQuery结合了通用性和可扩展性,改变了数百万人编写JavaScript的方式。
jQuery是一个封装了许多方法的库
如何使用jQuery
- 引入jQuery文件
<script>
- 写一个入口函数
$(document).ready(function(){
});
- 找到要操作的元素(jQuery选择器),去操作它(给他添加属性,样式,文本……)
$(document).ready(function(){
$('div').width(100).height(100).cass('backgroundColor','red').text('> _ <');
});
jQuery的入口函数
//jQuery入口函数的两种写法
//第一种
$(document).ready(function(){
});
//第二种
$(function(){
});
jQuery入口函数与window.onload入口函数的区别:
//window.onload入口函数不能写多个,但是jQuery的入口函数是可以写多个的
$(function(){
console.log("我是一个入口函数");
);
$(function(){
console.log("我又是一个入口函数");
);
//执行时机不同,jQuery入口函数快于window.onload
//jQuery入口函数要等待页面上DOM树加载完后执行
//window.onload要等待页面上所有资源(外部css/js连接,图片)都加载完毕后执行
$(function(){
alert("我是jQuery入口函数");
});
window.onload = function(){
alert("我是window.onload");
}
$是一个函数
//如果报了这个错误:$ is not defined,就说明没有引入jQery文件
$(function(){
});
//jQuery文件结构
//其实是一个自执行函数
(function(){
window.jQuery = window.$ = jQuery;
}());
引入一个js文件,是会执行其中的代码的
jQuery文件是一个自执行函数,执行这个jQuery文件中的代码,其实就是执行这个自执行文件,这个自执行文件就是给window对象添加一个jQuery属性和
其实适合jQuery等价,是一个函数
console.log(window.jQuery === window.$);//true
console.log(Object.toString.call(s));//'[object Function]'
//$是一个函数,参数传递不同,效果也不一样
//第一个,如果参数传递的是一个匿名函数 - 入口函数
$(function(){
});
//第二个,如果参数传递的是一个字符串 - 选择器或创建一个标签
$('#one');
$('<div>这是一个div</div>');
//第三个,如果参数是一个dom对象,那它就会把dom对象转换为jQuery对象
$(dom对象);
dom对象和jQuery对象
//dom对象:原生js选择器获取的对象
//特点:只能调用dom方法或属性,不能调用
$(function(){
//document.getElementById("");
//document.getElementByTagName("");
});
案例 - 开关灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../JQuery/jquery-1.12.4.js"></script>
<style>
img{
display:block;
margin:10px auto;
}
</style>
</head>
<body>
<button class="ON">开灯</button>
<button class="OFF">关灯</button>
<img src="../Images/baidu0001.jpeg" alt="这是一张图片!">
<script>
$(function(){
//给按钮添加事件:设置body的背景色
$('.ON').click(function(){
$('body').css('backgroundColor','white');
});
$('.OFF').click(function(){
$('body').css('backgroundColor','black');
});
});
</script>
</body>
</html>
获取和设置文本内容的方法 - text()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../JQuery/jquery-1.12.4.js"></script>
<script type="text/javascript" src=""></script>
</head>
<body>
<input type="button" value="获取" id="getBtn" name=""/>
<input type="button" value="设置" id="setBtn" name=""/>
<div id="div1">我是一个div1标签
<p>我是一个p1标签<span>span1</span> </p>
</div>
<div id="div2">我是一个div2标签
<p>我是一个p2标签<span>span2</span> </p>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
//test(),获取和设置文本
//1. 获取文本
$('#getBtn').click(function(){
//1.1获取id为div1的标签的文本
//会获取到这个标签中所有的文本,包括后代元素的文本
//console.log($('#div1').text());
//1.2获取标签为div的元素的文本
//包括了多个dom元素的jQuery对象,通过text()方法获取文本,会把所有dom元素的文本获取到
console.log($('div').text());
});
//2.设置文本:text()方法给参数,参数就是要设置的文本,会覆盖原来的内容
//如果文本包含标签,此标签是不会被解析的
$('#setBtn').click(function(){
//2.1 给id为div1的这个标签设置文本
//$('#div1').text('我是新设置的文本');
//2.2 给div设置文本
$('div').text('设置的文本');//隐式迭代
});
});
</script>