这里参考了http://hemin.cn/jq/index.html 写的各种实例 都很详细
这个都是语法 没什么可以理解的 死记硬背就好 粘代码了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.focused {
background: #abcdef;
}
</style>
<script src='../JS/jquery-1.4.1.js'></script>
<script>
$(function()
{
/* http://hemin.cn/jq/index.html */
/*--------------------------------- 基本查询 -------------------------*/
/* 查找所有ID是div1的标签 */
var ru = $("#div1");
/* 查找所有Class是Class1的标签 */
var ru =$(".class1");
/* 查标签 */
var ru =$("span");
/* 多标签查询 */
var ru = $('#div1，.class1,span');
/* -----------------------------------层级查询----------------------------------- */
/* 查找元素中 所有的匹配的 子元素字节 */
/* 第一种方法 */
var ru=ru.find('#div2');
var $sp=ru.find('span');
/* 第二种方法 */
var ru = $('#div1 label');
/* 查找 指定标签下 第一个满足的查询条件为label的标签 */
var ru = $('#div1 > label');
/* 查找 label 后面所有DIV标签 （不是父子关系） */
var ru = $('label + div');
/* 找到label同辈的Span标签 （不包含 子层级） */
var ru = $('label ~ span');
/* ----------------------------------关键字------------------------------------ */
/* first 查询第一个满足条件的标签 */
var ru =$('#span2:first');
var ru =$('span1:first');
/* last 获得最后一个元素 */
var ru=$('tr:last');
/* not(selector) 查出 input中没隐藏的input标签 */
var ru=$('input:not(:hidden)');
/* 查询ID为DIV3下 没有隐藏的input标签 */
var ru=$('#div3 input:not(:hidden)');
/*even 匹配所有索引值为偶数的元素，从 0 开始计数 */
var ru=$('tr:even');
/*odd 匹配所有索引值为奇数的元素，从 0 开始计数 */
var ru=$('tr:odd');
/*eq(index) 通过指定下标取元素 */
var ru=$('tr:eq(1)');
/* gt(index) 获得指定下标后面的所有元素 就本例子 0 后面是俩个tr 如果改成1 就得到一个tr */
var ru=$('tr:gt(0)');
/* lt(index) 获得指定下标前面的所有元素 就本例子 2 前面是俩个tr 如果改成1 就得到一个tr */
var ru=$('tr:lt(1)');
/* :header 只能给标题 增加样式元素 */
$(':header').css("width","130px");
$(':header').css("background","#EEE");
/* :animated 判断是否有动画效果 */
$('#run').click(function()
{
$('div:not(:animated)').animate({height:"+=20px"},1000);
});
/* :focus 只是知道光标触发什么的 暂时留着疑问 */
$( "#div3" ).delegate( "*", "focus blur", function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0);
})
/* 改变HTML背景颜色 */
$(':root').css("background-color","yellow");
/* -------------------------- 内容选择器 --------------------------------------*/
/* :empty 获得没有文本和没有子元素的标签*/
var $ru=$('div:empty');
/*:parent 获得有文本或有子元素的标签 */
var $ru = $('div:parent');
/* contains(text) 获得DiV下所有本文里带有word的标签 如果子标签也满足条件 父标签也会被返回 */
var $ru=$("div:contains('word')");
/* has(text) 和 contains 一样 不过has 查找的是DOM 标签 */
var $ru=$("div:has('span')");
console.log('Id :', $ru);
});
</script>
</script>
</head>
<body>
<button id="run">Run</button>
<h1 >额是一个标题</h1>
<h2>额是一个小标题</h2>
<div id="div1" style="width:400px;background: #EEEEEE" >
<label>Newsletter:</label>
<span id="span1"></span>
<div>
<p></p>
<label id="label1">8899</label>
<div> <span id="span2"></span></div>
<div>Hello word</div>
</div>
</div>
<div class="class1"></div>
<div class="class1"></div>
<div></div>
<div>Hello word</div>
<div id="div3">
<input id="apple3"/>
<input name="flower"/>
</div>
<div id="div2">
<input id="apple"/>
<input name="flower" />
</div>
<div>
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
</div>
</body>
</html>
