JavaWeb（十）JQuery - 教程

一、JQuery简介

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

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

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

JQuery：Javascript+Query

使用前期，JQuery侧重高效找到页面上各种节点。

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

二、选择器

1.基本选择器

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

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

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

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

$(‘s1,s2,s3’)联合选择器，可以同时匹配多种选择器，返回所有匹配的元素

 2.层次选择器

2.1.$(s1 ,s2) 后代选择器

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

$(“div span”)

2.2.$(s1, s2) 父子选择器

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

2.3$(s1 + s2) 兄弟选择器

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

2.4$(s1 ~ s2) 兄弟选择器

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

3.基本筛选，过滤

eq = equal gt=great than lt=less than

ge: great equal >=

4.内容过滤选择器

4.1contains(内容)

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

$(“div:contains(beijing)”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

4.2empty

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

$(“div:empty”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

<div></div>

<div><img /></div>

<div>      </div>

4.3has(选择器)

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

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

<div>hello</div>

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

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

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

4.4parent

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

$(“div:parent”)

<div>linken love beijing</div>

<div>jack love shanghai</div>

<div></div>

<div><img /></div>

<div>      </div>

5、表单域选中选择器（看具体代码）

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

三、属性操作

type=”text”class=”apple orange”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); //获取

① 样式获取

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

dom方式只能获得行内样式

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

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

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

五、JQuery对象与dom对象的区别与相互转换

jQ基础篇--jQuery对象与dom对象的区别与相互转换 - 风雨过后见彩虹 - SegmentFault 思否

function f1() {
//得到checkbox中所有勾选的checkbox
//var array = $('input[type="checkbox"]:checked');
var array = $('input[name="hobby"]:checked');
console.log(array);
// '22,33,44'
var str = '';
for (var i = 0; i < array.length; i++) {
console.log(array[i]);//JS DOM对象
console.log(array.eq(i).val());//JQuery对象（通过 jQuery 的 .eq()和 .val()获取值)
str += array[i].value + ',';
}
//22,33,44,
console.log(str);
//22,33,44
console.log(str.substring(0, str.length - 1));
}
$.each($('.hby'), function () {
//this  dom对象转换为JQuery对象: $(dom对象)
//$(this).prop('checked', !this.checked);
$(this).prop('checked', !$(this).prop('checked'));
});

六、JS和JQuery运行对比

jQuery 中 attr() 和 prop() 办法的区别

具有 true 和 false 两个值的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()