黑马程序员技术交流社区
标题:
【石家庄校区】JQuery
[打印本页]
作者:
湿漉漉的文字控
时间:
2019-1-11 14:35
标题:
【石家庄校区】JQuery
本帖最后由 小石姐姐 于 2019-1-17 10:00 编辑
JQuery :
概念
一个javascript框架, 简化js的开发
javascript框架
本质上就是一些js文件,封装了js的原生代码
快速入门
步骤
下载JQuery
jquery-xxx.js与jquery-xxx.min.js的区别
jquery-xxx.js : 开发版本,是给程序员看的,有良好的缩进和注释
jquery-xxx.min.js : 生产版本,是程序中使用的 体积小
导入JQUERY文件
导入min.js文件
使用
JQuery对象和js对象的区别与转换
方法不通用
js和jq对象的互相转换
jq-->js
jq对象.get(0)
jq对象[0]
js-->jq
$(js对象)
选择器
: 筛选具有相似特征的元素(标签)
基本语法学习
事件绑定
获取对象 $(选择器)
事件
(click)事件名称(function匿名函数(内容))
入口函数
jquery入口函数(dom文档加载完成后执行该函数中的代码)
$(function(){
});
windoe.onload 和$(function)的区别
window.onload只能定义一次,如果定义多次,后边的会将前边的覆盖
$(function)可以定义多次
样式控制
css(键(属性名称), 值(属性值))
分类
基本选择器
标签选择器
$("标签名称")
id选择器
$("#id")
类选择器
$(".class")
并集选择器
$("A,B,...")
层级选择器
后代选择器
$("A B")
子元素选择器
$("A>B")
属性选择器
属性名称选择器
$(元素[属性名称])
属性选择器
$(元素[属性名称=(!=不等于 ^=以什么开始 $=以什么结束 *=包含)'属性值'])
复合属性选择器
$("元素[属性名称=''值][属性名称=''值]")
过滤选择器
首元素选择器
:first
尾元素选择器
:last
非元素选择器
:not(选择器)
奇数选择器
:odd (从0开始)
偶数选择器
:even (从0开始)
大于选择器,小于选择器,等于选择器
:gt , :lt , :eq
标题选择器(h1~h6)
:header
表单属性选择器
可用元素选择器
:enabled
不可用元素选择器
:disabled
选中选择器(多选)
:checked
选中选择器(下拉列表)
:selected > option
表单选择器
input标签 type为指定类型的
:text --> input[type='text']
:input --> 所有的表单标签,包括button,textarea,input,select
DOM操作
内容操作
html() : 获取/设置元素的标签体内容 ()有参数为设置,无参数为获取
text() : 获取/设置元素的标签体纯文本内容 ()有参数为设置,无参数为获取
val() : 获取/设置元素的value属性值 ()有参数为设置,无参数为获取
属性操作
通用属性操作
attr() : 获取/设置元素的属性
removeAttr() : 删除属性
prop() : 获取/设置元素的属性
removeProp() : 删除属性
attr和prop区别?
如果操作元素的固有属性,则建议使用prop
如果操作自定义属性,则建议使用attr
对class属性操作
css() : 设置/获取样式的值
addClass() : 添加class属性值(可以添加多个不同的值)
removeClass() : 删除class属性值
toggleClass() : 切换class属性
CRUD操作
append() : 父元素将子元素追加到末尾
对象1.append(对象2) 将对象2添加到元素1的末尾
prepend() : 父元素将子元素添加到开头
对象1.append(对象2) 将对象2添加到元素1的开头
appendTo()
对象1.appendTo(对象2) : 将对象1添加发到对象2内部,并且在末尾
prependTo()
对象1.appendTo(对象2) : 将对象1添加发到对象2内部,并且在开头
after() : 元素添加到对应的元素后边
对象1.after(对象2) : 将对象2添加到对象1后边,对象1和对象2是兄弟关系
before() : 添加元素到元素前边
对象1.after(对象2) : 将对象2添加到对象1前边,对象1和对象2是兄弟关系
insertAfter()
对象1.after(对象2) : 对象1添加到对象2后边
insertBefore()
对象1.after(对象2) : 对象1添加到对象2前边
remove() : 移除元素
将对象删除
empty() :
动画效果
三种方式显示和隐藏元素
默认显示和隐藏方式
show([speed,[easing], [fn]])显示
参数
speed : 动画执行速度(slow fast 毫秒值)
easing : 用来指定切换效果
swing:动画执行效果 慢-快-慢
linear : 匀速
fn :动画完成时执行的函数
hide([speed,[easing], [fn]])隐藏
toggle([speed,[easing], [fn]])切换隐藏和显示
滑动方式
slideUp([speed,[easing], [fn]])
slideDowm([speed,[easing], [fn]])
slideToggle([speed,[easing], [fn]])
注意:在使用滑动显示的动画效果是需要给实现动画的标签设置宽度
淡入淡出
fadeIn([speed,[easing], [fn]])
fadeOut([speed,[easing], [fn]])
fadeToggle([speed,[easing], [fn]])
遍历方式
jq对象.each(callback) -->callback回调函数(可有参(index索引, element元素对象) 无参)
jq对象.each(function(i,n){
//i代表当前索引
//n代表当前索引锁对应的"js对象"
return true --> continue
return false --> break
})
$.each(object, [callback])
$.each(object, callback) -->callback回调函数(可有参(index索引, element元素对象) 无参)
$.each(object(jq对象 js数组), function(i,n){
//i代表当前索引
//n代表当前索引锁对应的"js对象"
return true --> continue
return false --> break
})
for...of(不常用 在3以上版本可用 )
事件绑定
jquery标准绑定方式
jq对象.事件方法(回调函数)
on绑定事件/off解绑
jq对象.on("事件名称", 回调函数)
jq对象.off("事件名称") off(无参数) 将组件上的所有事件全部解绑
事件切换 : toggle
jq对象.toggle(fn1, fn2, ...)
单击jq对象对应的组件后,会执行fn1,第二次点击会执行fn2,...
版本在1.9之后需要引入jquery-migrate.js插件的jar包才能使用
常用事件
onclick
onload
onfocus
onblur
onsubmit (默认提交 return true)
onchange
onkey
插件
增强jquery的功能
实现方式
jquery.fn.extend(object)
增强通过jquery获取对象的功能
jquery.extend(object)
增强jquery对象自身的功能
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2