20170714

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。




异步JavaScript 及XML（英文：Asynchronous JavaScript And XML 缩写Ajax）




基础使用：


  function  a(){
    $("#a").hide();
};
function test(){
    $(".test").hide();
};
function p(){
$("p").hide();
}


<h2 class="test">test</h2>
<p class="test">test,p</p>
<p>pppppppppp</p>
<p id="a">aaaaaaaaaaaa</p>
<button οnclick="a()">id的方式</button><br/>
<button οnclick="test()">class方式</button><br/>
<button οnclick="p()">p标签的方式</button><br/>
<br/>




二级使用：




function aa(){
$("a.aa").hide();
}
function aaa(){
$("from h4").hide();
}
function aaaa(){
$("from>input").hide();
}






<from>
<a class="aa">aaaaaaa</a>
<h4 class="bb">bbbbbbbbbbbbbbb</h4>
<input type="text" class="pwd" name="pwd"/><br/>
<button οnclick="aa()">用.的方式</button><br/>
<button οnclick="aaa()">用空格的方式</button><br/>
<button οnclick="aaaa()">用>的方式</button><br/>
</from>






$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素




以，隔开的选择器  找的是每个选择器组成的数组
以空格隔开的选择器 找的是第一个下面第二个选择器的子子孙孙
以大于隔开的选择器  找的是第一个选择器下第二个选择器的儿子
以+号隔开的两个选择器 找的是第一个选择器下面找对应的第二个下面的第一个  不一定只有一个
以~号链接的两个选择器  找的是第一个下面后面第二选择器的所有兄弟












$("p").remove();


从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。


ctrl  k   下搜 

ctrl shift k  上搜

三种div的应用：

<input type="button" value="div1" οnclick="testA()"/><br/>
  <input type="button" value="div2" οnclick="testB()"/><br/>
  <input type="button" value="div3" οnclick="testC()"/><br/>

function testA(){
var divArr = document.getElementsByTagName("div");
for(var i=0;i<divArr.length;i++){
alert(divArr[i].innerHTML);
}
}

function testB(){
$("div").each(function(){
alert($(this).text());
});
}

function testC(){
var divArr = $("div");
$.each(divArr, function(i, div){
 alert( "第" + ++i + "个元素: " + $(div).html());
});
}

多个选中：

<input type="button" value=".myClass" οnclick="testD()"/><br/>
  <input type="button" value="#a1,div,span,p.myClass" οnclick="testE()"/><br/>

function testD(){
var classArr = $(".myClass");
$.each(classArr, function(i, div){
alert( "第" + ++i + "个元素: " + $(div).html());
});
}

function testE(){
var classArr = $("#a1,div,span,p.myClass");
$.each(classArr, function(i, obj){
alert( "第" + ++i + "个元素: " + $(obj).html());
});
}

子类查找：

  <input type="button" value="form input" οnclick="testF()"/><br/>
  <input type="button" value="form > input" οnclick="testG()"/><br/>
  <input type="button" value="label~input" οnclick="testH()"/><br/>
  <input type="button" value="label + input" οnclick="testI()"/><br/>

function testF(){
var classArr = $("form input");
$.each(classArr, function(i, obj){
alert( "第" + ++i + "个元素: " + $(obj).val());
});
}

function testG(){
var classArr = $("form > input");
$.each(classArr, function(i, obj){
alert( "第" + ++i + "个元素: " + $(obj).val());
});
}

function testI(){
var classArr = $("label + input");
$.each(classArr, function(i, obj){
alert( "第" + ++i + "个元素: " + $(obj).val());
});
}
function testH(){
var classArr = $("label~input");
$.each(classArr, function(i, obj){
alert( "第" + ++i + "个元素: " + $(obj).val());
});
}

remeve:

function testJ(){
$("p").remove();
}

   <input type="button" value="remove" οnclick="testJ()"/><br/>

页面：：

 <form>
 <label>Name:</label>
 <input name="name" />
 <fieldset>
     <label>Newsletter:</label>
     <input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<br/>
<br/>
<p>Hello</p>
<a>how are</a> 
<p>you?</p>