Jquery学习笔记一
 通过id $("#id")通过 class  $(".class") $("元素(如button ,div )")  $("*")  $("div *") $("div span label ") $("div>span") 只包括子集
 $("span+label") 紧邻的下一个元素  $("span ~lable")后面同一级所有的元素
 
 过滤器选择器:
 
 $("li:first/last/eq(1)")
 //它的功能是选择包含指定字符串的全部元素,它通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象。
 $("li:contains('此处是单引号的文本')")
 //:has(selector) 过滤选择器的功能是获取选择器中包含指定元素名称的全部元素
 $("li:has('p')")
 //:hidden过滤选择器的功能是获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素。
 $("input:hidden").val();
 
 //:visible过滤选择器获取的是全部可见的元素,也就是说,只要不将元素的display属性值设置为“none”,那么,都可以通过该选择器获取。
  $("li:visible").css("background-color","blue");
 
 
 
属性选择器:

    //[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。
    $("li[title='水果']").css("background-color", "green");
    $("li[title!='蔬菜']").css("background-color", "green");

    //使用[attribute*=value]属性选择器,获取属性值中包含某一指定内容的全部<li>元素,
    $("li[title*='果']").css("background-color", "green");

    ol有序,ul 无序号圆点

    //first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。

    $("li:last-child").css("background-color", "green");
    
