jQuery介绍及基本操作

jQuery:  

其是对javascript封装的一个框架包,简化对javascript的操作

javascript代码：获得页面节点对象、ajax元素节点对象实现、事件操作、事件对象

jquery代码：无需考虑浏览器兼容问题、代码足够少

jQuery：javascript+query

 使用前期，jquery侧重快速找到页面上各种节点。

 后期jquery丰富了事件操作、ajax操作、动画效果、DOM操作等等。

选择器

1. 基本选择器

$(‘#id属性值’)  ----------->document.getElementById()

$(‘tag标签名称’)----------->document.getElementsByTagName();

$(‘.class属性值’)   class属性值选择器

$(‘*’)     通配符选择器

$(‘s1,s2,s3’)联合选择器

---

2. 层次选择器

2.1 $(s1  s2) [后代选择器]

后代选择器：在s1内部获得全部的s2节点(不考虑层次)

$(“div  span”)
<div>
<span></span>
<p>
<span></span>
</p>
</div>
<span></span>

2.2 $(s1 > s2) [父子]

直接子元素选择器:在s1内部获得s2的子元素节点(直接孩子，孙子不算)

$(“div > span”)

<div>

<span></span>

<p>

<span></span>

</p>

<span></span>

</div>

<span></span>

2.3 $(s1 + s2) [兄弟]

直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

$(“div + span”)

<div>

<span></span>

<p>

<span></span>

</p>

<span></span>

</div>

<span></span>

<span></span>

<div></div>

<span></span>

2.4 $(s1 ~ s2) [兄弟]

后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点

$(“div ~ span”)

<div>

<span></span>

<p>

<span></span>

</p>

<span></span>

</div>

<span></span>

<span></span>

<p></p>

<span></span>

---

3、基本筛选

 

eq = equal   gt=great than   lt=less than

---

4. 内容过滤选择器

4.1 :contains(内容)

包含内容选择器，获得节点内部必须通过标签包含指定的内容

$(“div:contains(beijing)”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

4.2 :empty

获得空元素(内部没有任何元素/文本(空) )节点对象

$(“div:empty”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

<div></div>

<div><img /></div>

<div>      </div>

4.3 :has(选择器)

内部包含指定元素的选择器

  $(“div:has(#apple)”)

<div>hello</div>

<div><p></p></div>

<div><span id=”apple”></span></div>

<div><span class=”apple”></span></div>

4.4 :parent

寻找的节点必须作为父元素节点存在(必须是别人的父亲)

$(“div:parent”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

<div></div>

<div><img /></div>

<div>      </div>

---

5、 表单域选中选择器

复选框、单选按钮、下拉列表

---

属性操作

<input  type=”text”  class=”apple”  id=”username”  name=”username” value=”tom”

       address=”beijing”

/>

JS:

itnode.属性名称

itnode.属性名称= 值;

itnode.getAttribute(属性名称);

itnode.setAttribute(属性名称，值);

自定义的属性例如address，只能通过getAttribute方式。

jquery方式操作属性(attribute)：property

$().attr(属性名称);               //获得属性信息值

$().attr(属性名称，值);        //设置属性的信息

$().removeAttr(属性名称);   //删除属性

---

css样式操作

$().css(name，value);        //设置

$().css(name);             //获取

3.1 css()样式操作特点：

① 样式获取，jquery可以获取 行内、内部、外部的样式。

dom方式只能获得行内样式

② 复合属性样式需要拆分为"具体样式"才可以操作

例如：    background 需要拆分为  background-color background-image 等进行操作

       border： border-left-style  border-left-width  border-left-color 等