JQuery
模块 <<==>> 类库
DOM/BOM/JS类库
- 查找元素
- 操作元素
-
版本
1.x 1.12
2.x
3.x -
导入
`<script src="jquery-1.12.4.js"></script>` `JQuery.` `$.` -
转换
jquery对象[0] => Dom对象 Dom对象 => $(Dom对象)
选择器，直接找到某个或者某类标签
#id
$('#id').class
$(".c1")- 标签
$('a') - 组合
$('a,.c2,#i10') - 层级
$('#i10 a')子子孙孙
$('#i10>a')儿子
$('.c1+.c2')匹配所有紧接在c1元素后的c2元素(包括子标签)
$('.c1~.c2')匹配所有与c1同辈的c2元素 - 基本
i1:first
i1:last
i1:eq(index)索引 从0开始 - 属性
$('[alex]')具有alex属性的所有标签
$('[alex="123"]')alex属性等于123的标签 - 表单
$(':text')# 匹配type='text'
$("input[type='text']")# 利用属性查找代替
:checkbox
$(':disabled')
$(':enabled')
$(':checked')
$(':selected') - 值
$('div:contains("John")')# 查找所有包含 "John" 的 div 元素
实例：多选，反选，全选
.prop
$('#tb :checkbox').prop('checked');获取值
$('#tb :checkbox').prop('checked', true);设置值.xxxx批量操作
jQuery方法内置循环：$('#tb :checkbox').xxxx- 循环
.each$('#tb :checkbox').each(function(k){ // k当前索引 0+ // this，是DOM对象，当前循环的元素 if(this.checked){} // $(this)，转换为JQuery对象 if($(this).prop('checked', true)){} }) - 三元运算
var v = 条件 ? 真值 : 假值
筛选器，在选择器的基础上进行筛选
- 下一个(同级)
$('#i1').next()
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')# 包括ii1 - 上一个(同级)
$('#i1').prev()
$('#i1').prevAll()# 依次向上，第0个 --> 第n个
$('#i1').prevUntil('#ii1') - 父标签
$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil() - 子标签
$('#i1').children() - 兄弟标签
$('#i1').siblings() - 寻找#i1中class为.c1的
$('#i1').find('.c1')# JQuery支持链式编程，可不断循环 - 过滤
$('li:eq(0)')
$('li').eq(1)#索引
first()
last()
hasClass(class)
文本操作
$(..).text() # 获取文本内容
$(..).text("<a>1</a>") # 设置文本内容,不解析HTML，当作字符串
$(..).html() # 获取标签
$(..).html("<a>1</a>") # 设置标签
$(..).val() # 查找value属性
$(..).val("...") # 设置value属性
样式操作
.addClass('c1')
.removeClass()
.toggleClass() # 自动判断，有就删，没有就加
属性操作
# 专门用于自定义属性
$(..).attr('n') # 获取
$(..).attr('n','v') # 设置
$(..).removeAttr('n') # 移除
# 专门用于checkbox,radio选择 如用attr会出现删除后无法重新添加
$(..).prop('checked')
$(..).prop('checked', true)
=======利用属性操作替代prev等筛选，便于日后修改=======
索引.index
$(..).index() # 获取当前标签在父标签下的索引
$(..).children().eq(v) # 寻找子标签下索引为v的标签
文档处理
.append(tag) # 追加到子标签最后
.prepend() # 追加到子标签最前
.after() # 追加到当前标签后（兄弟）
.before()
删除或复制标签
.remove() # 删除标签 不加参数默认删除所有，加参数.#可进行筛选
.empty('0') # 清空标签内容
.clone # 复制标签内容
css单样式处理，直接在标签style内操作
$('t1').css('样式名称', '样式值')
$('t1').css('样式名称', '') #值为空时删除css属性
点赞功能的实现
- $('t1').append()
- $('t1').remove()
- setInterval 定时器
- 透明度 1 >> 0
- position
- 字体大小，位置
位置
-
滚动框位置
$('div').scrollTop() $(window).scrollTop() 无参数获取 $(window).scrollTop(0) 有参数设置 .scrollLeft([val]) 水平 -
获取标签在整个html中的坐标
.offset() .offset().left .offset().top -
获取当前标签相对父标签(relative)的坐标（不一定是紧接着的父标签）
.position() -
标签高度
$('i1').height() # 获取height $('i1').innerHeight() # 获取height + padding $('i1').outerHeight() # 获取height + padding + border $('i1').outerHeight(true) # 获取height + padding + border + margin true小写 # height -> padding -> border -> margin
绑定事件
DOM： 三种绑定方式
jQuery：
-
第一种
$('.c1').click() $('.c1').....等 -
第二种
$('.c1').bind('click',function(){}) $('.c1').unbind('click',function(){}) -
第三种 委托，可以解决添加新标签其它方式无法绑定的问题，点击的时候才会绑定
$('.c').delegate('a', 'click', function(){}) $('.c').undelegate('a', 'click', function(){}) -
第四种 3.0推荐
$('.c1').on('click', function(){}) $('.c1').off('click', function(){})
阻止事件发生
return false;
DOM方式
onclick="return Login();" #绑定也需要加return
function Login(){
.....
return false;
}
JQuery方式
$().click(function(){
$(':text,:password').each(function(){
...
return false; #循环内只终止循环
})
//可进行验证
return false;
})
！！！each循环内的return false会终止整个循环！！！
!!!页面框架加载完成后，自动执行，不需要所有元素都加载完成
$(function(){
//将绑定事件加在里面，以免有部分未加载完成事件不会执行
$(...)
})
$().ajax()
jQuery扩展
-
第一种
$.extend({ 'wangsen':function(){}; }) $.wangsen() $.方法 -
第二种
$.fn.extend() $('.c1').wangsen() $(..).方法 -
导入js扩展包
$.wangsen()，问题：
1. 不同扩展包声明了同名扩展 ==> 暂无法解决
2. 不同扩展包内的变量名重复 ==> 包在自执行函数内(function(arg){ var status = 1; // 封装变量 只在当前作用域内生效 arg.extend() })(jQuery) #传入jQuery或$参数
作业
一、# 纯高度，边框，外边距，内边距
二、所有实例敲一遍
三、编辑框
作业问题
-
禁用div点击：
.c1 { pointer-events: none; } -
将input文本框设置为只读：
$('').attr('readonly',true) $('').removeAttr('readonly') -
css添加与删除：
$('').css('color','red') $('').css('color') -
监测checkbox改变：
$('').change(function(){}) $('').delegate(':checkbox', 'change', function (){}) -
jQ删除标签:
$('').remove(); -
将function直接写在js中会默认执行，函数内的this代表当前window