Jquery入门和九种选择器的基本使用

1.js和jquery对象的区别

var obj =document.getElementById("objId");这是js对象

var $obj=$("#objId") 这是jquery对象

其中，js对象的方法主要有:.innerHTML,value,removeChild(),appendChild()等等

对应的jquery对象方法则是:html()/text(),val(),remove(),append()

html()和text()的区别:

<div id="testId"><div>4</div></div>

obj=document.getElementById("testId")

$(obj).html()输出<div>4</div>

$(obj).text()输出4

2.js对象和jquery对象相互转换

var obj=5;

$obj=$(obj);转换成jquery对象

objElement=$obj[0];转回来

因为jquery的使用方式实际上是一种选择，选择回的结果是数组，所以转换成jquery对象实际上变成了长度为1的数组，下标0

九种选择器

一.基本

3.$("input")标签名选择,$("#id")通过id选择，$(".class")通过类样式选择

4.同时选择几种规则

$("#objId,.objClass,span") 选择到id是objId的,并上objClass的，并上span标签，是三种条件判定取或[or]

二.层次

5. 如何找到form标签内部的input标签数量,$("祖先 后代")

   $("form input").size()

   如何找到form下子级input数量,$("父母>孩子")

   $("form>input").sizee()

   如何找到form同级的第一个input的value值$("前面的+紧靠的第一个后面的")

   $(form+input).val()

   如何找到form同级的所有input标签元素个数,$("前面的+后面所有的")

   $(form~input).size()

三.基本

6.:first和:last

$("ul li:first")获取ul里面第一个li标签 

7.:odd和:even

$("ul li:odd") 获取到ul里序号为奇数的li标签，比如第1，3，5，7……个标签jquery对象

$("ul li:even")获取到ul里序号为偶数的li标签

8.:eq,:gt和:lt

$("ul li:eq(1)")获取到ul里第二个li

$("ul li:gt(0)")获取ul里除了第一行以后的li

$("ul li:lt(8)")获取ul里第九个以前的li

9.:head

如何给<h1><h2><3>标签添加红色背景颜色，黄色字体颜色

$(":head").css("background-color","red").("color","#FFFF00")

10.checkbox和表单属性checked和:not

如何选中被勾选的复选框/未选中的

$(":checkbox:checked")/$(":checkbox:not(:checked)")

四.内容

11.:contains

$("div:contains('John')") 选中包含John的div

12.:empty

$("p:empty")选中p标签里没有内容的

13.:has

<script type="text/css">.myClass{color:red;font-size:40px}</script>

$("div:has(p)").addClass("myClass");给拥有p标签div元素增加样式

14.:parent

$("p:parent") 选中p为父标签或者p里有文字的,即<p>2</p>与<p><div></div></p>都能匹配到,<p>  </p>也不会被匹到，但<p> </p>会被匹配

五.可见性

15.:visible和:hidden

$("table tr:visible") 匹配到table里tr的样式display不为none的tr

$("table tr:hiden")匹配到table里tr的样式display为none的tr  尽量避免是用:not，会效率低下。

六.属性

16.[attribute]

$("div[id]")选中含有id属性的div

17.[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[attr1][attr2]

$("div[id='userName']")选中含有id值为userName的div标签

$("div[id!='userName']")选中含有id值不为userName的div标签

$("div[id^='userName']")选中含有id值以userName开头的div标签

$("div[id^='userName']")选中含有id值以userName结尾的div标签

$("div[id^='userName']")选中含有id值包含userName的div标签

$("div[id][name='Lihua']")选中包含id属性，并且name属性值为Lihua的div标签

另:attr(key,value)方法为标签添加属性

$("div[id='userName']").attr("checked","checked");

18.each()

用Json语法创建一个一维数组，并遍历

var arrayList = ["张三","李四","王五"];

var $arrayList=$(arrayList);

$arrayList.each(fun(){

alert(this);

});

用Json语法创建一个对象数组，对象里包含name和salary两个属性，并遍历

var arrayList=[
{name:"LiHua",
salary:8000
},
{name:"ZhangSan",
salary:2200}             

              ];

var $arrayList=$(arrayList);

$arrayList.each(fun(){

alert(this.name+","+this.salary);

});

七.子元素

19.:first-child,:last-child,:nth-child(),:only-child

$("ul li:first-child")找到<每>个ul标签中第一个li子元素

$("ul li:nth-child(3)")找到每个ul标签中第三个子元素

$("ul li:nth-child(3n+2)")找到每个ul标签中第2,8,11,14个子元素

$("ul li:only-child")找到拥有唯一子元素的ul里的li

八.表单

20.:input,:text,:password,:radio,:checkbox,:submit,:images,:reset,:button,:file,:input:hiden

$(":input")找到所有input和textarea、button、select标签

$(":input:hiden")

九.表单对象属性

21.:enable,:disabled,:checked,:not(:checked),:selected,:not(:selected)

$("input:enable")

$("checkbox:not(:checked)")

$("select option:not(:selected)")