一、认识jQuery
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。
二、JQuery版本
1.x 1.12
2.x
3.x
三、JQuery与DOM转换
jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法
两种转换方式将一个jQuery对象转换成DOM对象:[index]和.get(index);
(1)jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
如:var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
(2)jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
如:var $v=$("#v"); //jQuery对象
var v=$v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)
如:var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
转换后,就可以任意使用jQuery的方法了。
四、JQuery的模块(类库)
参考地址:
(1)、选择器
直接找到某个或者某类标签
@1. id $('#id') @2. class $(".c1") @3. 标签$('a') @4. 组合a$('a') $('.c2') $('a,.c2,#i10') @5. 层级 $('#i10 a') 子子孙孙 $('#i10>a') 儿子 @6. 基本 :first :last :eq() @7. 属性 $('[alex]') 具有alex属性的所有标签 $('[alex="123"]') alex属性等于123的标签 $("input[type='text']") $(':text')
(2)、实例
多选,反选,全选 - 选择权 - $('#tb:checkbox').prop('checked'); 获取值 $('#tb:checkbox').prop('checked', true); 设置值 - jQuery方法内置循环: $('#tb:checkbox').xxxx - $('#tb:checkbox').each(function(k){ // k当前索引 // this,DOM,当前循环的元素 $(this) }) - var v = 条件 ? 真值 : 假值
(3)、筛选
$('#i1').next() $('#i1').nextAll() $('#i1').nextUntil('#ii1') $('#i1').prev() $('#i1').prevAll() $('#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)
(4)、文本操作
$(..).text() # 获取文本内容 $(..).text(“1”) # 设置文本内容 $(..).html() $(..).html("1") $(..).val() #获取值 $(..).val(..)
(5)、样式操作
addClass
removeClass
toggleClass
(6)、属性操作
@1 专门用于做自定义属性 $(..).attr('n') $(..).attr('n','v') $(..).removeAttr('n')
@2专门用于chekbox,radio $(..).prop('checked') $(..).prop('checked', true) PS: index 获取索引位置
(7)、文档处理
append
prepend
after
before
remove
empty
clone
(8)、css处理
$('t1').css('样式名称', '样式值') 点赞: - $('t1').append() - $('t1').remove() - setInterval - 透明度 1 》 0 - position - 字体大小,位置
(9)、位置
$(window).scrollTop() 获取 $(window).scrollTop(0) 设置 scrollLeft([val]) offset().left 指定标签在html中的坐标 offset().top 指定标签在html中的坐标 position() 指定标签相对父标签(relative)标签的坐标$('i1').height() # 获取标签的高度 纯高度 $('i1').innerHeight() # 获取边框 + 纯高度 + ? $('i1').outerHeight() # 获取边框 + 纯高度 + ? $('i1').outerHeight(true) # 获取边框 + 纯高度 + ? # 纯高度,边框,外边距,内边距
(10)、事件
DOM: 三种绑定方式(bind、unbind、delegate、undelegate、on、off)
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)
六、课堂实操(部分)
(1)、练习1
(2)、练习2
Title
选项 | IP | PORT |
---|---|---|
1.1.1.1 | 80 | |
1.1.1.1 | 80 | |
1.1.1.1 | 80 |
(3)、练习3
Title 标题一标题二标题三
(4)、练习4
(5)、练习5
Title 添加
1.1.1.11 | 80 | 80 | 编辑 | 删除 |
1.1.1.12 | 80 | 80 | 编辑 | 删除 |
1.1.1.13 | 80 | 80 | 编辑 | 删除 |
1.1.1.14 | 80 | 80 | 编辑 | 删除 |
(8)、练习8
Title
(9)、练习9
Title 内容一内容二内容三
(11)、练习11
Title
- 1
- 2
(12)、练习12
Title 赞赞赞赞
(14)、练习14
(15)、练习15
Title
- 1
- 2
(16)、练习16
(17)、练习17
Title
(18)、练习18
Title