2015-10-06 认识jQuery1

                                                                                                jQuery

一.认识jQuery

1. 是一个优秀的js框架 -----

Write less,do more

2.页面加载之后-----

$(function(){

});

$(document).ready(function() {});==>等价于  $(function () {});

例：jQuery

$(function(){
$("#btn").click(function(){
   alert("hello world");
});
});

注：1.页面加载完之后2.找到对象3.执行你要的事件4.声明一个事件（function）5.完成事件里面的内容。

js写法：document.getElementById("btn").onclick=function(){alert("aaa");}

dom对象--->jQuery对象   $(document.getElementById("btn")).click(function(){

alert("hello world");

});

jQuery对象--->dom对象   $("#btn")[0].onclick=function(){

alert("aaa");

};

二. 选择器

     1.id选择器

实例：  $("#showDiv")  相当于=>document.getElementById("showDiv");

     2.类选择器
                  $(".showclass");----$("div").css("color","#f00");

     特殊：1.$("p:odd")                     //选择所有在偶数行的<p>标记。

                  $("p:even")                    //选择所有在奇数行的<p>标记。

               2.$("td:nth-child(1)")      //表示所有表格行的第一个单元格，即第一列。

               3.$("li>a")                        //表示<li>标记的所有子元素<a>,不包括孙标记。.    

               4.$("a[href$=pdf]")         //选择所有href属性是以“pdf”结尾的超链接。

      3.去掉前后空格

var sInput=$.trim($("#txt").val());

alert(sInput);

去掉中间

var sInput=$("#txt").val();

var aInput=sInput.split('');   //获取为字符数组

for( var i=0;i<aInput.length;i++)

{     if(aInput[i]==" ")

{

sInput=sInput.replace(" ","");

}

}

alert(sInput);

三.使用选择器

1. 属性选择器

1.$(" #d1 a[title]").css("color","#f00")             //id=d1标签下设置（title属性）的超链接

2.$("a[href='www']").css("color","#f00")         //href=www 的a标签（单引号）

3.$("a[href^=http://]").addClass("myClass")  //所有以http://开头的a标签

4.$("a[href$=html]").addClass("myClass")     //所有以html结尾的a标签

5.$("a[href*=isaac]").addClass("myClass")     // 所有href中含有isaac的a标签。

     2.包含选择器

$("li:has(a)")       //表示含有超链接<a>的所有li标记

3.位置选择器

1.$("p:first”)                     //整个页面里面的第一个p标签

2.$("p:last")                       //整个页面里面的最后一个p标签

3.$("p:first-child")             //选择所有的p标记，且这些p标记是其父标记的第一个标记

4.$("p:last-child")             //选择所有的p标记，且这些p标记是其父标记的最后一个标记

5.$("p:nth-child(odd)")    // 选择所有的p标记，且这些p标记是其父标记的奇数行

6.$("p: odd")                    //选择整个页面奇数行的p标记

7.$("p:eq(4)")                   // 选择第五个p标记   ----或 $("p").eq(2).css("color","red")可外可里

8.$("p:gt(n)")                   // 第n个（从0开始，不包括n本身）p标记之后的所有p标记  ----只能写里边

9.$("#d1 p").eq(2).siblings().css("color","red")       //找到其兄弟标签，设置字体红色（除eq(2)之外）

10.$("#d1 p").eq(2).prev()                                     // 找到eq(2)前面一个

11.$("p").eq(2).next()                                             //找到后面一个

12.alert($("#d1 p").eq(2).prent().attr("id"));          //获取父亲的id值