[JavaScript知识库]jQuery的常见使用

??

一、JQuery的介绍

JQuery的全程为：JavaScript和查询（Query），即是辅助JavaScript开发的库，它是JavaScript很多人使用的一种库.

听到全称是查询，所以顾名思义jQuery的核心是选择器,用于获取页面元素,同时jQuery提供了大量的高效方法。提高了开发的速度

在使用jQuery之前，我们需要先进行下载jQuery的js，以便于我们直接导入。网址为以下

jQueryjQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/当下载完成相应的js之后，我们可以进行导入到我们的工程当中，同时在我们需要用的网页当中进行导入jQuery的js,此时就完成了jQuery的基本操作。

二、jQuery的使用

使用的方法如下所述

1、通过jQuery获取id并且为相应的设置相关的样式，我们可以如下

//此时里面的id为html中的id，yourClass为css中你使用".yourClass"的样式
$("#id").addClass("yourClass");

2、通过jQuery获取class并且为其相应的设置相关的样式，我们可以如下

//此时里面的class为html中的class，yourClass为css中你使用".yourClass"的样式
$(".yourClassName").addClass("yourClass");

3、通过jQuery获取class和id并且为其相应的设置相关的样式，我们可以如下

//此时里面的class为html中的class,id为html中的id，yourClass为css中你使用".yourClass"的样式
$(".yourClassName,#id").addClass("yourClass");

4、通过jQuery获取后代选择器并且为其相应的设置相关的样式，我们可以如下

//此时里面的id1为html中的id,id2为html中的id，yourClass为css中你使用".yourClass"的样式
$("#id1 #id2").addClass("yourClass");

5、通过jQuery获取子代选择器并且为其相应的设置相关的样式，我们可以如下

//此时里面的id1为html中的id,id2为html中的id，yourClass为css中你使用".yourClass"的样式
$("#id1>#id2").addClass("yourClass");

6、通过jQuery获取相邻兄弟选择器并且为其相应的设置相关的样式，我们可以如下

//此时里面的id1为html中的id,id2为html中的id，yourClass为css中你使用".yourClass"的样式
$("#id1~#id2").addClass("yourClass");

7、当我们想去除相应的样式的时候，我们可以如下

//此时里面的id为html中的id，yourClass为css中你使用".yourClass"的样式
$("#id").removeClass("yourClass");

8、当文中拥有input文本框的时候，比如我们通过name来查询获取，我们可以如下获取其中的值9

//可以通过此方式获取name为'uname'的input里面的值
var v= $("input[name='uname']").val();

9、当我们想更换标签里面的文字时，我们可以如下，有两种方式

? ? ? ? 1、如想更换之后会进行html的转义，如下所示

//此时里面的id为html中的id
$("#id").html("<b>编程使我快乐</b>");

? ? ? ? 2、如想更换之后不会进行html的转义而显示文本，如下所示

//此时里面的id为html中的id
$("#id").text("<b>编程使我快乐</b>");

10、当我们想设置其中选中的元素为其设置样式，我们可以如下

//此时里面的id为html中的id
$("#id").css("background-color","yellow");

11、当我们想通过设置选择的元素为其设置点击事件返回样式，可以如下

//此时里面的id为html中的id
$("#id").on("click",function(){
	//$(this)是指当前事件产生的对象
	$(this).css("background-color","yellow");
});

11、当我们想通过设置选择的元素为其设置键盘事件返回样式，可以如下

//其中的32为ASCII中对应的元素
$("input[name='uname']").keypress(function(event){
	if(event.keyCode==32){
		$(this).css("color","red");
	}
});

12、当我们想进行查找属性值时，我们可以如下

//1、此为获取含有baidu的href的从而获取href的里面网址
var href_attr=$("a[href*='baidu']").attr("href");
//2、此为获取等于baidu的href的从而获取href的里面网址
var href_attr=$("a[href='baidu']").attr("href");
//3、此为获取开头是baidu的href的从而获取href的里面网址
var href_attr=$("a[href^='baidu']").attr("href");
//4、此为获取结尾是baidu的href的从而获取href的里面网址
var href_attr=$("a[href$='baidu']").attr("href");

12、当我们想进行修改属性值时，我们可以如下

//此为把含有百度的网址的href改为http://www.baidu.com
$("a[href*='baidu']").attr("href","http://www.baidu.com");

总而言之，这就是jQuery的常见方法