JQuery选择器（一）

下载的官网：http://www.jQuery.com

实现的效果：

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo.aspx.cs" Inherits="T12_选择器1_Demo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>

    <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("tr:odd", "#mydiv").css("background", "yellow");

            $("tr:has(td)", "#mydiv").mouseover(function() {
                if ($(this).find(":checkbox")[0].checked) return false;
                this.BgColor = $(this).css("background");
                $(this).css("background", "red");
            })
            .mouseout(function() {
                if ($(this).find(":checkbox")[0].checked) return false;
                $(this).css("background", this.BgColor ? this.BgColor : "white");
            })

            $(":checkbox", "#mydiv").click(function() {
                var oTr = $(this).parents("tr");
                if (this.checked) {

                    this.tag = oTr.css("background");
                    $(this).parents("tr").css("background", "blue");
                } else {
                    //alert(this.tag);
                    //if (this.tag) oTr.css("background", this.tag);
                }
            })

        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="title">
    <h2>1、实现隔行变色</h2>
    <h2>2、实现光棒效果</h2>
    <h2>2、实现复选框选中变色</h2>
    </div>
    <div id="mydiv">
    
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" 
            CellPadding="4" DataKeyNames="Id" DataSourceID="SqlDataSource1" 
            EmptyDataText="没有可显示的数据记录。" EnableViewState="False">
            <RowStyle BackColor="White" ForeColor="#330099" />
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <input ID="Checkbox1" type="checkbox" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" 
                    SortExpression="Id" />
                <asp:BoundField DataField="Au_Id" HeaderText="Au_Id" SortExpression="Au_Id" />
                <asp:BoundField DataField="Au_Lname" HeaderText="Au_Lname" 
                    SortExpression="Au_Lname" />
                <asp:BoundField DataField="Au_Fname" HeaderText="Au_Fname" 
                    SortExpression="Au_Fname" />
                <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
                <asp:BoundField DataField="Addr" HeaderText="Addr" SortExpression="Addr" />
                <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
                <asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
                <asp:BoundField DataField="Zip" HeaderText="Zip" SortExpression="Zip" />
            </Columns>
            <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
            <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:JQuerySimpleDBConnectionString1 %>" 
            DeleteCommand="DELETE FROM [Author] WHERE [Id] = @Id" 
            InsertCommand="INSERT INTO [Author] ([Au_Id], [Au_Lname], [Au_Fname], [Phone], [Addr], [City], [State], [Zip]) VALUES (@Au_Id, @Au_Lname, @Au_Fname, @Phone, @Addr, @City, @State, @Zip)" 
            ProviderName="<%$ ConnectionStrings:JQuerySimpleDBConnectionString1.ProviderName %>" 
            SelectCommand="SELECT [Id], [Au_Id], [Au_Lname], [Au_Fname], [Phone], [Addr], [City], [State], [Zip] FROM [Author]" 
            UpdateCommand="UPDATE [Author] SET [Au_Id] = @Au_Id, [Au_Lname] = @Au_Lname, [Au_Fname] = @Au_Fname, [Phone] = @Phone, [Addr] = @Addr, [City] = @City, [State] = @State, [Zip] = @Zip WHERE [Id] = @Id">
            <DeleteParameters>
                <asp:Parameter Name="Id" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="Au_Id" Type="String" />
                <asp:Parameter Name="Au_Lname" Type="String" />
                <asp:Parameter Name="Au_Fname" Type="String" />
                <asp:Parameter Name="Phone" Type="String" />
                <asp:Parameter Name="Addr" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="State" Type="String" />
                <asp:Parameter Name="Zip" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="Au_Id" Type="String" />
                <asp:Parameter Name="Au_Lname" Type="String" />
                <asp:Parameter Name="Au_Fname" Type="String" />
                <asp:Parameter Name="Phone" Type="String" />
                <asp:Parameter Name="Addr" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="State" Type="String" />
                <asp:Parameter Name="Zip" Type="String" />
                <asp:Parameter Name="Id" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
    
    </div>
    </form>
</body>
</html>

 

二：利用jQuery进行文档处理

     一：外部插入

