JQuery基础
概念:
一个JavaScript框架,简化js的开发
框架是半成品
JavaScript框架:本质就是一些js文件,封装了js的原生代码
快速入门
步骤
1.下载JQuery
JQuery-*.js与JQuery-*.min.js区别
JQuery-*.js:开发版本,给程序员看的,有良好的缩进和注释,体积会大一些
JQuery-*.min.js(压缩版):生产版本,程序中使用,没有缩进,体积小一些,程序加载更快
2.导入JQuery的js文件
导入JQuery-*.min.js
3.使用
JQuery的api
JQuery对象和js对象区别与转换
区别:-->都可以当做数组使用,可以调用length,查看长度
1.JQuery对象在操作时,更加方便
2.JQuery对象和js对象方法不通用
3.两者相互转换:
JQuery-->js:JQuery对象[索引]或者JQuery对象.get(索引)
js-->JQuery:$(js对象)
**区别:
1.方法不通用
2.JQuery可以封装js
**转换:
JQuery-->js:
JQuery对象.get(0)
JQuery对象[0]
js-->JQuery:
$(js对象)
选择器:筛选具有相似特征的元素(标签)
基本语法学习:
1.事件绑定:
$(选择器).click(function(){});
2.入口函数(dom文档加载完成之后执行该函数中的代码):
$(function(){});
window.onload = function(){}和$(function(){});
window.onload = function(){}只能定义一次,后边定义的会把前边定义的覆盖
$(function(){}) 可以定义多次
$(function(){
alert(123);
alert(234);
});
3.样式控制:
$(function(){
$(选择器).css("要设置的对应的样式名称","要设置的值")
});
分类:
1.基本:
标签(元素)选择器
$("标签名称")
id选择器
$("#id的属性值")
类选择器
$(".类的属性值")
并级选择器
$("选择器1,选择器2..")
2.层级选择器
后代选择器
$("选择器A 选择器B"),选择A所有的后代的样式进行改变
子选择器或子元素选择器
$("选择器A>选择器B"),只能选择B选择器进行样式改变
3.属性选择器
**属性名称选择器
$("A[属性名称]")
**属性选择器
$("A[属性名称='属性值']")
复合属性选择器(看api)
$(A["属性名称='属性值']....")
4.过滤选择器 --> 写法:如 $("div:first")
1.首元素选择器:
:first
2.尾元素选择器
:last
3.偶数选择器
:even 从零开始算
4.奇数选择器
:odd 从零开始数
5.非元素选择器
:not(选择器)
6.标题选择器
:header
5.表单属性选择器
1.可用元素选择器
:enabled
例子:如 $("input[type='text']:enabled").val("aaa")
2.不可用元素选择器
:disabled
3.选中选择器:用于多选框时
:checked
例子:如 alert($("input[type='checkbox']:checked").length);
4.选中选择器:用于下拉列表时
:selected
$("job>option:selected")
5.表单选择器
针对input标签的
type为指定类型的
:text-->input[type='text']
:input -->所有表单标签都属于被选中状态
DOM操作
1.内容相关操作(在括号内添加参数为设置,不加参数为获取的方法)
1.html():获取/设置元素的标签体内容-->带标签,设置即是替换,之前内容不会存在
html()相当于js中的innerHTML属性
2.text():获取/设置元素的标签体的纯文本内容-->不带标签,设置也是替换内容,之前的文本内容被替换了
3.val():获取/设置元素的value的属性值
设置:需要在val()的括号中传入需要修改后的值
2.属性操作
1.通用属性操作-->括号内,一个值代表获取,两个值代表设置
attr():获取/设置元素的属性值
removeAttr():删除属性
**推荐使用:prop():获取/设置元素的属性值
removeProp("属性名"):删除属性
attr与prop的区别:
1.如果操作的是元素的固有的属性(原始属性),则建议使用prop
2.如果操作的是元素的自定义的属性(根据要求添加的属性),则建议使用attr
2.对Class属性操作
addClass():添加Class属性值
可以添加多个不同的属性
不可以添加多个同样的属性
removeClass():删除Class属性值
toggleClass():切换Class属性值
3.CRUD操作
操作文档对象,动态操作
*1.append():父元素将子元素追加到末尾
2.prepend():父元素将子元素追加到开头
*3.appendTo():
append 反视角
4.prependTo():
prepend反视角
5.after():添加元素到元素后边
对象1.after(对象2):将对象2添加到对象1后边,对象1和对象2是兄弟关系
6.before():添加元素到元素前边
对象1.after(对象2):将对象2添加到对象1前边,对象1和对象2是兄弟关系
*7.insertAfter():
*8.insertBefore():
*9.remove():移除元素(删除所有匹配的元素)
对象.remove():将对象删除掉-->自己删除自己
10.empty():清空元素的所有后代元素
对象.empty():将对象所有后代元素清空,但不包括属性节点
注意-->需要记的:
a.append(b) a是父亲,b是孩子,b作为孩子添加到a的最后位置
a.appendTo(b) b是父亲,a是孩子,a作为孩子添加到b的最后位置
a.insertBefore(b) 把a添加到b的前面 a和b是兄弟关系
a.insertAfter(b) 把a添加到b的后面 a和b是兄弟关系
|
|