jquery 基础掌握

一、什么是jquery？

 1.jquery是javaScript的一个框架产品。
 2.简化js编码，提高开发效率。
 3.屏蔽了js的浏览器差异。

二、使用jquery开发

 1.搭建jquery开发环境:将 jquery-1.8.3.js引入到项目；

  在需要使用jquery开发的页面（jsp/html）引入jquery-1.8.3.js
 在head引入：

DOM对象 与 jquery中对象的转换：$(DOM对象)；
js对象不能 操作jquery对象的方法；

三、jquery的选择器【重点】

** 1.基本选择器【必须掌握】**
1.1 id选择器
语法：KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id的属性值”) 1.2…(“.class属性的值”)
1.3 标签选择器
语法：$(“标签名”)注意:修改html标签样式：jq对象.css(“css的样式属性名”,”属性值”)\ast \ast 2.层次选择器\ast \ast 2.1后代选择器语法：$(seltorA seltorB) –获取seltorA 下与 seltorB匹配的标签对象。
2.2 直接子代选择器 [掌握]
语法：$(seltorA>seltorB)//只拿到儿子2.3直接兄弟选择器【掌握】语法：$(seltorA+seltorB) //拿到直接后续的兄弟
2.4 所有兄弟选择器
语法：$(seltorA~seltorB) // 拿到后续所有兄弟

3.简单过滤选择器
3.1 :first–拿到数组中第一个标签对象
3.2 :last—拿到数组中最后一个标签对象
3.3 :eq(idx)—拿到对应idx下标的标签对象【掌握】
注意：idx下标从0开始。
3.4 :gt(idx) –拿到对应大于idx下标的标签对象
3.5 :lt(idx) –拿到小于idx下标的标签对象
3.6 :even –所有偶数下标的标签对象
3.7 :odd –所有奇数下标的标签对象。
4.内容过滤选择器
1）:empty –所有标签体内容为空的对象。【掌握】
2）:parent—所有标签体有内容。
3）:contains(text) //包含指定内容(text)的对象。【掌握】
5.属性选择器【重点】
1)$(“selor[属性名=属性值]”)–拿到指定属性等于某个属性值的元素对象。【掌握】2）$(“selor[属性名]”) –拿到所有含有属性的对象。
6.用于单选按钮和 复选框
:checked –拿到选中的按钮
注意:元素与 :checked之间没有空格
7.用于获取被选中的下拉列表的option
:selected
注意:元素与 :selected之间有空格

四、jquery中的对象数组遍历

1.for 循环
1.1 objArr.size();//获取对象数组长度
2.objArr.each(function(){})

五、使用jquery操作页面结构

1.添加：
1.1）创建一个标签元素:
var spa = $(“内容”)
1.2）在父标签下添加子标签
$supObj.append(子元素对象)

2. 删除
1）empty()—只是单纯的清空子元素 对本身没有任何影响。
2）remove()—将自身以及子元素全部移除
3.修改
1）对于input标签的value属性值。
获取：$(obj).val()修改value属性值：$(obj).val(“新内容”)
2）获取标签体内容
$obj.text()obj.innerText –只是拿到文本的内容
$obj.text(内容)obj.innerText=新值// 修改标签体内容。
$obj.html() obj.innerHTML// 拿到标签体所有内容包括 html标签元素
$obj.html(内容) 修改标签体内容
3）修改元素的样式
$obj.css(“样式属性名”,”属性值”).css(“样式名”,”属性值”)
$obj.css(“样式属性名”：”属性值”, “样式属性名”:属性值)

4）给标签添加或移除class属性
addClass() –添加
removeClass() –移除

六、操作标签属性的方法【掌握】

1）$obj.attr(属性名)//获取对应属性值$obj.prop(属性名)
2）$obj.attr(属性名,属性值) //修改属性值 ￥obj.prop(属性名，属性值)
注意：attr是1.6版本之前的，prop是1.6版本之后，开发建议使用prop