JQuery 简单入门

标签：

1、选择器

1、Jquery选择器的各种用法

$(this)     当前元素
$("p")     所有<p>元素
$("input")     所有input元素
$(".intro")     所有 class=“intro” 的元素
$("p.intro")     所有 class="intro" 的<p>元素
$("#intro")     id="intro" 的第一个元素
$("ul > li") ul下的所有li节点
$("ul li:first")     每个 <ul> 的第一个 <li> 元素
$("[href$=‘.jpg‘]")    所有带有以 ".jpg" 结尾的 href 属性的属性
$("div#intro .head")    id="intro" 的 <div> 元素中的所有 class="head" 的元素
$(li[a:contains(‘Register‘)]")     内容包含Register的<a>元素
$("input[@name=bar]")     name是bar的<input>元素
$("input[@type=radio][@checked]")    type是radio的<input>元素
$(“li”).not(“ul”)     li下没有包含ul节点的节点元素
$("span[@id]")     包含id属性的<span>元素
$("[@id=span1]")     id为span1的节点元素

2、常用事件

2、Jquery事件器的介绍

$(selector).click()	 被选元素的点击事件
$(selector).dblclick()	 被选元素的双击事件
$(selector).focus()	 被选元素的获得焦点事件
$(selector).mouseover()	 被选元素的鼠标悬停事件
$(selector).css();	 被选元素的CSS事件
$(selector). hide();	 被选元素的隐藏事件
$(selector). show(‘slow‘);	 被选元素的显示事件

5、文本选择

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

实例

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

4、select选自

比如<select id="touid"></select> 

$("#touid  option:selected").text("张步金");//text设置

$("#touid  option:selected").text();//取text值

$("#touid  option:selected").val();//取text值

比如<select class="selector"></select>

1、设置value为pxx的项选中

     $(".selector").val("pxx");

2、设置text为pxx的项选中

　 $("#touid  option:selected").text("张步金");

    $(".selector").find("option[text=‘pxx‘]").attr("selected",true);

    这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

    $(".selector").val();

4、获取当前选中项的text

    $(".selector").find("option:selected").text();

　 jQuery("#select1  option:selected").text();

    这里用到了冒号，掌握它的用法并举一反三也会让代码变得简洁。 

很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

如：$(".selector1").change(function(){

     // 先清空第二个

      $(".selector2").empty();

     // 实际的应用中，这里的option一般都是用循环生成多个了

      var option = $("<option>").val(1).text("pxx");

      $(".selector2").append(option);

});

JQuery 简单入门

标签：

原文地址：http://www.cnblogs.com/chenmfly/p/4634923.html