jQuery 笔记

jQuery
jQuery
http://jquery.cuishifeng.cn/
jQuery类库=Python的模块
DOM/BOM/JavaScript的类库
版本问题PS:
jQuery 三个版本
1.x 最好这个
2.x
3.x
转换:
jQuery对象[0] 就为DOM对象
$('l1')[0] = document.byElementById('l1')
var c = document.byElementById('l1')
$(c) 这就是DOM对象转为jQuery对象 $(Dom对象)
1.查找元素
DOM
10个左右
jQuery
很多个
选择器 直接找到某个或某类标签
1.id
$('#id')
2.class
<div class = 'c1'></div>
$('.c1')
3.标签 $('a') 就把所有的a标签
<div class = 'c2'>
<a>f<a>
div class = 'c1'>
<div class="c3"></div>
<div>
4.组合选择器(逗号) $('a,.c2,#id') 把a标签和c2标签都找到
5.$('#i10 a')(空格)子子孙孙 先找到id为i10的标签 再从i10标签下找a标签 #i10 a都打印 层级
6.$('#10>a')(>) 找#10下的儿子
7.$('a:first') #找到a标签 然后选第一个
8.$('a:last') #找到a标签 然后选最后一个
9.$('a:eq(x)') #x索引值 索引以0开始 找到a a a a 0开始
基本的: first last eq() 三个!! not除了其以外 都列出来
10. 属性 根据属性进行查找标签
第一种 如alex= '123' $('[alex]') 就可以找出标签 如 a a
第二种 如alex = '456' $('[alex = "456"]') 就会找出属性为alex=456的标签a
第三种 $("input[type='text]") 找出input type
<input type='text' disabled/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$(':disabled') 将disabled所在的input标签找出来
实例:
多选,反选,全选
$("#tb:checkbox").prop("checked"); 获取值
$("#tb:checkbox").prop("checked", true); 设置值 prop主要针对 cheked 和 select操作
jQuery方法内置循环: #('#tb:checkbox').xxxx方法
$("#tb:checkbox").each(function(k)){
//k当前索引
// this DOM 当前循环的元素$(this)
}
三元运算
var v = 条件? 真值 : 假值
筛选
一起完成在整个页面进行查找完成
加样式
<div id = 'i1' class = 'content hide'>内容<div>
$('#i1').addClass('hide') 给id为i1的标签 添加hide样式
删样式
<div id = 'i1' class = 'content hide'>内容<div>
$('#i1').removeClass('hide') 给id为i1的标签 移除hide样式
筛选器
$("#i1").next()下一个标签(同级) nextAll()下面所有 截止到 nextUntil("#i1")
$("#i1").prev()上一个标签 prevAll()上面所有 截止到 prevUntil("#i1")
$("#i1").parent()找父标签 parents()家族 截取 parentsUntil(".c1")
$("#i1").children()孩子标签
$("#i1").siblings()获取所有的兄弟标签
f$("#i1").find() $('#i1').find('#i2')在i1的子子孙孙找i2
在# text()获取内容
筛选器$('l1').eq(1) = 选择器里的 $('l1:eq(1)')
jQuery支持链式编程 $(this).next().removeClass('hide').parent().siblings().find('.content')
绑定事件 $('.header').click(function () {})
2.操作元素:
实例:
1.模态对话框
2.内容操作 文本操作
$("#i1").text() #获取文本
$("#i1").text("a") #设置文本内容为a 不解析html
$('#i1').html() #获取html内容
$('#i1').html("<a>1</a>") #设置html内容
输入input select velue
$('#i1').val() 获取value的内容
$('#i1').val('a')设置值 value = 'a'
样式操作
addClass
removeClass
toggleClass = 有则removeClass样式 没有则addClass样式
$("#i1").click(function () {
if($('.c1').hasClass('hide')) {
$('.c1').removeClass('hide');
}else{
$('.c1').addClass('hide');
}
})
$('.c1').toggleClass('hide'); //与上面一致 有Hide就remove 没有hide就退出
属性操作:
$('#i1').attr() 专门用于做自定义属性 $('#i1').attr('value')=开关 $('#i1').attr('value','哈哈') value = "哈哈"
$('#i1').attr(key,content)
$('$i1').removeAttr('value') 删除value属性
<input type='checkbox' id = 'i1'>
$('#i1').prop() #专门用于checkbox, radio操作
$('#i1').prop('checked',true)设置为true
$('#i1').prop('checked')获取checked的值
PS:
.index()获取索引位置
文档处理:
append()
prepend()
after()
before()
remove() 清除标签
empty() 清空内容
clone()