引入
Src标签
Dom对象与JQuery包装对象
只有JQ对象能使用JQ方法,$(xx) 把Dom对象包起来
基础选择器
ID选择器 #ID $(“#Id”) 选择Id为指定值的元素对象(多个返回数组)
类选择器 .Class $(“.Class”) 选class为指定值的元素对象
元素选择器 标签名/元素名 $(“标签/元素”) . 所有指定标签.
通用选择器 * $(“*”) 页面中所有元素对象
组合选择器 选择器1,选择器2,... $(“选择器1,选择器2”) 指定选择器中的元素对象
层次选择器
后代选择器
格式 父元素 指定元素 (空格隔开)
实例 $(“父元素 指定元素”)
选择 父元素的所有指定元素(包含第一代、第二代等)
子代选择器
格式 父元素>指定元素 (大于号隔开)
实例 $(“父元素>指定元素”)
选择 父元素的所有第一代指定元素
相邻选择器
格式 元素+指定元素
实例 $(“元素+指定元素”)
选择 元素的下一个指定元素(只找下一个,不存在则获取不到)
同辈选择器
格式 元素~指定元素
实例 $(“元素+指定元素”)
选择 元素的下一个指定元素(找到有为止)
表单选择器
表单选择器 :input 查找所有的Input元素:$(“:input”) 会匹配所有的input textarea select button
文本框选择器 :text ... ...
密码框选择器 :password ...
单选钮选择器 :radio ...
多选钮选择器 :checkbox
提交钮选择器 :sunmit
图像钮选择器 :image
重置钮选择器 :reset
文件域选择器 :file
按钮选择器 :button
操作元素的属性
属性的分类
固有属性:元素本身就有的属性(id name class style value...)
返回值是boolean的属性:checked selected disabled
自定义属性:用户自己定义的属性
Attr()和prop()的区别
1.如果是固有属性,attr()和prop()都能操作
2.自定义属性,attr()可操作,prop()不能操作
3.返回boolean的属性
若设置了属性,attr()返回具体的值,prop()返回true
若未设置属性,attr()返回undefined,prop()返回false
内容
1.获取属性 attr(“属性名”) prop(“属性名”)
2.设置属性 attr(“属性名” , ”属性值”) prop(“属性名” , ”属性值”)
3.移除属性 removeAttr(“属性名”);
总结
如果属性的类型是boolean,则使用prop()方法,否则使用attr()方法
操作元素的样式
attr(“class”) 获取元素的样式名
attr(“class”,”样式名”) 设置元素的样式 (设置的话原本的会被覆盖)
addClass(“样式名”) 添加样式(在原来的基础上添加,原有的保留,重复的以最后一次为准)
css(“class”) 添加具体的样式(行内样式)
css(“具体样式名”,’’样式值”); 设置单个样式
css({“具体样式名”:’’样式值”,“具体样式名”,’’样式值”}); 设置多个样式
removeClass(“样式名”) 移除样式
操作元素的内容
操作元素的内容
html() 获取元素的内容,包含html标签(非表单元素)
html(“内容”) 设置元素的内容,包含html标签(非表单元素)
text() 获取元素的纯文本内容,不识别html元素(非表单元素)
text(“内容”) 设置元素的纯文本内容,不识别html元素(非表单元素)
val() 获取元素的值(表单元素)
val(“值”) 设置元素的值(表单元素)
表单元素
文本框text 密码框password 单选框radio 复选框checkbox 隐藏域hidden 文本域textarea下拉框select
非表单元素
div、 span、 h1~h6、 table、 tr、 td、 li、 p等
创建元素和添加元素
创建元素
$(“内容”)
添加元素
1.前追加子元素
2.后追加子元素
3.前追加同级元素
4.后追加同级元素
注:
在添加元素时,如果元素本身不存在(新建的元素),此时会将元素追加到指定位置
如果元素本身存在(已有元素),会将原来元素直接剪切设置到指定位置
删除和遍历元素
删除元素
remove();
删除元素及对应的子元素,标签和内容一起删除
指定元素.remove();
empty();
清空元素内容,保留标签
指定元素empty();
遍历元素
each()
$(selector).each(function(index,element){
Index. element. sth(element) //do anying you want })
参数function为遍历时的回调函数
index为遍历元素的序列号,从0开始
element是当前的元素,此时是dom元素
ready加载事件
ready加载事件
预加载事件
当页面的dom结构加载完毕后执行
类似于js中的load事件
ready事件可以写多个
语法:
$().ready(function(){ //这样就会等元素加载完再执行,避免因为js先加载报错 })
简写
$(function(){ })
绑定事件
bind绑定事件
为被选元素添加一个或多个事件处理程序,并规定事件发生时的运行函数
语法:
$(selector).bind( eventType[,eventData], handler(eventObject) );
eventType:是一个字符串类型的事件类型,就是你需要绑定的事件
[,eventData]:传递的参数,格式:(名:值,名2:值2)
handler(eventObject)该事件触发执行的函数
绑定单个事件
bind绑定
$(“元素”).bind(“onclick”,function(){ });
直接绑定
$(“元素”).事件名(function(){ });
绑定多个事件
bind绑定
1.多事件同一个函数
指定元素.bind(“事件 事件2 事件3”,function(){ })
2多事件并设置对应函数
指定元素.bind(“事件”,function(){ }).bind(“事件2”,function(){ });
3.多事件并设置对应函数
指定元素.bind({ "事件":function(){ }, "事件2":function(){ } })
直接绑定
指定元素.事件名(function(){ }).事件名(function(){ });
后续缺
Ajax(在Ajax中统一整理)
JsAjax
JQAjax