jquery学习笔记
<script src="jquery.js"></script>
<script>
jQuery
学习网址http://jquery.cuishifeng.cn/
模块 = 类库
对DOM、javaScript的类库
1、查找元素
Dom：
差不多10个左右
jQuery
px：
1.x 1.12 兼容性好
2.x
3.x
转换：
jquery对象[0] 转换为Dom对象
Dom对象 转换为jquery对象 $(Dom对象)
选择器
直接找到某个或者某类标签
1、id
$('#id')
2、class
<div class='c1'></div>
$('.c1')
3、标签
$('a') 找到所有的a标签
4.组合选择
$('a, .c1， div ，#12') 找到多个类型的标签
5、层级选择
$('#i1 a') 找i1下的所有a标签
$('#i1>a') 找i1下的a标签只找儿子层
6、基本
：first
：last
：eq（）
7、属性
$('[asd]') 具有asd属性的所有标签
$('[asd=‘a12’]') asd属性等于a12的标签
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")
$(':text')
实例：
多选，反选，全选
- 选择器
-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环： $('#tb:checkbox').xxxx
- $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
- var v = 条件 ? 真值 : 假值
筛选器:
$(this).next() 下一个
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')
<div>
<a>asdf</a>
<a>asdf</a>
<a >asdf</a>
<a>asdf</a>
<a >asdf</a>
<a>asdf</a>
</div>
$(this).prev() 上一个
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')
$(this).parent() 父
$('#i1').parents() 祖宗
$('#i1').parentsUntil()
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
$('li:eq(1)') 获取匹配的指定元素
$('li').eq(1)
first() 获取匹配到的第一个元素
last() 获取匹配到的最后一个元素
hasClass(class) 是否含有某class
文本操作：
.text()
.text('设置的内容')
.html()
.html('设置的内容')
.val()
.val('设置的内容')
样式操作：
addClass
removeClass
toggleClass
属性操作：
#专门用于做自定义属性
.attr('name')
.removeattr('name')
.attr('name','za')
#专门用于chekbox，radio（不使用设置属性的方式，因为第一版本和第二版本这个方法处理不彻底，所以使用专用的prop方法）
.prop('checked')
.prop('checked',true)
ps:
index 获取索引位置
文档处理：
append
prepend
after
before
remove
empty 清空内容不清空标签
clone
CSS处理：
$(xx).css('color','red')
点赞：
$(xx).append()
$(xx).remove()
setInterval() 定时器
透明度
position
字体大小 位置
位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
position() 指定标签相对父标签(relative)标签的坐标
<div >
<div>
<div ></div>
</div>
</div>
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？
# 纯高度，边框，外边距，内边距
事件
DOM： 三种绑定方式
jQuery：
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
*******************
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
阻止事件发生
return false
# 当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
jQuery扩展：
- $.extend $.方法
- $.fn.extend $(..).方法
(function(){
var status = 1;
// 封装变量
})(jQuery)
JS正则：
test -判断字符串是否符合规定的正则
exec -获取匹配的数据
rep=/^\d+$/
rep.test()
rep.exec(str)
登录注册验证
组件：
bootStrap模板
CSS
js
jqueryUI 先用这个
EasyUI 修改代价比较大 存在大量ajax操作
2、操作元素
</script>