JavaScript学习七 jquery学习1

在jquery中，$是个什么呢：

jQuery = window.jQuery = window.$ = function( selector, context )

通过以上这句话，其实jquery就是window的一个属性

在jquery中获得界面元素的方法（css选择器）：

标签选择器$("elementName") or id选择器$("#ID") or 类选择器$(".clsName")or 通用选择器$("*")

当然了，还有层级选择器：

$("#id,.class,type")   还有一种形式  $("#id .class type")   一个加逗号，一个没有 是有很大差别的

具体讲讲：不带，  是当组件有包含关系的时候使用的（一个div包裹住了另一个div的时候，当然了，如果你对各个层都进行了捕获，那就都会触发事件）  
选择器还有一些其他的用法，当然通过原先的方法只要定义class或者id都可以获取到：

（1）获取一个div下的某个元素 使用 >：

$(".idd > .dd").text("我们都是div中的儿子，我们的名字叫做p还记得教程中的$(\"父亲 > 儿子 > ...\")这种关系吗？就是以这种方式选择的我$(\"div > p\")");

（2）获取紧跟的某个元素 使用 +：

$("div + p").text("我是紧跟着div的p既然紧跟着，当然就得使用“+”紧密的连在一起嘛。以这种方式选择的我$(\"div + p\")");

（3）获取跟在后面的所有元素   ~

$("div ~ p").text("我们是div的跟随者，我们的名字叫做p要以这种方式选择的我$(\"div ~ p\")");

除此之外，还有一些方法可以使用 例子：

（1）一个表格获得其第一行和最后一行

html代码：

 <table class="zuoye_1" border="1" width="400">             <tr>行                 <td></td>列                 <td></td>             </tr>             <tr>                 <td></td>                 <td></td>             </tr>             <tr>                 <td></td>                 <td></td>                 <td></td>             </tr>             <tr>                 <td></td>                 <td></td>                 <td></td>             </tr>             <tr>                 <td></td>                 <td></td>                 <td></td>             </tr>      </table>

js代码：

$(    function(){$("#a").click(    function(){$(".zuoye_1 tr:first").children().text("我是第一行");} )$("#b").click(    function(){$(".zuoye_1 tr:last").children().text("我是最后一行");} )      })

选择偶数行：

$(".zuoye_1 tr:odd").children().text("我是偶数行");//odd 取奇数

选择奇数行：

$(".zuoye_1 tr:even").children().text("我是奇数行");//even 取偶数

指定具体的第几行：

$(".zuoye_1 tr:eq(1)").children().text("我是第二行");

指定一个范围前x行：

 $(".zuoye_1 tr:lt(4)").children().text("我是前5行");

选择最后的几行：

 $(".zuoye_1 tr:gt(4)").children().text("我是后5行");

更改h标签的内容：

$(".h :header").text("我是h标题标签");

对标签内的文本进行匹配：

$("div:contains(KwooShung)").text("跟KwooShung学习jQuery");    div表示的是选择器（可以更改）

对所有标签内不包含文本的进行匹配：

$("div:empty").text("我不包含任何元素或文本");

匹配不为空的：

$("div:parent").text("我包含元素或文本");

匹配包含指定组件的：

$("div:has(p)").text("我包含P元素");

匹配某种组件隐藏起来元素：

<pre name="code" class="html">$("ul:hidden").show(500);

与之相反，匹配所有可见的：

$("ul:visiable").show(500);

匹配所有input中包含id属性的标签  +的作用见上面：

$("input[id]").fadeIn(500);//500毫秒内渐显

匹配所有input标签中value=“xx”的元素：

$("input[value='KwooShung'] + img").fadeIn(500);

进行多个条件的组合匹配：

$("input[value!='KwooShung'][type!='radio'][type!='checkbox'] + img").fadeIn(500);

获得value属性以“xxx”开头的标签（在正则中：^表示开头，$表示结尾）：

$("input[value^='Kwoo'] + img").fadeIn(500);

如上所说的$:

$("input[value$='Kwoo'] + img").fadeIn(500);

获取属性中包含“xx”的标签：

$("input[value*='Kwoo'] + img").fadeIn(500);

在获得了界面上的元素之后，还可以进行相关的操作（列举几个）：

$("Element").size()$("Element").get()$("Element").index($("Element"))

取得元素后获取元素的数据：

str=$("#input").val();如果在val（）中加入内容，则为赋值操作：.val("xxxxx")

获取指定元素的第几个：

$("ul li:nth-child("+list[0]+")").css("background",list[1]);

取得第一个：

$("ul li:first-child").attr("class","R");

取得最后一个：

$("ul li:last-child").attr("class","R");

还有获得唯一的：

$("ul:only-child").css("background",black);

jquery的扩展：

$.extend({       max:function(num1,num2){return num1 > num2 ? num1:num2;},       min:function(num1,num2){return num1 < num2? num1:num2;}})

当要调用的时候：

<script lang="javascript">var a=$.max(10,20);alert(a);</script>

在编程中的例子：

$.fn.extend({         check:function()         {                 return this.each(function() { this.checked = true; });         }         uncheck:function()         {                 return this.each(function() { this.checked = false; });//this表示的是当前选中的对象         }})

此方法也是一种插件的实现方法，其中this表示是调用者当前所指dom对象，比如$("#abc").click(function(){this})这里的this指的就是#abc这个dom对象。each在上面已经讲解过了。在此插件方法extend中定义了两个方法分别是check和uncheck。

$("input[@type=checkbox]").check()表示将input标签的type属性设置为选中，其中中括号中的内容表示如果input的type属性是checkbox的话，再设置为选中。