作业：构建网站- jQuery基础

获取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>