jQuery
jQuery 是javascript的一个类库，类似python的模块。
它一共分3个版本：1.x;2.x;3.x
- 转换
jQuery对象[0]=>DOM对象=>$(dom)
查找元素
jQuery查找对象：
选择器直接找到某个或者某类标签。
1. id $('#id')
2. class $('.class')
3. tag $('tag')
4. 组合 $('.class tag')...类似css
5. 层级 $('.class tag') 找到子子孙孙 $('.class>tag')只找到>后面的层
6. base
:first 第一个
:last 最后一个
:eq(index) 第index个
7. 属性
$('[属性]') 具有属性的所有标签
$('[属性=值]') 属性等于指定值的所有便签
$(':type') input选择器找到指定type的所有标签
筛选元素
jQuery筛选对象:
选择器找到便签后进行筛选。
1. $('选择器').next() 找到便签的下一个
2. $('选择器').nextAll() 找到便签所有的下一个
3. $('选择器').nextUntil() 找到便签直到某个标签
4. $('选择器').prev()
5. $('选择器').prevAll()
6. $('选择器').prevUntil()
上一个，同next相反
7. $('选择器').parent() 找到当前选择器标签的父级标签
8. $('选择器').parents() 找到当前选择器标签的所有父级标签
9. $('选择器').parentsUntil() 一直往父级上去找 直到某个标签 不填写默认找到<html>标签
10. $('选择器').siblings() 所有同级的其他标签
11. $('选择器').children() 子标签
12. $('选择器').find() 查找带某个属性或标签
13.其他常用
$('选择器').eq() 对比之前的:eq 适用于直接在字符串的情况 eq()适用于不方便直接用在字符串里的情况
$('选择器').first();$('选择器').last() 类似上面
$('选择器').hasClass() 找到带有指定Class属性的对象
文本操作
jQuery文本操作:
选择器找到标签后进行文本操作。
1. $('选择器').text() 获取文本内容 在text()里面填写字符串会替换文本
2. $('选择器').html() 获取html内容 在html()里填写html会替换HTML内容
3. $('选择器').val() 获取value值 在val()里填写内容会替换value值
样式操作
jQuery样式操作:
选择器找到标签后进行样式操作。
1. $('选择器').addClass() （*为class设置样式*）添加指定class
2. $('选择器').removeClass() 找到了就移除样式
3. $(selector).toggleClass(class,switch) 对设置或移除被选元素的一个或多个类进行切换。
属性操作
jQuery属性操作:
样式操作严格意义来说也属于属性操作。
1. $(..).attr('n') 自定义属性
$(..).attr('n','v') 自定义属性和值
$(..).removeAttr('n') 移除属性
2. $(..).prop('checked') 检查checkbox等选择选项是否选中
$(..).prop('checked', true) 设置选择选项为选中
以上专门用于chekbox、radio
补充：
css处理 $('选择器').css('样式名称', '样式值')
文档操作
jQuery文档操作：
选择器到找便签后进行文档操作。
1. $(..).append() 追加
2. $(..).prepend() 最前面插入
3. $(..).after() 在指定元素后插入
4. $(..).before() 在指定元素前插入
5. $(..).remove() 移除
6. $(..).empty() 清空不移除标签
7. $(..).clone() 克隆一份
位置操作
jQuery位置操作：
获取位置。
1. $(windows).scrollTop() 获取上下滚动条位置 括号里若填值变成设置位置
2. $(windows).scrollLeft([val]) 左右滚动条
3. $('..').setoff() 标签在html中的坐标 后面加.x or .y获取对应的x或y坐标
4. $('..').position() 指定标签相对父标签(relative)标签的坐标
5. 其他知识点
$('..').height() # 获取标签的高度 纯高度
$('..').innerHeight()
$('..').outerHeight()
$('..').outerHeight(true)
# 纯高度，边框，外边距，内边距
事件
jQuery事件：
回顾下DOM三种事件绑定方式。
jQuery：
$('.c1').click()
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
-------------------------------------------------------
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
delegate() 方法为指定的元素（属于被选元素的子元素）
添加一个或多个事件处理程序，
并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素
（比如由脚本创建的新元素）。
-------------------------------------------------------
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
所有事件都是调用这两种方法。
jQuery扩展
- $.extend $.方法
- $.fn.extend $(..).方法
(function(){
var status = 1;
// 封装变量
})(jQuery)
网友评论