原文: https://blog.csdn.net/xyz_dream/article/details/56848573
今天再回顾了一下jQuery的一些常用方法,事件绑定等等。下面列出jQuery在开发过程中使用而且比较常用的方法,事件,属性等介绍。
一. 元素创建,元素获取,文档加载
1.1 预文档加载的一般写法:
$(function(){
//要写的代码
})
1.2 创建jQuery对象元素和获取:
$(function(){
var $var=$(“#element”);//获取id=element的元素
var $create=$(“<h1></h1”);//创建一个h1标签对象
});
二.常用事件
2.1 点击事件 click
$(function(){
$(“#btn”).click(function(){
alert(“我被点击了!”);
});
});
2.2 双击事件 dblclick() 用法同上
2.3 鼠标点击事件 (左键点击 keyCode=1,中间滑轮点击 2,右键点击 3)
$(“#id”).mousedown(function(e){
switch(e){
case 1:{
alert(“左键!”);
break;
}
case 2:{
alert(“滚动!”);
break;
}
case 3:{
alert(“右键!”);
break;
}
}
});
2.4 滚动条事件 scroll()
2.5 键盘响应,回车键 keydown(function(e)) keyCode=13
$(“body”).keydown(function(e){
if(e.keyCode==13)
alert(“回车键”);
});
2.6 获取焦点事件 focus()
2.7 焦点离开事件 blur()
2.8 图片不存在等等资源请求不存在 error, 加载进来 load
$(“#img”).error(function(){
alert(“图片找不到”);
});
2.9 获取鼠标的x,y坐标
$(“#img”).mousemove(function(e){
$(“span”).text(e.pageX + “, “ + e.pageY);
});
三.获取元素文本数据以及获取元素属性,设置属性
3.1 获取文本信息
3.1 text() 获取元素的纯文本信息,不包含html标签
3.2 html() 获取该元素下的所有子元素,以文本的形式显示(html标签也会显示)
3.3 val() 获取表单输入框的值
3.4 attr(“id”) //获取属性值 传入属性名即可获取属性值 ,可以设置多个属性值,json的形式传入 {“href”:”http://localhost","id":"test"}
$(“#id”).click(function(){
alert($(this).attr(“id”)); $(this).attr({“id”:”newid”,”class”:”newclass”});
});
四.节点增删
4.1.增加节点
4.1.1 append(element) 在被选元素的结尾插入内容
4.1.2 prepend() - 在被选元素的开头插入内容
4.1.3 after() - 在被选元素之后插入内容
4.1.4 before() - 在被选元素之前插入内容
4.2 删除节点
4.2.1 remove() - 删除被选元素(及其子元素) 删除所有包括自己的子元素
4.2.2 empty() 从被选元素中删除子元素 (只是删除子元素)
五.元素样式
<style>
.blue
{
color:blue;
}
</style>
5.1 addClass(“blue”) - 向被选元素添加一个或多个类,多个类用空格分开 “blue red”
5.2 removeClass() - 从被选元素删除一个或多个类
5.3 toggleClass() - 对被选元素进行添加/删除类的切换操作
5.4 css(“background-color”) - 设置或返回样式属性 //可以设置多个属性值json {“color”:”red”,”font-size”:”16px”},或者是key-value的形式添加单个值
六.元素DOM的遍历
6.1获取到父元素
parent() //得到直接父元素
parents() //所有父元素
parentsUntil(“div”) 往上查找父元素,直到遇到div为止的所有父元素
6.2 获取子元素
children() children() 方法返回被选元素的所有直接子元素。
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。
6.3 获取同级元素: 有许多有用的方法让我们在 DOM 树进行水平遍历:
siblings() 方法返回被选元素的所有同胞元素。
next() 方法返回被选元素的下一个同胞元素。
prev(), prevAll() 以及 prevUntil()
6.4 选定元素
三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素
first()//获取第一个元素 eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始,因此首个元素的索引号是 0 而不是 1
七.AJAX数据传输
7.1 $(selector).load(URL,data,callback);请求url返回数据进行加载
$(“#btn”).click(function(){
$(“#div”).load(“http://www.baidu",{"id":12},function(){});
});
7.2 Get/Post 请求
7.2.1 $.get(url,function{
get请求
})
7.2.2 $.post(url,data(json),function(){
post请求
});
7.3 总的Ajax请求
$.ajax({
type: “GET”, //请求类型
url: “test.json”, //url
data: {username:$(“#username”).val(), content:$(“#content”).val()}, //json传递数据
dataType: “json”, //返回的数据格式
success:function(data, textStatus)){ //成功的回调函数
},
error:function(XMLHttpRequest, textStatus, errorThrown){//失败的回调函数
}
});
九..Jquery对象的遍历和属性,常用的方法
(不推荐遍历方法,返回原生DOM对象不好处理)
9.1 返回Jquery对象返回的查询所包含元素的个数 size();
9.2 get(0) //返回的是Dom对象 不是Jquery对象
9.3 toArray()//返回的数组对象都是 Dom对象
(推荐遍历Jquery元素方法)
$(“#select”).each(function(){
$(this) //访问的是当前的Jquery对象
});
first() //获取第一个元素
last() //获取最后一个元素
is()//留下存在条件的元素
not();//删除符合条件的元素
add();//添加元素