Jquery
1. jquery优势
轻量级、强大的选择器、出色的DOM操作封装、完善的时间和时间对象兼容机制、方便的链式操作、隐式迭代、完善的文档、丰富的插件
demo1:实现当页面加载完成的时候a标签上的文字是红色，当点击之后，让a标签上有一个黄色的边框
<html>
<head>
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<a href="#">点我</a>
<!--原生JS实现当页面加载完成的时候a标签上的文字是红色，当点击之后，让a标签上有一个黄色的边框-->
<!--<script>
var a = document.getElementsByTagName('a')[0];
a.style.color = "red"; //两步操作必须分开写
a.onclick = function(){
this.style.border = "10px solid #f90"
}
</script>-->
<!--Jquery实现当页面加载完成的时候a标签上的文字是红色，当点击之后，让a标签上有一个黄色的边框-->
<script>
var a = $('a');
a.css('color','red').click(function(){
$(this).css('border','10px solid #38a38a')
})
</script>
</body>
</html>
demo2: 当点击每个p标签的时候，弹出每个当前p标签的内容
<html>
<head>
<title></title>
<script src="jquery.js"></script>
</head>
<body>
<p>第一个p标签</p>
<p>第二个p标签</p>
<p>第三个p标签</p>
<!--原生JS 当点击每个p标签的时候，弹出每个当前p标签的内容-->
<!--<script>
var pArray = document.getElementsByTagName('p');
for(var i = 0; i < pArray.length; i++){
pArray[i].onclick = function(){
alert(this.innerHTML);
}
}
</script>
-->
<!--Jquery 当点击每个p标签的时候，弹出每个当前p标签的内容-->
<script>
var pArray = $('p')
pArray.click(function(){
alert($(this).html())
})
//隐式迭代
</script>
</body>
</html>
2. $(document).ready()和window.onload的区别
| window.onload | $(document).ready() | |
| 执行时机 | 等网页中的所有资源加载完毕之后（包括图片、flash、音频、视频），才能执行 | 等dom树加载完毕之后就可以执行 |
| 编写个数 | window.onload只能写一个(写多个只执行最后一个) | $(document).ready()可以写多个 |
| 简化写法 | 无 | $(function(){}) |
3.jQuery对象与DOM对象
3.1 用DOM方法获得到的对象就是DOM对象，
