jQuery常用方法,事件,属性简介

原文: 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();//添加元素