jQuery基础学习(一)

一.jQuery语法

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例：

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有class="test"的所有元素

$("#test").hide() - 隐藏所有id="test"的元素

文档就绪函数：

$(document).ready(function(){
   --- jQuery functions go here ---
});

这是防止文档在完全加载(就绪)之前运行jQuery代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。如：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

二.jQuery选择器

选择器允许您对元素组或单个元素进行操作。

jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。

在HTML DOM术语中：

选择器允许您对DOM元素组或单个DOM节点进行操作。

jQuery元素选择器

jQuery使用CSS选择器来选取HTML元素。

$("p")选取<p>元素。

$("p.intro")选取所有 class="intro" 的<p>元素。

$("p#demo") 选取所有 id="demo"的<p>元素。

jQuery属性选择器

jQuery使用XPath表达式来选择带有给定属性的元素。

$("[href]") 选取多有带有href属性的元素。

$("[href='#']") 选取所有带有href值等于"#"的元素。

$("[href!='#']") 选取所有带有 href 值不等于"#"的元素。

jQuery CSS 选择器

jQuery CSS选择器可用于改变HTML元素的CSS属性。

示例：

把所有p元素的背景颜色更改为红色

$("p").css("background-color","red");

三.jQuery 事件

jQuery 是为事件处理特别设计的。

jQuery 事件函数

jQuery 事件处理方法是jQuery中的核心函数。

事件处理程序指的是HTML中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。

通常会把jQuery代码放到<head>部分的事件处理方法中：

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("button").click(function() {
				/* Act on the event */
				$("p").hide();
			});
		});
	</script>
</head>
<body>
	<h2>这是个小标题</h2>
	<p>如果您点击我，我会消失。</p>
	<p>点击我，我会消失。</p>
	<p>也要点击我哦。</p>
	<button type="button">Click me</button>
</body>
</html>

jQuery名称冲突

jQuery使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(), 帮助您使用自己的名称 (比如jq) 来代替 $ 符号。

结论：

由于jQuery是为处理HTML事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有jQuery代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把jQuery代码置于单独的.js文件中
如果存在名称冲突，则重命名jQuery库

jQuery事件

下面是jQuery中事件方法的一些例子：

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

jQuery基础学习(一)

猜你喜欢