JQuery

JQuery是继prototype之后又一个优秀的Javascript库。

优势：
1、轻量级
2、强大的选择器
3、出色的Dom操作封装
4、可靠的事件处理机制
5、出色的浏览器兼容性

JQuery对象是JQuery包装了DOM对象后所产生的对象

dom对象转换为JQuery对象

var val;var $var=$(val);var $val=$(document.getElementById("id"));

JQuery 对象转换为Dom对象

//JQuery对象是一个数组对象var val =$var[0];var val =$var.get(0);var val =$("#msg").get(0);

使用JQuery的时候，首先要引用JQuery的js文件

//加载JQuery的js文件<script  src="jquery-1.7.2.js"></script><script>    //两种方式    //方式一 在页面上加载 当页面刷新的时候，这个JQuery就开始执行      //在ready()中绑定事件   $(document).ready(function(){         alert("方式一");    });      //方式二 通过函数调用   function aa(){      alert("方式二");   }</script>

JQuery对象所对应的方法 ：

var $val=$(document.getElementById("id"));$val.html();   //所选元素的标签中的值$val.val();  //所选元素标签的value属性的值$val.css();  //所选元素标签的样式$val.attr();  //所选元素的属性设置$val.text();  //select标签所选中的值

在这些方法里 ：
当方法中的属性值为键值对时 ，只给键 就相当于调用set( )方法
当键和值同时给的时候就相当于get( )方法。
eg：

var $val=$(document.getElementById("id"));$val.css（"color","red"）;  //这就是设置颜色为红色$val.css（"color"）;    //这就是获取颜色

当方法中的属性值为单值时 ，给值就相当于set( )方法 ，不给值就相当于get( )方法。
eg：

 var $val=$(document.getElementById("id")); $val.html("aaaaaaaaaa"); //设置标签中的内容 $val.html();   //取得标签中的内容

选择器

选择器是JQuery中的重中之重，
选择器所返回的的都是集合，哪怕只返回一个值，也是一个集合。

基本选择器：
# ————》 id
.————–》样式
element———》元素类型
*————-》全部
eg：

var $val =$("#id"); //跟idvar $val =$(".class"); //跟class的名称var $val =$("div");  //跟标签名 var $val =$("*");  //所有的标签元素

层次选择器
空格————》所有的后代元素
“>”————-》获得所有的子元素， 只有一级
+—————》获得紧邻的弟弟元素 下一个元素
~—————》获得同一级的所有弟弟元素 后面所有的同级元素
eg：

 $("#m1 span"); //获得id为m1标签的所有后代元素中的span标签元素

过滤选择器：
:first———-》第一个元素
:last———-》最后一个元素
:eq(index)———-》下标的元素
:ge(index)———-》大于下标的元素
:lt(index)———-》小雨下标的元素
:header———-》标题元素
:aninated———-》正在执行的动画的所有元素
eg:

 $("div:first"); //div中的第一个元素 $("div:eq(2)"); //div中的第二个元素

内容选择过滤器：
:contains(text)———- 文本包含text
:empty———-》选择不包含子元素或者文本的空元素
:has()———-》选取含有选择器所匹配的元素
:parent———-》选取其父元素
eg:

 $("div:contain('aaa')"); //div文本中含有aaa元素 $("div:empty"); //div中的空元素

可见性过滤器：
:hidden———-》选取所有不可见的元素
:visble———-》选取所有可见的元素
eg:

 $("div:hidden"); //div的隐藏元素 $("div:visble"); //div的可见元素

设置标签可见和不可见

  //设置不可见 <p style="display:none">aaaaa </p> //将不可见的标签设置为可见，两种方式  // 方式一  $(p:hidden).show().css("color",'red');  //方式二  $(p:hidden).("display","block").css("color",'red');

属性过滤选择器：
[属性名]——->含有某个属性名
[属性名=] ——->属性名等于
[属性名!=]——->属性名不等于
[属性名^=]——->属性名以。。开头
[属性名$=]——->属性名以。。结尾
[属性名*=]——->属性名包含。。。

表单选择器：
input ———》 全部元素
text ———》文本
password———》密码
。。。———》。。。
所有的text元素

表单对象属性过滤选择器：
:enabled ——–》选取所有的可用元素
:disabled——–》选取所有的不可用元素 disabled=”disabled”的元素
:checked——–》选取所有选中元素 单选框，复选框
:select——–》 选取select标签的选中元素

注册事件方法：
在注册方法的时候，事件名称去掉 on
eg:
onclick—>click
onblur—->blur

<script  src="jquery-1.7.2.js"></script><script>      $(document).ready(function(){        //注册事件方法，在加载时就注册        $("#p1").click(function(){          alert("这是一个注册的方法");        });    });   

方法:
after(); 在后 插入指定内容或者节点
before(); 在前 插入指定内容或者节点
append(); 在后面接上 插入指定内容或者节点
prepead(); 在前面 插入指定内容或者节点
empty(); 只将内容和事件删除 元素还在
remove(); 将整个节点删除

each() ； 循环遍历：
eg:

 $("#id").click(function(){            $("p").each(function(o){                //this 代表当前的迭代的对象               alert($(this).html());                  })   

parent() ; 所选元素的直接父元素
parents(); 所选元素的所有祖先元素
children(); 所选元素的直接儿子
siblings(); 所选元素的所有兄弟姐妹节点
next(); 所选元素的下一个弟弟元素
nextAll(); 所选元素的所有弟弟节点
prev(); 所选元素的上一个哥哥节点
prevAll(); 所选元素的所有哥哥节点
hover(function(){},function(){}) 鼠标移入/移除
eg:

           $("#p3").hover(function(){             $("#i3").remove();              $("#p3").before("<img src='3.png' id='i3'>");           },function(){             $("#i3").remove();         });

动画：

隐藏和显示：
hidden(time) 消失不见
show(time) 显示
toggle(time) 消失的出来，显示的消失
fadeIn(time) 只改变透明度
fadeOut(time) 只改变透明度
slideDown(time) 只改变高度
slideUp(time) 只改变高度

自定义动画 不允许改变颜色

${“#id”.animate({params},speed,响应)} ；

$(function () { $("#panel").click(function (){      $(this).animate({ left: "500px" }, 3000);     }); });

向servlet跳转
.post(网址，参数，相应)；.get(网址，参数，相应)；

 $.post("Baidu",{'name':$val,'size':'3'},function(data){                      alert(data)                 });