目录

   --- jQuery HTML

   --- jQuery 遍历

   --- jQuery Ajax

 

jQuery HTML:

jQuery 捕获:三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        alert("Text: " + $("#test").text());
      });
      $("#btn2").click(function(){
        alert("HTML: " + $("#test").html());
      });
    });
    </script>
    </head>
    
    <body>
    <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button>
    </body>
    </html>
    实例代码 全
  • val() - 设置或返回表单字段的值
    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <head>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        alert("值为: " + $("#test").val());
      });
    });
    </script>
    </head>
    
    <body>
    <p>名称: <input type="text" id="test" value="教程"></p>
    <button>显示值</button>
    </body>
    </html>
    实例代码 全
  • attr() - 用于获取属性值
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        alert($("#runoob").attr("href"));
      });
    });
    </script>
    </head>
    
    <body>
    <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
    <button>显示 href 属性的值</button>
    </body>
    </html>
    示例代码 全

jQuery 设置内容和属性:

  • 设置内容:通过 text()、html() 以及 val() 方法来设置内容,实例:
    $("#btn1").click(function(){
        $("#test1").text("Hello world!");
    });
    $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
    });
    $("#btn3").click(function(){
        $("#test3").val("RUNOOB");
    });
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test1").text("Hello world!");
      });
      $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
      });
      $("#btn3").click(function(){
        $("#test3").val("RUNOOB");
      });
    });
    </script>
    </head>
    
    <body>
    <p id="test1">这是一个段落。</p>
    <p id="test2">这是另外一个段落。</p>
    <p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
    </body>
    </html>
    示例代码 全
  • 上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test1").text(function(i,origText){
          return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
        });
      });
    
      $("#btn2").click(function(){
        $("#test2").html(function(i,origText){
          return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
        });
      });
    
    });
    </script>
    </head>
    
    <body>
    <p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
    <p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
    <button id="btn1">显示 新/旧 文本</button>
    <button id="btn2">显示 新/旧 HTML</button>
    </body>
    </html>
    示例代码 全
  • attr() 方法也用于设置/改变属性值,也允许您同时设置多个属性。
    $("button").click(function(){
        $("#runoob").attr({
            "href" : "http://www.runoob.com/jquery",
            "title" : "jQuery 教程"
        });
    });
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#runoob").attr({
          "href" : "http://www.runoob.com/jquery",
          "title" : "jQuery 教程"
        });
        // 通过修改的 title 值来修改链接名称
        title =  $("#runoob").attr('title');
        $("#runoob").html(title);
      });
    });
    </script>
    </head>
    
    <body>
    <p><a href="http://www.runoob.com" id="runoob">菜鸟教程</a></p>
    <button>修改 href 和 title</button>
    <p>点击按钮修改后,可以查看 href 和 title 是否变化。</p>
    </body>
    </html>
    示例代码 全

    attr() 回调函数类似上一条内容。

jQuery 添加元素:

  • append() - 在被选元素的结尾插入内容,实例:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("p").append(" <b>追加文本</b>。");
      });
    
      $("#btn2").click(function(){
        $("ol").append("<li>追加列表项</li>");
      });
    });
    </script>
    </head>
    
    <body>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ol>
    <button id="btn1">添加文本</button>
    <button id="btn2">添加列表项</button>
    </body>
    </html>
    实例代码 全
  • prepend() - 在被选元素的开头插入内容,用法类似 append()。
    说明:append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。
    /*在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):*/
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    function appendText(){
        var txt1="<p>文本1。</p>";              // 使用 HTML 标签创建文本
        var txt2=$("<p></p>").text("文本2。");  // 使用 jQuery 创建文本
        var txt3=document.createElement("p");
        txt3.innerHTML="文本3。";               // 使用 DOM 创建文本 text with DOM
        $("body").append(txt1,txt2,txt3);        // 追加新元素
    }
    </script>
    </head>
    <body>
    
    <p>这是一个段落。</p>
    <button onclick="appendText()">追加文本</button>
    
    </body>
    </html>
    示例代码 全
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("img").before("<b>之前</b>");
      });
    
      $("#btn2").click(function(){
        $("img").after("<i>之后</i>");
      });
    });
    </script>
    </head>
    
    <body>
    <img src="/images/logo.png" >
    <br><br>
    <button id="btn1">之前插入</button>
    <button id="btn2">之后插入</button>
    </body>
    </html>
    after 和 before 示例代码

    追加若干新元素方法 类似 append 和 prepend,不再赘述。

jQuery 删除元素: 通过 jQuery,可以很容易的删除已有的 HTML 元素、内容。

  • emove() - 删除被选元素(及其子元素)
  • empty() - 从被选元素中删除子元素,两者用法相同,下面以 empty() 为例:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").empty();
      });
    });
    </script>
    </head>
    <body>
    
    <div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
    
    这是 div 中的一些文本。
    <p>这是在 div 中的一个段落。</p>
    <p>这是在 div 中的另外一个段落。</p>
    
    </div>
    <br>
    <button>清空div元素</button>
    
    </body>
    </html>
    empty 实例代码
  • remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").remove(".italic");
      });
    });
    </script>
    </head>
    <body>
    
    <p>这是一个段落。</p>
    <p class="italic"><i>这是另外一个段落。</i></p>
    <p class="italic"><i>这是另外一个段落。</i></p>
    <button>移除所有  class="italic" 的 p 元素。</button>
    
    </body>
    </html>
    过滤被删除的元素

