一：选择器

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

二：事件

项目中使用：

<button type="button" class="btn btn-danger btn-lg col-lg-4 col-md-4 col-sm-4" onclick="confirmPre();">确认购买</button>

三：显示和隐藏

您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

四：获取

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

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.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>

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>

</html>

text(),html(),attr()进行修改

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

五：添加

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</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>

六：删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

下面的例子删除 class="italic" 的所有 <p> 元素：

$("p").remove(".italic");

七：遍历

祖先：

parent() 父节点。假如。ul的父节点是div
parents() 所有祖先假如。li的所有祖先，ul，div
parentsUntil() 父节点和最大的祖先中间的

后代：

children() 返回的是他的子儿子。
find() 被选元素的后代元素，一路向下直到最后一个后代。

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

找到的是p

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

$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});
});

*是所有的后代。

同胞：

siblings() 所有同胞元素假如h2的同胞，就是p,span,h3,p
next() 下一个同胞元素假如h2 就是h3
nextAll() 所有跟随的同胞元素假如h2 就是h3,p
nextUntil() 两个中间的。假如span 和p 就是h2,h3
prev() 前面的。
prevAll() 前面的所有
prevUntil()

过滤：

first()
```
$("div p").first();   div中第一个p
```

last()

$("div p").last();   div中最后一个p

eq()　　

$("p").eq(1);    下标第二个为p的。

常用jQuery