JQuery小结

最新推荐文章于 2022-08-06 16:22:55 发布

zllaptx4869

最新推荐文章于 2022-08-06 16:22:55 发布

阅读量1.6k

点赞数 5

分类专栏：【HTML+JS】

本文链接：https://blog.csdn.net/zhangleilei4869/article/details/17467775

版权

【HTML+JS】专栏收录该内容

17 篇文章 0 订阅

订阅专栏

　　jQuery:轻量的javaScript库.

　　jQuery不需要配置，只需要下载以.js结尾的库就行了，然后把它放在html文档中的<head></head>中即可。

　　具体实现：<script src="下载好的js文件路径" type="text/javascript"></script>。

一、选择器

　　JQuery之所以强大，就是因为其强大的选择器。jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。

　　语法：

　　　jQuery([selector,[context]])

　　　　selector:用来查找的字符串

　　　　context:作为待查找的 DOM 元素集、文档或 jQuery 对象。

　　　简写：$()

　　分类：

　　　ID选择器：

　　　　$("#id") 如果需要转义用两个斜杠表示。

　　　　$("#myDiv"); 查找id为myDiv的元素

　　　　$("#foo\\:bar")：查找id为 foo：bar 的元素

　　　　$("#foo\\[bar\\]")：查找id为 foo [bar] 的元素

　　　　$("#foo\\.bar")：查找id为 foo.bar 的元素

　　　标签选择器：

　　　　$("标签名称");

　　　　$("div");获取所有div 标签

　　　　$("p");获取所有p标签

　　　类选择器：

　　　　$(".myClass");获取所有类名为myClass的类

　　　常见选择内容：

　　　　1 parent > child：匹配父元素下面所有子元素

　　　　　$("form > input") 获取form节点下面的input节点，不获取孙子节点的元素

　　　　2 prev + next：获取prev元素后面的next元素

　　　　　$("label + input")匹配所有跟在 label 后面的 input 元素

　　　　3 first last 获取匹配的第一个元素：

　　　　　$('li:first'); 获取第一个li

　　　　4 奇偶数：

　　　　　　even：匹配所有索引值为偶数的元素，从 0 开始计数

　　　　　　odd：匹配所有索引值为奇数的元素，从 0 开始计数

　　　　　　eq(index)：特定索引值得元素

　　　　　　gt(index)：大于给定索引值的元素

　　　　　　lt(index)：小于给定索引值的元素

　　　　5 包含指定文本：contains(text)

　　　　　　$("div:contains('John')")查找所有包含 "John" 的 div 元素

　　　　6 匹配含有特定元素的元素 has（）

　　　　　　$("div:has(p)").addClass("test");给所有包含p标签的div元素添加类名：test

　　　　7 包含特定属性的筛选

　　　　　　$("div[属性名称]")　

　　　　　　　[attribute=value]

　　　　　　　[attribute!=value]给定的属性不等于某些值

　　　　　　　[attribute^=value]给定的属性是以某些值开始的元素

　　　　　　　[attribute$=value]匹配给定的属性是以某些值结尾的元素

　　　　　　　[attribute*=value]匹配给定的属性是以包含某些值的元素

　　　　8 nth-child匹配其父元素下的第N个子或奇偶元素

　　　　　　　　　$("ul li:nth-child(2)")

　　　　　　　first-child 而此选择符将为每个父元素匹配一个子元素　　

　　　　　　　last-child 而此选择符将为每个父元素匹配一个子元素

示例：

在JQuery视频学习中，横纵向菜单的例子

$(document).ready(function(){
	//页面中的DOM已经装载完成时，执行的代码
	$(".main > a").click(function(){
		//找到主菜单项对应的子菜单项		
		var ulNode = $(this).next("ul");//next 找到主菜单下面所有ul的同辈菜单，也就是菜单一  菜单二  菜单三
		ulNode.slideToggle();  //设置显示效果：滚动显示  可以是数字或是字符串
		changeIcon($(this));
	});
	//鼠标移动到上面执行的函数：hover
	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
		changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp();
		changeIcon($(this).children("a"));
	});
});

