大纲
一、jQuery简介 二、jQuery 和Dom关系及jQuery版本 1、jQuery版本 2、jQuery和Dom转换 三、jQuery 选择器 1.1、基本 1.2、层级 2、基本筛选器 3、属性选择器 4.1、表单 4.2、表单对象属性 四:jQuery 示例 1、示例:全选、反选、取消 2.1、筛选器示例:左侧菜单点击展开内容 2.2、筛选器 3.1、jQuery 文本、样式以、属性、文档处理操作 3.2、示例:模态对话框 4、示例:tab切换菜单 5、示例:点赞以及jQuery css操作 6、示例:拖动面板以及位置操作 7.1、jQuery绑定事件及示例 7.2、JQuery事件之阻止事件发生 及示例:表单验证 五、jQuery 扩展一、jQuery简介
jQuery分为两部分:
- 查找元素
- 操作元素
二、jQuery 和Dom关系及jQuery版本
1、jQuery版本
当前jQuery版本:这里使用的1.x系列最新版本
1.x系列 兼容性最好,1系列当前最新1.12
2.x系列 3.x系列 最新的版本,IE低版本不再支持
下载的时候有两个版本:一个标准版、一个min压缩版。测试时使用标准版,线上建议使用压缩版。
下载后,引入jQuery类库:
2、jQuery和Dom转换
> $('#i1') // jQuery获取[]> document.getElementById('i1') // dom获取> $('#i1')[0] // jQuery对象转换为dom对象> $(document.getElementById('i1')) // dom对象转换为jQuery对象[]// 转换: // jquery对象[0] => Dom对象 // Dom对象 => $(Dom对象)
三、jQuery 选择器
1.1、基本
-
-
id 选择器
$('#id')
-
-
-
class 选择器
<div class='c1'></div>
$(".c1")
-
-
-
标签 选择器
<a>f</a>
$('a')
-
-
-
组合
$(' a, .c1, #i10 ')
-
1.2、层级
- $(‘#i10 a’) 子子孙孙(i10里所有a标签)
- $(‘#i10>a’) 儿子(只取子标签里的a标签)
- prev + next 下一个标签
- prev ~ siblings 兄弟标签
2、基本筛选器
:first // 获取匹配的第一个元素:last:not(selector) //去除所有与给定选择器匹配的元素// 在jQuery 1.3中,已经支持复杂选择器了(例如:not(div a) 和 :not(div,a)):even // 匹配所有索引值为偶数的元素,从 0 开始计数:odd // 匹配所有索引值为奇数的元素,从 0 开始计数:eq(index) :gt(index) :lt(index) // 等于 大于 小于:header // 匹配如 h1, h2, h3之类的标题元素
3、属性选择器
之前的内容,没有对自定义属性进行查找的,如:<a fgf='22'></a>
jQuery 支持对自定义属性的获取查找
$('[fgf]') // 具有fgf属性的所有标签$('[fgf="22"]') // fgf属性等于22的标签[attribute!=value][attribute^=value][attribute$=value][attribute*=value][attrSel1][attrSel2][attrSelN]
4.1、表单
$("input[type='text']") // 不使用表单选择器,也能实现$(':text') // 使用表单选择器
4.2、表单对象属性
:enabled // 可编辑,默认就是:disabled // 不可编辑:checked // 被选中(单选框、复选框):selected // 被选中(下拉框)
四:jQuery 示例
1、示例:全选、反选、取消
相关知识点:
- 选择器- .prop $('#tb:checkbox').prop('checked'); 获取值 $('#tb:checkbox').prop('checked', true); 设置值- .each jQuery方法内置循环: $('#tb:checkbox').xxxx- $('#tb:checkbox').each(function(k){ // k当前索引 // this,DOM,当前循环的元素 $(this) })- 三元运算 var v = 条件 ? 真值 : 假值
选项 | IP | PORT |
---|---|---|
1.1.1.1 | 80 | |
1.1.1.1 | 80 | |
1.1.1.1 | 80 |
2.1、筛选器示例:左侧菜单点击展开内容
筛选器:
$(this).next() // 下一个$(this).prev() // 上一个$(this).parent() // 父$(this).children() // 孩子$('#i1').siblings() // 兄弟(不包含自己)$('#i1').find('#i1') // 子子孙孙中查找
添加移除样式:
$('#i1').addClass(..) // 添加样式$('#i1').removeClass(..)// 移除样式
示例:
标题一标题二标题三
2.2、筛选器
$('#i1').next() // 下一个 $('#i1').prev() //往上找$('#i1').nextAll() // 下面所有 $('#i1').prevAll()$('#i1').nextUntil('#ii1') // 下面直到哪里 $('#i1').prevUntil('#ii1')$('#i1').parent() // 父标签$('#i1').parents() // 取得一个包含着所有匹配元素的祖先元素的元素集合$('#i1').parentsUntil() //查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。$('#i1').children()$('#i1').siblings()$('#i1').find()$('li').eq(1) <——> $('li:eq(1)')first()last()hasClass(class)
3.1、jQuery 文本、样式以、属性、文档处理操作
- 文本操作:
$(..).text() // 获取文本内容$(..).text("1") // 设置文本内容$(..).html() // 获取$(..).html("1") // 设置$(..).val() // 获取$(..).val(..) // 设置
- 样式操作:
addClass
removeClass toggleClass 比如实现网页开关灯功能
开关灯示例:
- 属性操作:
// 专门用于做自定义属性$(..).attr('n') // 获取$(..).attr('n','v') // 设置$(..).removeAttr('n') // 删除// 专门用于chekbox,radio jQuery1、2版本checkbox使用attr的话有bug,所以用prop$(..).prop('checked')$(..).prop('checked', true)
- 文档处理:
append // 往后加prepend // 往前加after // 紧挨着后面before // 紧挨着前面remove // 删除empty // 只清空内容clone // 克隆一份数据
3.2、示例:模态对话框
Title 添加
1.1.1.11 | 80 | 80 | 编辑 | 删除 |
1.1.1.12 | 80 | 80 | 编辑 | 删除 |
1.1.1.13 | 80 | 80 | 编辑 | 删除 |
4、示例:tab切换菜单
Title 内容一内容二内容三
上面是通过自定义属性实现的,下面不用自定义属性,用索引也能实现。
index 获取索引位置
Title 内容一内容二内容三
5、示例:点赞以及jQuery css操作
Query css处理操作
$('t1').css('样式名称', '样式值') 点赞: - $('t1').append() - $('t1').remove() - setInterval - 透明度 1 》 0 - position - 字体大小,位置
点赞示例
Title 赞赞
6、示例:拖动面板以及位置操作
- 位置操作:
$(window).scrollTop() // 获取windows滑轮位置 // 注意是谁的滑轮$(window).scrollTop(0) // 设置windows滑轮位置scrollLeft([val]) // 左右滚动滑轮设置$('#i1').offset() // 获取标签位置offset().left // 指定标签在html中的坐标位置offset().top // 指定标签在html中的坐标位置
- 1
- 2
- 3
- 4
- 5
- 6
- 7
7.1、jQuery绑定事件及示例
- 绑定事件知识点:
// 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(){ })
- 示例:添加内容,并自动绑定事件
- 1
- 2
7.2、JQuery事件之阻止事件发生 及示例:表单验证
a标签是不是默认有个onclick事件,如果再给绑定一个onclick事件会怎么样?
默认:先执行绑定事件,在执行a标签的默认事件。
阻止事件发生 return false# 当页面框架加载完成之后,自动执行$(function(){ $(...)})
示例:
走你1 走你2
- 示例:表单验证
Title
五、jQuery 扩展
如果想自定义jQuery功能,可以如下定义:
- $.extend $.方法
- $.fn.extend $(..).方法
如果引入第三方jQuery扩展,全局变量、扩展名,可能重复,因此使用还是都定义自执行函数。
(function (arg) { var status = 1; arg.extend({ 'name': function () { return 'fgf'; } });})(jQu$ery);