1. jquery在日常的开发中，是较为常用的一种技术，所以今天也不算较为系统详细的学习吧。
2. 主要是对jquery当中，许多常用的方法进行学习和总结吧
3. jquery当中主要的特点就是：选择器，js当中呢，主要就是dom树结构。
4. 下面就不多说了，开始我们jquery当中方法的学习。
1. ①：触发函数的两种方式：
2. <!-- jquery函数 -->
<script type="text/javascript">
/* 函数触发方式一 */
$(function(){
//$(type="[name='method1']").click(function(){
$("button").click(function(){
$(this).hide();
});
});
/* 函数触发方式二 */
function onClick(){
$("p").slideToggle();
}
</script>
</head>
<body>
<button name="method1">函数触发方式一:点击按钮一隐藏</button>
<input type="button" οnclick="onClick();" value="函数触发方式二:点击文字隐藏"/>
<p>i am show content!</p>
</body>3.
1. ②：选择器的使用：
2. 选择器一共分为4中：
3. 基本选择器（id选择器，类选择器，标签选择器，多路选择器）
4. 层次选择器（后代选择器，儿子选择器，后续所有兄弟选择器，第一个兄弟选择器）
5. 表单选择器 过滤选择器（简单过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器）
6.
7. 1）基本选择器
8. <!-- jquery函数 -->
9. <script type="text/javascript">
10. /* 基本选择器 */
11. /* id选择器 */
12. /* $(function(){
13. $("#btn").click(function(){
14. $("p").slideToggle();
15. })
16. }) */
17.
18. /* 类选择器 */
19. /* $(function(){
20. $(".btn").click(function(){
21. $("p").hide();
22. })
23. }) */
24.
25. /* 标签选择器 */
26. /* $(function(){
27. $("input").click(function(){
28. $("p").slideToggle();
29. })
30. }) */
31.
32. /* 多路选择器 */
33. /* $(function(){
34. $("p ,.btn").click(function(){
35. alert("ni dian ji l wo !");
36. });
37. }) */
38. </script>
39. </head>
40. <body>
41. <div id="controller">
42. <input id="btn" class="btn" type="button" value="点击文字隐藏"/>
43. <p>i am show content!</p>
44. </div>
45. </body>
46.
47. 2）层次选择器
48. <!-- jquery函数 -->
<script type="text/javascript">
/* 后代选择器 (后代)*/
/* $(function(){
$("#controller input,p").click(function(){
alert("你使用的是后代选择器");
})
}) */49.
/* 儿子选择器 （兄弟）*/
/* $(function(){
$("#controller > p,button").click(function(){
alert("你使用的是儿子选择器");
})
}) */50.
/* 后续所有兄弟选择器 */
$(function(){
$("#controller ~ div").click(function(){
alert("你选择的是后续所有兄弟选择器!");
})
})51.
/* 下一个兄弟选择器 */
$(function(){
$("#controller + div").click(function(){
alert("你选择的是下一个兄弟选择器!");
})
})
</script>
</head>
<body>
<div>
<p>i am first p!</p>
</div>
<div id="controller">
<div>
<input id="btn" class="btn" type="button" value="点击文字隐藏"/>
<input id="btn2" class="btn2" type="button" value="点击文字隐藏2"/>
<p>i am son and son!</p>
</div>
<p>i am son!</p>
<button>i am son button</button>
</div>
<div id="controller2">
<input id="btn3" class="btn3" type="button" value="点击文字隐藏3"/>
<input id="btn4" class="btn4" type="button" value="点击文字隐藏4"/>
<p>i am show content2!</p>
</div>
<div id="controller3">
<button>i am button3!</button>
</div>
<button>i am brother button</button>
<p>i am brother p!</p>
</body>52.
53. 3）过滤选择器
54. <!-- jquery函数 -->
<script type="text/javascript">
/* 简单过滤器 */
$(function(){
/* :first的使用 */
//$("ul li:first").css("backgroundColor","red");
/* :last的使用 */
//$("ul li:last").css("backgroundColor","red");
/* :even的使用 */
//$("ul li:even").css("backgroundColor","red");
/* :odd的使用 */
//$("ul li:odd").css("backgroundColor","red");
/* :eq(0)的使用 */
//$("ul li:eq(0)").css("backgroundColor","green");
/* :gt(0)的使用 (获取大于指定索引的元素)*/
//$("ul li:gt(0)").css("backgroundColor","green");
/* :lt(0)的使用 (获取大于指定索引的元素)*/
//$("ul li:lt(0)").css("backgroundColor","blue");
})
</script>
</head>
<body>
<h1>基本选择器</h1>
<ul>
<li class="def">item0</li>
<li class="def">item1</li>
<li class="not">item2</li>
<li class="def">item3</li>
</ul>
<span id="sp">span</span>
</body>55. 4）内容过滤选择器
56. <!-- jquery函数 -->
<script type="text/javascript">
/* 简单过滤器 */
/* :contains(text) (显示包含给定文本的元素) */
$(function(){
$("div:contains('E')").css("backgroundColor","red");
});
/* :empty (所有不包含子元素或者文本为null的元素) */
$(function(){
$("div:empty").css("backgroundColor","blue");
});
/* :has(selector) (含有选择器所匹配的元素的元素)*/
$(function(){
$("div:has(span)").css("backgroundColor","green");
});
/* :parent (所有含有子元素或者文本的元素)*/
$(function(){
$("div:parent").css("backgroundColor","purple")
});
</script>
</head>
<body>
<div>ABCD</div>
<div><span>qq</span></div>
<div>EPaH</div>
<div></div>
</body>57. 5）可见性过滤选择器
58. <!-- jquery函数 -->
<script type="text/javascript">
/* 可见性过滤器 */
/* :hidden (获取所有不可见元素或者type为hidden的元素)*/
$(function(){
/* 使隐藏的元素显示出来 */
/* $("span:hidden").show(); */
/* 给显示的元素添加背景 */
/* $("div:visible").css("backgroundColor","red"); */
/* 使隐藏的元素显示并且添加背景颜色 */
$("span:hidden").show().css("backgroundColor","yellow");
})
</script>
</head>
<body>
<span style="display:none">Hidden</span>
<div>visible</div>
</body>59. 6）属性过滤选择器
60. <!-- jquery函数 -->
<script type="text/javascript">
/* 属性过滤选择器 */
$(function(){
/* [attribute] (获取包含给定属性的元素) */
//$("div[id]").hide(2000);
/* [attribute=value] (获取等于给定的属性是某个特定值的元素) */
//$("div[title='A']").hide(2000);
/* [attribute!=value] (获取不等于给定的属性是某个特定值的元素) */
//$("div[title!='A']").hide(2000);
/* [attribute^value] (获取给定的属性是以某些值开始的元素) */
//$("div[title^='A']").hide(2000);
/* [attribute$=value] (获取给定的元素是以某些值结尾的元素) */
//$("div[title$='A']").hide(2000);
/* [attribute*=value] (获取给定的属性是以包含某些值的元素) */
//$("div[title*='C']").hide(2000);
/* [selector1][selector2]... (获取满足多个条件的符合属性的元素) */
$("div[id$='B'][title*='B']").hide(2000);(两个筛选器之间不可以有空格)
})
</script>
</head>
<body>
<div id="divID">ID</div>
<div id="divB" title="A">title a</div>
<div id="divAB" title="AB">id</div>
<div title="ABC">title abc</div>
</body>61. 7）子元素过滤选择器
62. <!-- jquery函数 -->
<script type="text/javascript">
/* 子元素过滤选择器 */
$(function(){
/* :nth-child(2) (获取每个父元素下的特定位置元素，索引从1开始) */
//$("li:nth-child(2)").hide(1000);
/* :first-child (获取每个父元素下的第一个元素) */
$("li:first-child").css("backgroundColor","red");
/* :last-child (获取每个父元素下的最后一个子元素) */
//$("li:last-child").hide(2000);
/* :only-child (获取每个父元素下的仅有的一个子元素) */
//$("li:only-child").hide(2000);
})
</script>
</head>
<body>
<ul>
<li>1-0</li>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
<ul>
<li>2-0</li>
<li>2-1</li>
<li>2-2</li>
<li>2-3</li>
</ul>
</body>63. 8）表单对象属性过滤选择器
64. <!-- jquery函数 -->
<style type="text/css">
.GetFocus{
background-color:red;border:solid 1px yellow
}
</style>
<script type="text/javascript">
/* 表单对象属性过滤选择器 */
$(function(){
/* :enabled (获取表单中所有属性为可用的元素) */
$("#form1 input:enabled").addClass("GetFocus")
/* :disabled (获取表单中所有属性为不可用的元素) */
//$("#form1 input:disabled").hide(2000);
/* :checked (获取表单中所有被选中的元素) */
//$("#form1 input:checked").hide(2000);
/* :selected (获取表单中所有被选中option的元素) */
//$("#span2").html("选中的选项是:"+$("select option:selected").text())
})
</script>
</head>
<body>
<form id="form1" style="width:241px;">
<div id="divA">
<input type="text" value="可用文本框"/>
<input type="text" disabled="disabled" value="不可用文本框"/>
</div>
<div id="divB">
<input type="checkbox" checked="checked" value="1"/>选中
<input type="checkbox" value="0"/>未选中
</div>
<div id="divC">
<select mutiple="mutiple">
<option value="0">item0</option>
<option value="1" selected="selected">item1</option>
<option value="2">item2</option>
<option value="3" selected="selected">item3</option>
</select>
<span id="span2"></span>
</div>
</form>
</body>65. 9）表单选择器
66. 下午搬家帮忙去
1. ②：鼠标点击的四种方式：/隐藏元素第一种方式：
$(document).ready( function (){
$( "#clickme" ).click( function (){
alert( "Hello World click" );
});
第二种方式：
$( '#clickmebind' ).bind( "click" , function (){
alert( "Hello World bind" );
});
第三种方式：
$( '#clickmeon' ).on( 'click' , function (){
alert( "Hello World on" );
});
});
注意：第三种方式只适用于jquery 1.7以上的版本
标签：jquery,function,hide,元素,update,keep,click,div,选择器 From： https://blog.51cto.com/u_16021118/7470721