了解jquery
回顾前面学到的js我们遇到的一些不足之处:
- 实现一个小功能要写很多代码
- 获取页面元素不方便
- 兼容性问题
window.onload事件会覆盖,我们只能写一个
- 动画效果,不好实现
我们之所以选择JQuery,就是为了解决以上的问题的。
jquery特点
具有独特的链式语法和短小清晰的多功能接口;
具有高效灵活的css选择器,并且可对CSS选择器进行扩展;
拥有便捷的插件扩展机制和丰富的插件。
Query兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
轻量级
出色的浏览器兼容性
出色的DOM操作封装
完善的ajax
链式编程
隐式迭代(无需for循环遍历dom对象)
完善的文档、强大的社区
丰富的插件
jquery入门
入口函数
$(document).ready(function(){alert("aaa")})$(function(){alert("aaa")})事件处理js jquery区别
事件源
JS:
docoment.getElementById(“id”);JQ:
$(“#id”);事件
JS:
docoment.getElementById(“id”).onclickJQ:
$(“#id”).click事件处理程序(监听器)
JS:
docoment.getElementById(“id”).onclick = function() { // 语句 };
JQ:
$(“#id”).click(function(){ // 语句});jQuery控制CSS
核心方法:.css()
<body>
<div id="main">hhh</div>
<button>点击</button>
</body>$("button").click(function(){
$("#main").css({
width:300,
"background-color":"#f00"
})
})注意细节:
1,如果value有px, 需要去掉px(属性值直接填纯数字,jQuery会自动帮你补单位)
2,如果是数字的话,不需要加引号,其它需要加引号
3,如果属性名中有-,那么我们也需要给属性名加上引号
4,如果属性名中有-, 想去掉引号的话,需要写成驼峰命名法
5,属性名可以加引号,也可以不加引号
jQuery控制HTML
核心方法:html()
修改HTML
.html(参数1) 参数1表示要修改的html内容
访问HTML
.html() 没有参数表示访问
<body>
<div id="main"></div>
<button>修改</button>
<button>访问</button>
</body>
<script src="./jquery.js"></script>
<script>
$("button:eq(0)").click(function(){
$("div").html("<h1>haha</h1>")
})
$("button:eq(1)").click(function(){
alert($("div").html())
})
</script>jQuery控制标签属性
核心方法:attr();
有待更新...