jQuery

JQuery
一、语法的基本结构:


第一步:导入JQuery脚本包。


第二步:写JQuery的ready事件


$(document).ready(function(){
//在这里面写代码。
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果您点击我,我会消失。</p>
<p>点击我,我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

实现效果即 鼠标点击<P>标签的文字会消失  

注意:
1.JQuery的触发时机--当页面文档加载完毕执行

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小


2.非侵入性的编码方式。--不在标签中表现出来.类似于CSS样式表
3.链式结构的编码方式。--可以用点无限向后加载功能
4.集合式操作。操作选择器选择出来的一组对象。


二、具体语法


(一)找到元素


选择器的种类:同样式表(CSS3.0)
第一类:基本选择器


 1.最最基本的:

  $("p").click(function(){

1
$(this).hide(); 

  });

标签,$符号后面("标签名")

ID选择器,$符号后面("#ID号")

class选择器,$符号后面(".Class名")


 2.组合选择器:

 空格(后代),逗号(并列),标签名.class,> (子级选择器)


第二类: 过虑选择器


1.基本过滤(按照HTML标记的书写顺序来过滤)过滤选择器都是以:(冒号开头)
:first - 第一个
:last - 最后一个
:eq(索引号) - 任意一个
:lt(索引号) - 大于某个索引号
:gt(索引号) - 小于某个索引号
:odd - 奇数个
:even - 偶数个
:not(选择器) - 排除

1
2
3
4
5
6
7
8
9
$(document).ready(function () {
    $("div div:contains(a)").click(function () {
        alert("这是非侵入的JS");
    }).mouseover(function () {
        $(this).css("background-color","red").css("font-size","48px");
    }).mouseout(function () {
        $(this).css("background-color","white")
    });
});

上面代码中$("div div:contains(a)")表示:选出所有div标签后代也是div标签的,并且内容中包含a的元素

后面$(this)为上面功能后附加的新功能.this就代表$("div div:contains(a)")选出的元素

2.属性过滤

[属性名] - 选择拥有这个属性的元素
[属性名=值] - 找属性名是某个值的元素
[属性名!=值] - 找属性名不是某个值得元素
[属性名*=值] - 属性值中包含某个值的元素
[属性名^=值] 属性值是以某某开头的元素
[属性名$=值] 属性值是某某结尾的元素

3.内容过滤
:has(选择器) - 开始与结束标记之间是否包含某类子元素,如果包含,就选择出来。
:contains(字符串) - 开始与结束标记之间是否包含某段文字,如何包含就选择出来。
(二)DOM操作
1.操作元素本身
操作属性,操作样式,操作内容
2.操作相关元素
找相关元素:父、子、兄弟、前、后
操作相关元素:添加、复制、删除、替换
(三)事件与动画

一、事件

1.在JavaScript语法中的事件,把onxxxxx中的on去掉,就是JQuery中的事件。

例如:
onclick - click
ondblclick - dblclick

onmouseover - mouseover
onmouseout - mouseout

onfocus - focus
onblur - blur

onchange - change

onkeydown - keydown
onkeyup - keyup
onkeypress - keypress

2.特有事件:
hover(function(){},function(){}):相当于把mouseover和mouseout结合起来了

toggle(function(){},function(){},...function(){}):每点击一下执行下一个function,如执行到末尾,会再返回第一个执行

案例:
1.光棒效果:mouseover,mouseout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
      .odd {
          
      }
      .even {
          
      }
      .mover {
          
      }
  </style>
  <script src="Scripts/jquery-1.7.1.min.js"></script>
  <script language="javascript">
      $(document).ready(function () {
          //$("#GridView1 tr:gt(0)").mouseover(function () {
          //    $(this).addClass("mover");
          //}).mouseout(function () {
          //    $(this).removeClass("mover");
          //});
          $("#GridView1 tr:gt(0)").hover(function () {
              $(this).toggleClass("mover");
          }, function () {
              $(this).toggleClass("mover");
          });
      });
  </script>

  实现效果同注释代码一样,---当鼠标进过背景色变为黄色.其中toggleClass()--有该属性则去掉,没有则加上



 

 


3.JQuery中的事件,需要事件的小括号中写function(){}
$("#Button1").click(function(){
//事件处理代码
});



二、动画
hide(),show()
fadeIn(),fadeOut()
slideUp(),slideDown()

slideUp([毫秒数],[回调函数])
slideUp(3000,function(){xxx();})

案例:

展开面板:click

  


(四)Ajax异步通信

posted @ 2015-08-29 08:49  怎能不累  阅读(225)  评论(0编辑  收藏  举报