前端:
jQuery前端JS框架
框架都是为了简化操作产生的。实际上就是对一些复杂、冗余的逻辑代码的封装。
jQuery基础
$是jQuery的简写方式。是一个方法对象。
jq对象:
和js传统的对象是完全不同的。不能使用js对象的属性。js对象也不能使用jq对象的方法。
jq对象是一个自定义类型的对象。可以当作数组来使用,数组中的元素就是jq对象对应的js对象。
例如:
js对象.innerHTML jq对象.html()
js对象.value jq对象.val()
在jq对象上调用api,如果jq是一个对象的集合,集合中的每个元素都会调用此api。自带遍历。
$("div").html("aaa")
jq对象和js对象的互转
jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
js -- > jq : $(js对象)
也可以把一个js的数组传入$中,构造为一个jq的对象。
jq开发的通用语法(api的用法)
入口函数:
$(function(){
// 入口函数,可以设置多次,都会执行。
});
window.onload 是一个属性,如果多次赋值会覆盖。
事件绑定
js对象.onXXX = function(){}//属性
jq对象.XXX(function(){});//方法
样式控制
css()
jq的选择器
作用:快速查找元素
jq的选择器语法和css选择器语法基本一致。
基本选择器
id选择器选择的时候,如果一个页面中有多个此id的元素,只会查找到第一个元素。
层级选择器
直接子元素和后代元素的区别
属性选择器
有某个属性
某个属性等于指定值
某个属性不等于指定值
过滤选择器
奇数偶数选择器
指定索引
表单选择器
表单元素
查找指定状态的元素
jq的dom操作
元素的增删改查
元素内容操作
1. html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
相当于js中的innerHTML
2. text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
和html()不同,如果在标签内用text()设置了html标签,也不会解析,而是直接输出字符串。
相当于js中的innerText
3. val(): 获取/设置元素的value属性值
相当于js中的value
元素属性的操作
新增或修改属性值
attr()
prop()
移除属性
removeAttr()
removeProp()
使用原则:优先使用prop,如果使用后没有效果,再修改attr。
对class属性操作
1. addClass():添加class属性值
在原有的样式的基础上添加
2. removeClass():删除class属性值
3. toggleClass():切换class属性 ToggleButton
toggleClass("one"):
判断如果元素对象上存在class="one",则将属性值one删除掉。 如果元素对象上不存在class="one",则添加
4. css()
相当于js中的style属性
元素的增删改
append()
在当前元素内部最后方添加元素。append的参数可以是一个jq对象,也可以是一段html代码。
remove()
在jq中,remove是把自己删除掉。
empty()
清空某个元素,但是不删除自己。