admin 管理员组文章数量: 1184232
2023年12月17日发(作者：楞严咒经典原版唱诵)
JQuery和Ajax
JQuery
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得 更少，做得更多，使用 jQuery 将极大的提高编写 javascript 代码 的效率，帮助开发者节省了大量的工作，让写出来的代码更加优 雅，更加健壮，"如虎添翼"。
Dom对象 与 Jquery包装集对象
Dom对象 通过js方式获取的元素对象（document）
/* Dom对象 */
var divDom = mentById("mydiv");
(divDom);
var divsDom = mentsByTagName("div");
(divsDom);
// js获取不存在的元素
var spanDom = mentsByTagName("span");
(spanDom);
var spanDom2 = mentById("myspan");
(spanDom2);
Jquery对象 通过jquery方法获取的元素对象，返回的是jquery包装集
/* Jquery对象 */
// 通过id选择获取元素对象 $("#id属性值")
var divJquery = $("#mydiv");
(divJquery);
// jquery获取不存在的元素
var spanJquery = $("#myspan");
(spanJquery);
Dom对象 转 Jquery对象
// Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var divDomToJquery = $(divDom);
(divDomToJquery);
Jquery对象 转 Dom对象
// 获取包装集对象中指定下标的元素，将jquery对象转换成dom对象
var divJqueryToDom = divJquery[0];
(divJqueryToDom);
基础选择器
id选择器
#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
操作元素的属性
1. 获取属性
attr("属性名")
prop("属性名")
2. 设置属性
attr("属性名","属性值")
prop("属性名","属性值")
3. 移除属性
removeAttr("属性名");
属性的分类：
固有属性：元素本身就有的属性（id、name、class、style）
返回值是boolean的属性：checked、selected、disabled
自定义属性：用户自己定义的属性
attr()和prop()的区别：
1. 如果是固有属性，attr()和prop()方法均可操作
2. 如果是自定义属性，attr()可操作，prop()不可操作
3. 如果是返回值是boolean类型的属性
若设置了属性，attr()返回具体的值，prop()返回true；
若未设置属性，attr()返回undefined，prop()返回false；
总结：
如果属性的类型是boolean（checked、selected、disabled），则使用prop()方法；否则使用attr()方法。
操作元素的样式
attr("class") 获取元素的样式名
attr("class","样式名") 设置元素的样式 （设置样式，原本的样式会被覆盖）
addClass("样式名") 添加样式 （在原来的样式基础上添加样式，原本的样式会保留，如果出现相同样式，则以样式中后定义的为准）
css() 添加具体的样式（添加行内样式）
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. 前追加子元素
指定元素.prepend(内容)
在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。
$(内容).prependTo(指定元素);
把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。
2. 后追加子元素
指定元素.append(内容)
在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。
$(内容).appendTo(指定元素);
把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。
3. 前追加同级元素
before() 在指定元素的前面追加内容
4.后追加同级元素
after() 在指定元素的后面追加内容
注：在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置；
如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置
删除元素
remove()
删除元素及其对应的子元素，标签和内容一起删除
指定元素.remove();
empty()
清空元素内容，保留标签
指定元素.empty();
遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
ready加载事件
预加载事件
当页面的dom结构加载完毕后执行
类似于js中load事件
ready事件可以写多个
语法：
$(document).ready(function()
});
简写：
$(function(){
});
绑定事件
bind绑定事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
语法：
$(selector).bind( eventType [, eventData], handler(eventObject));
eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。
[, eventData]：传递的参数，格式：{名:值,名2:值2}
handler(eventObject)：该事件触发执行的函数
绑定单个事件
bind绑定
$("元素").bind("事件类型",fucntion(){
});
直接绑定
$("元素").事件名(function(){
});
绑定多个事件
bind绑定
1. 同时为多个事件绑定同一个函数
指定元素.bind("事件类型1 事件类型1 ..",function(){
});
2. 为元素绑定多个事件，并设置对应的函数
指定元素.bind("事件类型",function(){
}).bind("事件类型",function(){
});
3. 为元素绑定多个事件，并设置对应的函数
指定元素.bind({
"事件类型":function(){
},
"事件类型":function(){
}
});
直接绑定
指定元素.事件名(function(){
}).事件名(function(){
});
Ajax
$.ajax
格式：$.ajax({});
参数：
type：请求方式GET/POST
url：请求地址url
async：是否异步，默认是true表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数
$.get和$.post
$.get();
语法：
$.get("请求地址","请求参数",function(形参){
});
$.post();
语法：
$.post("请求地址","请求参数",function(形参){
});
$.getJSON
语法：
$.getJSON("请求地址","请求参数",function(形参){
});
注：getJSON方式要求返回的数据格式满足json格式（json字符串）
版权声明：本文标题：JQuery和Ajax 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1702817446a432019.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论