1.after(content)
在每个匹配的元素之后插入内容。
返回值
jQuery
参数
content (String, Element, jQuery) : 插入到每个目标后的内容
示例
在所有段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>
在所有段落之后插入一个DOM元素。
HTML 代码:
<b id="foo">Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("#foo")[0] );
结果:
<p>I would like to say: </p><b id="foo">Hello</b>
在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<b>Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("b") );
结果:
<p>I would like to say: </p><b>Hello</b>
 
2.before(content)
在每个匹配的元素之前插入内容。
返回值
jQuery
参数
content (String, Element, jQuery) : 插入到每个目标前的内容
示例
在所有段落之前插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
结果:
[ <b>Hello</b><p>I would like to say: </p> ]
 
      3：在所有段落之前插入一个元素。
HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
jQuery 代码:
$("p").before( $("#foo")[0] );
结果:
<b id="foo">Hello</b><p>I would like to say: </p>
在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").before( $("b") );
结果:
<b>Hello</b><p>I would like to say: </p>
 
 
4：insertAfter(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
返回值
jQuery
参数
content (String) : 用于匹配元素的jQuery表达式
示例
在所有段落之后插入一个元素。与 $("#foo").after("p")相同
HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter($("#foo“));
结果:
<div id="foo">Hello</div><p>I would like to say: </p>
 
   5：insertBefore(content)
把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。
返回值
jQuery
参数
content (String) : 用于匹配元素的jQuery表达式
示例
在所有段落之前插入一个元素。与 $("#foo").before("p")相同。
HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore($("#foo“));
结果:
<p>I would like to say: </p><div id="foo">Hello</div>
 
 

二: 内部插入

     1.append(content)
向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
返回值
jQuery
参数
content (String, Element, jQuery) : 要追加到目标中的内容
示例
向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]
 
    2.appendTo(content)
把所有匹配的元素追加到另一个、指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
返回值
jQuery
参数
content (String) :用于被追加的内容
示例
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").appendTo($("#foo“));
结果:
<div id="foo"><p>I would like to say: </p></div>
 
    3.prepend(content)
向每个匹配的元素内部前置内容。
这是向所有匹配元素内部的开始处插入内容的最佳方式。
返回值
jQuery
参数
content (String, Element, jQuery) : 要插入到目标元素内部前端的内容
示例
向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <p><b>Hello</b>I would like to say: </p> ]
将一个DOM元素前置入所有段落
HTML 代码:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jQuery 代码:
$("p").prepend( $(".foo")[0] );
结果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").prepend( $("b") );
结果:
<p><b>Hello</b>I would like to say: </p>
 
 
       4.prependTo(content)
把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
返回值
jQuery
参数
content (String) :用于匹配元素的jQuery表达式
示例
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo($("#foo“));
结果:
<div id="foo"><p>I would like to say: </p></div>
 
三: 包裹
   1.wrap(html)
把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。 这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。
 
当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加。
返回值
jQuery
参数
html (String) : HTML标记代码字符串，用于动态生成元素并包裹目标元素
示例
把所有的段落用一个新创建的div包裹起来
HTML 代码:
<p>Test Paragraph.</p>
jQuery 代码:
$("p").wrap("<div class='wrap'></div>");
结果:
<div class="wrap"><p>Test Paragraph.</p></div>
 
   2.wrap(elem)
把所有匹配的元素用其他元素的结构化标记包装起来。
返回值
jQuery
参数
elem (Element) : 用于包装目标元素的DOM元素
示例
用ID是"content"的div将每一个段落包裹起来
HTML 代码:
<p>Test Paragraph.</p><div id="content"></div>
jQuery 代码:
$("p").wrap(document.getElementById('content'));
结果:
<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>
 
     3.wrapAll(html)
将所有匹配的元素用单个元素包裹起来
这于 '.wrap()' 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。 这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。
 
这个函数的原理是检查提供的第一个元素并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。
返回值
jQuery
参数
html (String) : TML标记代码字符串，用于动态生成元素并包装目标元素
示例
用一个生成的div将所有段落包裹起来
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapAll("<div></div>");
结果:
<div><p>Hello</p><p>cruel</p><p>World</p></div>
 
 
   4.wrapAll(elem)
将所有匹配的元素用单个元素包裹起来
这于 '.wrap()' 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。
返回值
jQuery
参数
elem (Element) : 用于包装目标元素的DOM元素
示例
用一个生成的div将所有段落包裹起来
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapAll(document.createElement("div"));
结果:
<div><p>Hello</p><p>cruel</p><p>World</p></div>
 
    5.wrapInner(html)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包装元素。
返回值
jQuery
参数
html (String) : HTML标记代码字符串，用于动态生成元素并包装目标元素
示例
把所有段落内的每个子内容加粗
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapInner("<b></b>");
结果:
<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
 
    6.wrapInner(elem)
将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来
返回值
jQuery
参数
elem (Element) : 用于包装目标元素的DOM元素
示例
把所有段落内的每个子内容加粗
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").wrapInner(document.createElement("b"));
结果:
<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
 
四: 替换replaceWith(content)
将所有匹配的元素替换成指定的HTML或DOM元素。
返回值
jQuery
参数
content (String, Element, jQuery) : 用于将匹配元素替换掉的内容
示例
把所有的段落标记替换成加粗的标记。
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").replaceWith("<b>Paragraph. </b>");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
 
replaceAll(selector)
用匹配的元素替换掉所有 selector匹配到的元素。
返回值
jQuery
参数
selector (选择器) : 用于查找所要被替换的元素
示例
把所有的段落标记替换成加粗标记
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph. </b>").replaceAll("p");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
 
 
五：: 删除
empty()
删除匹配的元素集合中所有的子节点。
返回值
jQuery
示例
把所有段落的子元素（包括文本节点）删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>
remove([expr])
从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。
返回值
jQuery
参数
expr (String) : (可选) 用于筛选元素的jQuery表达式
示例
从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are
 
 
从DOM中把带有hello类的段落删除
HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove(".hello");
结果:
how are <p>you?</p>
 
 
六：复制   clone()
克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
返回值
jQuery
示例
克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>
 
clone(true)
元素以及其所有的事件处理并且选中这些克隆的副本
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
返回值
jQuery
参数
true (Boolean) : 设置为true以便复制元素的所有事件处理
示例
创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
HTML 代码:
<button>Clone Me!</button>
jQuery 代码:
$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});
 
 
七：jQuery过滤
eq(index)
获取第N个元素
这个元素的位置是从0算起。
返回值
jQuery
参数
index (Integer) :元素在jQuery对象中的索引
示例
获取匹配的第二个元素
HTML 代码:
<p> This is just a test.</p> <p> So is this</p>
jQuery 代码:
$("p").eq(1)
结果:
[ <p> So is this</p> ]
 
 
hasClass(class)
检查当前的元素是否含有某个特定的类，如果有，则返回true。
这其实就是 is("." + class)。
返回值
Boolean
参数
class (String) : 用于匹配的类名
示例
给包含有某个类的元素进行一个动画。
HTML 代码:
<div class="protected"></div><div></div>
jQuery 代码:
$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});
 
is(expr)
用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合，或者表达式无效，都返回'false'. 'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。
返回值
Boolean
参数
expr (String) :用于筛选的表达式
示例
由于input元素的父元素是一个表单元素，所以返回true。
HTML 代码:
<form><input type="checkbox" /></form>
jQuery 代码:
$("input[type='checkbox']").parent().is("form")
结果:
true
 
八：jQuery查找
find(expr)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
返回值
jQuery
参数
expr (String) :用于查找的表达式
示例
从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
HTML 代码:
<p><span>Hello</span>, how are you?</p>
jQuery 代码:
$("p").find("span")
结果:
[ <span>Hello</span> ]
 
 
next([expr])
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。
返回值
jQuery
参数
expr (String) : (可选) 用于筛选的表达式
示例
找到每个段落的后面紧邻的同辈元素。
HTML 代码:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
jQuery 代码:
$("p").next()
结果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
 
 
找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
jQuery 代码:
$("p").next(".selected")
结果:
[ <p class="selected">Hello Again</p> ]
 
 

九：jQuery串联

andSelf()
加入先前所选的加入当前元素中
对于筛选或查找后的元素，要加入先前所选元素时将会很有用。
返回值
jQuery
示例
选取所有div以及内部的p，并加上border类
HTML 代码:
<div><p>First Paragraph</p><p>Second Paragraph</p></div>
jQuery 代码:
$("div").find("p").andSelf().addClass("border");
结果:
<div class="border"><p class="border">First Paragraph</p><p class="border">Second Paragraph</p></div>
 
 
 
 
 
 
 
 
posted @ 2016-09-15 09:41  石shi  阅读(246)  评论(0)  编辑  收藏  举报