表单选择器:
/*****************************************注意frmTest空格text****************
    //如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,
    不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和 <button>标记的表单元素,因此,它选择的表单元素是最广的。
    $("#frmTest:input").addClass("bg_red");


    //:text表单文本选择器可以获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛。
    $("#frmTest:text").addClass("bg_red");
    如果想要获取密码输入文本框,可以使用:password选择器,它的功能是获取表单中全部的密码输入文本框元素。
    $("#frmTest:password")?.addClass("bg_red");

    //表单中的单选按钮常用于多项数据中仅选择其一,而使用:radio选择器可轻松获取表单中的全部单选按钮元素。
    $("#frmTest:radio").attr("disabled","true");

    表单中的复选框常用于多项数据的选择,使用:checkbox选择器可以快速定位并获取表单中的复选框元素。
    $("#frmTest:checkbox").attr("checked","true");

    //通常情况下,一个表单中只允许有一个“type”属性值为“submit”的提交按钮,使用:submit选择器可获取表单中的这个提交按钮元素。
    $("#frmTest input:submit").attr("value","终于提交了")
    //当一个<input>元素的“type”属性值设为“image”时,该元素就是一个图像域,使用:image选择器可以快速获取该类全部元素
    $("#frmTest:image").addClass("bg_red");

    //表单中包含许多类型的按钮,而使用:button选择器能获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。
    $("#frmTest :button").addClass("bg_blue");
    
    //有一些元素存在选中状态,如复选框、单选按钮元素,选中时“checked”属性值为“checked”,调用:checked可以获取处于选中状态的全部元素。
     $("#frmTest :checked").attr("disabled", true);
    //与:checked选择器相比,:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。
      $("#frmTest :selected").html("选中内容为:" + $txtOpt);
      
      //attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。
      
       $("#a1").attr("href" ,"www.imooc.com" );
            var $url = $("#a1").attr("href");
            $("#tip").html($url);
    //使用html()和text()方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容。        
      var $content = "<b>唉,我又变胖了!</b>";
            $("#html").html($content);  (添加后显示的是哎,我有变胖了) 识别html样式
            $("#text").text($content); (添加后显示的是 <b>唉,我又变胖了!</b>)是什么就显示什么
    //通过addClass()和css()方法可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。
**************************注意格式{"":"","":""}    
     $("#content").css({"background-color":"red"});
    
     //使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能,前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名
    
             <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title>移除元素样式</title>
                <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
                <link href="style.css" rel="stylesheet" type="text/css" />
            </head>
            
            <body>
                <h3>removeClass()方法移除元素样式</h3>
                <div id="content" class="blue white">我脱下了一件蓝色外衣</div>
                
                <script type="text/javascript">
                //注意这里多个class 移除中间是空格
                    $("#content").removeClass("white blue");
                </script>
            </body>
        </html>
        
    //append(content)方法的功能是向指定的元素中追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数。
        <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title>append()方法追加内容</title>
                <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
                <link href="style.css" rel="stylesheet" type="text/css" />
            </head>
            
            <body>
                <h3>append()方法追加内容</h3>
                
                <script type="text/javascript">
                    function rethtml() {
                        var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
                        return $html;
                    }
                    $("body").append(rethtml());
                </script>
            </body>
        </html>
        
    //appendTo()方法也可以向指定的元素内插入内容,它的使用格式是:

$(content).appendTo(selector)

参数content表示需要插入的内容,参数selector表示被选的元素,即把content内容插入selector元素内,默认是在尾部。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>appendTo()方法插入内容</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>appendTo()方法插入内容</h3>
        <div>
            <span class="green">小乌龟</span>
        </div>
        
        <script type="text/javascript">
            var $html = "<span class='red'>小青蛙</span>"
            $($html).appendTo("div");
        </script>
    </body>
</html>

//使用before()和after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容,调用格式分别为:

$(selector).before(content)和$(selector).after(content)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>在元素前后插入内容</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>after()方法在元素之后插入内容</h3>
        <span class="green">我们交个朋友吧!</span>
        
        <script type="text/javascript">
            var $html = "<span class='red'>兄弟。</span>"
            $(".green").after($html);
        </script>
    </body>
</html>

//调用clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性,它的调用格式为:

$(selector).clone()
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用clone()方法复制元素</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>使用clone()方法复制元素</h3>
        <span class="red" title="hi">我是美猴王</span>
        
        <script type="text/javascript">
            $("body").append($(".red").clone());
        </script>
    </body>
</html>

//replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:

$(selector).replaceWith(content)和$(content).replaceAll(selector)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>使用替换元素和内容</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>使用replaceAll()方法替换元素内容</h3>
        <span class="green" title="hi">我是屌丝</span>
        
        <script type="text/javascript">
            var $html = "<span class='red' title='hi'>我是土豪</span>";
            $($html).replaceAll(".green");
        </script>
    </body>
</html>

//wrap()和wrapInner()方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:

$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)

 <h3>使用wrapInner()方法包裹元素</h3>
        <span class="red" title='hi'>我的身体有点歪</span>
        
        <script type="text/javascript">
            $(".red").wrapInner("<i></i>");
            
 $(".red").wrap("<div></div>");
 
 
 //使用each()方法可以遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号,它的调用格式为:

$(selector).each(function(index))

参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。
    $("span").each(function (index) {
                if (index == 1) {
                //*************这里this $(this)
                    $(this).attr("class", "red");
                }
            });
            
//remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()方法则只删除所选元素的子元素
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>删除元素</title>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>    
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <h3>使用empty()方法删除元素</h3>
        <span class="green">香蕉</span>
        <span class="green">桃子</span>
        <span class="green">葡萄</span>
        <span class="green">荔枝</span>
        
        <script type="text/javascript">
            $("span").empty()
        </script>
    </body>
</html>

阅读更多
想对作者说点什么? 我来说一句

JQuery学习笔记

2011年01月16日 316KB 下载

jQuery 语法学习笔记

2011年09月12日 18KB 下载

jquery 学习笔记

2009年08月31日 45KB 下载

Jquery学习笔记Jquery学习笔记

2009年10月29日 194KB 下载

JQUERY学习笔记.doc

2009年03月03日 26KB 下载

JQuery自学学习笔记

2011年08月11日 5KB 下载

jQuery验证框架学习笔记.pdf

2010年01月16日 332KB 下载

锋利的jquery(学习笔记)

2011年12月20日 43KB 下载

没有更多推荐了,返回首页

不良信息举报

Jquery学习笔记一

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