jQuery 获取并设置 CSS类:

  • addClass() - 向被选元素添加一个或多个类
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("h1,h2,p").addClass("blue");
        $("div").addClass("important");
      });
    });
    </script>
    <style type="text/css">
    .important
    {
        font-weight:bold;
        font-size:xx-large;
    }
    .blue
    {
        color:blue;
    }
    </style>
    </head>
    <body>
    
    <h1>标题 1</h1>
    <h2>标题 2</h2>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <div>这是一些重要的文本!</div>
    <br>
    <button>为元素添加 class</button>
    
    </body>
    </html>
    选取多个元素一起添加类
    添加多个类
  • removeClass() - 从被选元素删除一个或多个类
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("h1,h2,p").removeClass("blue");
      });
    });
    </script>
    <style type="text/css">
    .important
    {
        font-weight:bold;
        font-size:xx-large;
    }
    .blue
    {
        color:blue;
    }
    </style>
    </head>
    <body>
    
    <h1 class="blue">标题 1</h1>
    <h2 class="blue">标题 2</h2>
    <p class="blue">这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <br>
    <button>从元素中移除 class</button>
    </body>
    </html>
    多个元素移除 class
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("h1,h2,p").toggleClass("blue");
      });
    });
    </script>
    <style type="text/css">
    .blue
    {
    color:blue;
    }
    </style>
    </head>
    <body>
    
    <h1 class="blue">标题 1</h1>
    <h2 class="blue">标题 2</h2>
    <p class="blue">这是一个段落。</p>
    <p>这是另外一个段落。</p>
    <br>
    <button>切换 class</button>
    </body>
    </html>
    切换类
  • css() - 设置或返回样式属性:

(1)返回首个匹配元素的 background-color 值

$("p").css("background-color");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("背景颜色 = " + $("p").css("background-color"));
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
</html>
实例代码 全

(2)如需设置多个 CSS 属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>
实例代码 全

 

jQuery 尺寸:

      

    jQuery 提供多个处理尺寸的重要方法:

  • width():设置或返回元素的宽度(不包括内边距、边框或外边距)
  • height():设置或返回元素的高度(不包括内边距、边框或外边距)
  • innerWidth():返回元素的宽度(包括内边距)
  • innerHeight():返回元素的高度(包括内边距)
  • outerWidth():返回元素的宽度(包括内边距和边框)
  • outerHeight():返回元素的高度(包括内边距和边框)

用法都类似,下面以 width 和 height 为例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 的宽度是: " + $("#div1").width() + "</br>";
    txt+="div 的高度是: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>

</body>
</html>
返回指定的
元素的宽度和高度

jQuery 遍历:用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。如下例:一个家族树:

       

     通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。

 遍历祖先,即向上遍历 DOM 树:

  • parent():返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    .ancestors *
    { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
    </style>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("span").parent().css({"color":"red","border":"2px solid red"});
    });
    </script>
    </head>
    <body>
    
    <div class="ancestors">
      <div style="width:500px;">div (曾祖父元素)
        <ul>ul (祖父元素)  
          <li>li (父元素)
            <span>span</span>
          </li>
        </ul>   
      </div>
    
      <div style="width:500px;">div (祖父元素)   
        <p>p (父元素)
            <span>span</span>
          </p> 
      </div>
    </div>
    
    </body>
    </html>
    查看 直接父元素
  • parents():返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>),用法同上。也可以使用可选参数来过滤对祖先元素的搜索
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .ancestors *
    { 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
    }
    </style>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("span").parents("ul").css({"color":"red","border":"2px solid red"});
    });
    </script>
    </head>
    
    <body class="ancestors">body (great-great-grandparent)
      <div style="width:500px;">div (great-grandparent)
        <ul>ul (grandparent)  
          <li>li (direct parent)
            <span>span</span>
          </li>
        </ul>   
      </div>
    </body>
    
    </html>
    筛选祖先
  • parentsUntil():返回介于两个给定元素之间的所有祖先元素
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    .ancestors *
    { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
    </style>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
    });
    </script>
    </head>
    
    <body class="ancestors"> body (曾曾祖父元素)
      <div style="width:500px;">div (曾祖父元素)
        <ul>ul (祖父元素)  
          <li>li (父元素)
            <span>span</span>
          </li>
        </ul>   
      </div>
    </body>
    
    </html>
    介于两者之间[)

遍历后代,即向下遍历 DOM 树的 jQuery 方法:

  • children():返回被选元素的所有直接子元素,该方法只会向下一级对 DOM 树进行遍历。用法同parent()。也可以使用可选参数来过滤对子元素的搜索:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p class="1">p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p class="2">p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>
过滤子元素
  • find():返回被选元素的后代元素,一路向下直到最后一个后代。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>
返回后代的所有
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>
返回所有后代

