html08
1.JQuery
是一个js框架
一堆的 js文件 -形成 》 包 - 形成> 工具 - 形成》 -》库 -》 框架
是一个轻量级的库
封装了js原生里js css dom ,操作,为这些操作提供了一致的,简洁的API
兼容了css3,HTML5,兼容各个版本的浏览器
优点:
* 使用户更方便的处理HTML Events 实现动画效果
方便的为用户提供ajax交互
*解耦 (使内容和表现分离)
ps:从jQuery2.X(2版本往上) 不再支持IE6,7,8
2.使用jQuery (原生用属性,jQuery用方法)
1)引入JQ文件
2)使用JQ方法
ps:jquery操作document找到的是数组
* jquery的方法会返回一个jQuery对象
$().().()...
jQuery对象本身就是一个数组,返回jQuery对象就是返回1个数组
* 原生对象 -> jQuery对象
$(原生对象) -返回转换后的jQuery对象
* jQuery对象 -> 原生对象
jQuery对象[下标] -返回转换后的原生对象
3.JQuery常用方法
1)$("选择器") -》 用来查找节点,对document数操作
常用选择器
-基本选择器
$("标签名") : 根据标签名找元素,TagName
$(".class") : 根据类名找元素
$("#id") : 根据id找原素
$("#id,.class类名"): 根据一组选择器查找元素
-层次选择器 (选择器1 空格 选择器2)后代选择器
$(选择器1 选择器2) 后代选择器,找所有后代
$(选择器1>选择器2) 下一级选择器,儿子选择器
$(选择器1+选择器2) 找第1个弟弟,
$(选择器1~选择器2) 找所有弟弟,
-过滤选择器
:first -第一个
:last -最后一个
:equals(index) eq(0) 等同于:first 下标等同于index元素 找第二个,第三个等等 下标从0开始
:nth-child(index) -index从1开始,下标从1开始
:not(选择器) 排除符合这个选择器 把符合该选择器的元素排外
:gt(index) -下标大于index的元素
:lt(index) -下标小于index的元素
:even -偶数行 (下标从0开始)
:odd -奇数行 从下标0开始
:contains(text) -找出包含指定text文本的元素
:empty - 找到不包含任何内容的元素 双标记中间没内容
:hidden -找到所有隐藏的元素 (display:none 有hidden属性)
:visible -找到所有可见的元素
-属性定位选择器
[属性名] -找到所有具有该属性的元素
[属性名=值] -找出所有匹配属性名=值的节点
如: [class="read"]
[属性名!=值] -找出所有属性名!=值的节点
如:[class!="read"]
-状态过滤选择器
:enabled -找到可用元素
:disabled -找到不可用元素
:checked -找到选中的复选框(按钮)
:selected -找到选中的option节点
-表单选择器
:text
:password
:radio
:checkbox
:submit
:reset
:button
:file -文件上传框
:hidden -找隐藏框
2)读写节点 (无参方法是获取,有参方法是修改)
读写节点的HTML内容
jQuery的写法
- obj.html() : 读取HTML的内容 ele.innerTHML
- obj.html("值") : 修改HTML的内容 ele.innerTHML=值
读写节点的text文本
- obj.text() obj.text("值")
读写节点的value值
- obj.val() : 获取value值
- obj.val("值") : 修改value值
读写节点的属性值
-obj.attr(属性名) :获取属性内容
-obj.attr(属性名,值) : 修改属性名对应的值
3)增删 节点
-创建节点 $("<input>");
-父节点.append() -作为父节点的最后1个子节点
-父节点.prepend() -作为父节点的第1个子节点
-兄弟.after() -作为兄弟的下1个节点
-兄弟.before() -作为兄弟的上1个哥哥节点
删除
-obj.remove() -删除某个对象节点
如:$("li").remove() 删除所有li节点
-obj.empty() -清空节点
如:$("li").empty() 清空li中间的内容
4)操作样式
-obj.css(属性,值);
obj.css({属性:值});