JQuery的学习笔记

JQuery是JavaScript的一种封装库，它能够简化我们的开发，屏蔽浏览器之间的差异。

1.  $(document).ready

 1 1.<script type="text/javascript">
 2 //窗体加载完之后执行 dom创建完成，并且图片/css/js加载完之后执行
 3 window.onload = function () {
 4 alert("win.onoad");
 5 }
 6 //窗体加载完之后执行 dom创建完成之后执行（可以注册多次）
 7 $(document).ready(function () {
 8 alert("hello word");
 9 })
10 
11 $(function () {
12 
13 })
14 </script>
View Code

2.常用的两个方法。

 1 <script type="text/javascript">
 2         //遍历数组
 3         var arr = [100, 200, 300];
 4         arr = $.map(arr, function (item) {
 5             return item + 2;
 6         })
 7 
 8         //遍历字典
 9         var dic = { "name": "123", "age": "20", "sex": "男" };
10         $.each(dic, function (key, value) {
11             alert(key + ":" + value);
12         })
13 
14     </script>
View Code

3.选择器

 1     <script type="text/javascript">
 2         $(function () {
 3             //id选择器
 4             $("#Div1").text("123");
 5             //类选择器
 6             $(".cls").text("abc");
 7             //标签选择器(隐士迭代)
 8             $("div").text("123");
 9         })
10     </script>
View Code

4.样式操作，设置属性

 1 <script type="text/javascript">
 2         $(function () {
 3             $("#btn").click(function () {
 4                 $("#link").attr("href", "http://www.baidu.com");
 5                 $("#link").attr("style", "coler:red");
 6                 $("#link").css("color", "red");
 7                 $("#link").css({ "color": "red" }, { "color": "red" });
 8             })
 9 
10             $("#btn1").click(function() {
11                 $("#link").removeAttr("href");
12             })
13         })
14     </script>
View Code

 

posted @ 2013-10-29 09:33  Suner  阅读(186)  评论(0)  编辑  收藏  举报