阅读 133

jquery汇总

了解jquery

回顾前面学到的js我们遇到的一些不足之处:

  1. 实现一个小功能要写很多代码
  2. 获取页面元素不方便
  3. 兼容性问题
  4. window.onload事件会覆盖,我们只能写一个

  5. 动画效果,不好实现

我们之所以选择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”).onclick复制代码

JQ: 

$(“#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();   

有待更新...


文章分类
阅读