/**
 * 修改主菜单的指示图标
 */
function changeIcon(mainNode) {
	if (mainNode) {
		if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
			mainNode.css("background-image","url('images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('images/collapsed.gif')");
		}
	}
}

二、事件函数　　　　　　　

　$(document).ready(function)当文档完成加载时，相当于windows load事件

　$(selector).click(function)单击事件

　$(selector).dblclick(function)双击事件

　$(selector).focus(function)获取焦点事件

　$(selector).mouseover(function)鼠标悬停事件

　$(selector).hover(function)鼠标移到所选择的的对象上面响应一个事件

　$(selector).one(type，function) 为所选择的的元素注册一个一次性事件

　　示例：

　　JQuery视频中可编辑表格的JQuery代码，里面用到了相应的事件函数

$(function(){
	//找到表格的内容区域中所有的奇数行
	//使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，
	$("tbody tr:even").css("background-color","#ECE9D8");
	//找到所有的学号单元格
	var numTd = $("tbody td:even");
	//给这些单元格注册鼠标点击的事件
	numTd.click(function() {	
		//找到当前鼠标点击的td,this对应的就是响应了click的那个td
		var tdObj = $(this);
		if (tdObj.children("input").length > 0) {
			//当前td中input，不执行click处理
			return false;
		}
		var text = tdObj.html(); 
		//清空td中的内容
		tdObj.html("");		
		//将文本框插入到td中
		var inputObj = $("<input type='text'>").css("border-width","0")
			.css("font-size","16px").width(tdObj.width())
			.css("background-color",tdObj.css("background-color"))
			.val(text).appendTo(tdObj);
		//是文本框插入之后就被选中
		inputObj.trigger("focus").trigger("select");
		inputObj.click(function() {
			return false;
		});
		//处理文本框上回车和esc按键的操作
		inputObj.keyup(function(event){
			//获取当前按下键盘的键值
			var keycode = event.which;
			//处理回车的情况
			if (keycode == 13) {
				//获取当当前文本框中的内容
				var inputtext = $(this).val();
				//将td的内容修改成文本框中的内容
				tdObj.html(inputtext);
			}
			//处理esc的情况
			if (keycode == 27) {
				//将td中的内容还原成text
				tdObj.html(text);
			}
		});
	});
});

三、常用属性

　toggleClass(class|fn[,sw])：如果存在（不存在）就删除（添加）一个类。

　attr(name|properties|key,value|fn)：设置或返回被选择元素的属性值。

　removeAttr(name)：顾名思义，移除被选择元素的属性值

　addClass(class|fn)：给选定元素添加类名

　removeClass([class|fn])：给选定元素移除类名

　text([val|fn])：所匹配元素的内容；

　html([val|fn])：取得第一个匹配元素的html内容。

　css(name|pro|[,val|fn])：获取匹配元素的样式属性

　　示例：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $("p").text("Hello world!");
  });
});
</script>
</head>
<body>
<img src="test.jpg"/>
<p>用例1</p>
<p>用例2</p>
<p>用例3</p>
</body>
</html>

四、常用效果

　　JQuery核心是写更少的代码，实现更多的功能，而JQuery封装好的效果函数很好的体现了这一点。

　　　show([speed,[easing],[fn]])：显示隐藏的元素

　　　hide([speed,[easing],[fn]])：隐藏显示的元素

　　　slideDown([speed],[easing],[fn])：向下滑动显示效果

　　　slideUp([speed,[easing],[fn]])：向下滑动隐藏效果

　　　fadeIn([speed],[easing],[fn])：淡入效果

　　　fadeOut([speed],[easing],[fn])：淡出效果

　　示例：　　

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>//引用js文件
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();//淡入 淡出效果
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>

<body>

<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里，使三个矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

</html>