遍历同胞,即在 DOM 树进行水平遍历:

  • siblings():返回被选元素的所有同胞元素,也可以使用可选参数来过滤对同胞元素的搜索。返回属于 <h2> 的同胞元素的所有 <p> 元素
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    .siblings *
    { 
        display: block;
        border: 2px solid lightgrey;
        color: lightgrey;
        padding: 5px;
        margin: 15px;
    }
    </style>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
    });
    </script>
    </head>
    <body class="siblings">
    
    <div>div (父元素)
      <p>p</p>
      <span>span</span>
      <h2>h2</h2>
      <h3>h3</h3>
      <p>p</p>
    </div>
    
    </body>
    </html>
    过滤同胞
  • next():返回被选元素的下一个同胞元素
  • nextAll():返回被选元素的所有跟随的同胞元
  • nextUntil():返回介于两个给定参数之间的所有跟随的同胞元素
  • prev() & prevAll() & prevUntil():工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

遍历过滤:缩小搜索元素的范围:

  • 三个最基本的过滤方法
  • 它们允许您基于其在一组元素中的位置来选择一个特定的元素。
    • first():返回被选元素的首个元素
      $(document).ready(function(){
        $("div p").first();
      });
    • last():返回被选元素的最后一个元素,用法同上。
    • eq():返回被选元素中带有指定索引号的元素,索引号从 0 开始。
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
      </script>
      <script>
      $(document).ready(function(){
        $("p").eq(1).css("background-color","yellow");
      });
      </script>
      </head>
      <body>
      
      <h1>欢迎访问我的主页</h1>
      <p>菜鸟教程 (index 0).</p>
      <p>http://www.runoob.com (index 1)。</p>
      <p>google (index 2).</p>
      <p>http://www.google.com (index 3)。</p>
      
      </body>
      </html>
      eq 实例代码
  • 其他过滤方法:比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
    • ilter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
      </script>
      <script>
      $(document).ready(function(){
         $("p").filter(".url").css("background-color","yellow");
      });
      </script>
      </head>
      <body>
      
      <h1>欢迎访问我的主页</h1>
      <p>菜鸟教程 (index 0).</p>
      <p class="url">http://www.runoob.com (index 1)。</p>
      <p>google (index 2).</p>
      <p class="url">http://www.google.com (index 3)。</p>
      
      </body>
      </html>
      filter 实例
    • not() 方法返回不匹配标准的所有元素,与 filter() 相反。

 

jQuery AJAX:AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

jQuery load() 方法:是简单但强大的 AJAX 方法,它从服务器加载数据,并把返回的数据放入被选元素中。语法:

$(selector).load(URL,data,callback);
/*必需的 URL 参数规定您希望加载的 URL。
   可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
   可选的 callback 参数是 load() 方法完成后所执行的函数名称。*/

这是示例文件("demo_test.txt")的内容:

<h2>jQuery AJAX 是个非常棒的功能!</h2>
<p id="p1">这是段落的一些文本。</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("/try/ajax/demo_test.txt");
    });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>

</body>
</html>
加载全部文件
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt #p1");   // 加载文件中的 #p1 的内容
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>

</body>
</html>
加载指定内容

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>

</body>
</html>
实例 Callback

jQuery get() 和 post() 方法:用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求:GET vs. POST (两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST)
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
/*GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
  POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。*/
  • $.get() 方法通过 HTTP GET 请求从服务器上请求数据,语法:
    $.get(URL,callback);
    /*必需的 URL 参数: 规定您希望请求的 URL。
       可选的 callback 参数: 是请求成功后所执行的回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。*/

    实例:demo_test.php 文件代码:

    <?php 
        echo '这是个从PHP文件中读取的数据。'; 
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $.get("/try/ajax/demo_test.php",function(data,status){
                alert("数据: " + data + "\n状态: " + status);
            });
        });
    });
    </script>
    </head>
    <body>
    
    <button>发送一个 HTTP GET 请求并获取返回结果</button>
    
    </body>
    </html>
    get 请求
  • $.post() 方法通过 HTTP POST 请求从服务器上请求数据。语法:
    $.post(URL,data,callback);
    /*必需的 URL 参数规定您希望请求的 URL。
       可选的 data 参数规定连同请求发送的数据。
       可选的 callback 参数是请求成功后所执行的。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。*/

    实例:demo_test.php 文件代码:

    <?php
    $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
    $url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
    echo '网站名: ' . $name;
    echo "\n";
    echo 'URL 地址: ' .$url;
    ?>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $.post("/try/ajax/demo_test_post.php",{
                name:"菜鸟教程",
                url:"http://www.runoob.com"
            },
            function(data,status){
                alert("数据: \n" + data + "\n状态: " + status);
            });
        });
    });
    </script>
    </head>
    <body>
    
    <button>发送一个 HTTP POST 请求页面并获取返回内容</button>
    
    </body>
    </html>
    post 实例

     

jQuery - noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。

当然,您仍然可以通过全名替代简写的方式来使用 jQuery:

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

 

  继续继续~

posted on 2017-05-01 00:45  云雀sunshine  阅读(414)  评论(0编辑  收藏  举报