JQuery入门 -- 01 -- API

最新推荐文章于 2025-03-12 20:29:34 发布

原创最新推荐文章于 2025-03-12 20:29:34 发布 · 174 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #Ajax #CSS #HTML #F# #ViewUI

JQuery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍jQuery的基本使用技巧，包括HelloWorld示例、DOM对象与jQuery对象的转换、选择器的使用、DOM操作方法、属性和样式的设置、遍历数组、事件绑定及解除绑定等。并提供了一个实用的中文API资源。

1、HelloWord

$(document).ready(function(){  
	alert("Hello Word!!!");
}); 
//或者更简单点：
$(function(){  
	alert("Hello Word!!!");
});

2、与DOM对象的转换：

//Dom转jQuery
var dom = document.getElementById("id");
var jq = $(dom);
alert(jq.html());

//jQuery转Dom
var jq = $("#id");
var dom = $(jq)[0];//是数组,判断的话:$(jq).length>0
alert(dom.innerHTML);

3、选择器

//1、基本选择器
//2、层次选择器
	$("div span")//选择<div>里所有<span>元素
	$("div>span")//同上
	$("div+span")//选择紧接在div元素后的span元素
	$("div~span")//选择div元素之后的所有span元素
//3、过滤选择器
	//a):基本过滤选择器
		$("#id:first")//（选取第一个元素）
		:last//（选取最后一个元素）
		:even//（选取索引是偶数的所有元素）
		:odd//（选取索引是奇数的所有元素）
		:eq(index)//（选取索引等于index的元素）
		:gt(index)//（选取索引大于index的元素）
		:lt(index)//（选取索引小于index的元素）
	//b):内容过滤选择器
	//c):可见性过滤选择器
		:hidden//选取所有不可见的元素（包括<input type="hidden" />、<div style="display:none">和<div style="visibility:hidden;">；若只选取<input type="hidden" />使用$("input:hidden")
		:visible//选取所有可见元素
	//d):属性选择过滤器
		[attribute]//选取拥有此属性的元素
			//<div></div><div id="test2"></div> -- $("div[id]") -- 得后者
	//e):子元素选择过滤器
	//f):表单对象属性过滤选择器
	//g):表单选择器
	
具体参考API选择器一节

4、操作DOM

//1、创建节点
	var $p=$("<p></p>");
	$p.text("一段文字"); 
	//or
	var $p=$("<p>一段文字</p>");  
//2、插入节点
//3、删除节点
	empty();//删除所有的子节点
//4、复制节点
	clone();

5、组件属性样式

//1、属性
	$("#imgId").attr("src");
	$("#imgId").attr("src","test.jpg");
	$("#btnId").val();//value值
	$("#btnId").val("value");
	$("#id").html();
	$("#id").html("");
//2、样式
	$("#id").css({border:'5px solid #9f0',backgroundColor:'yellow'});
	$("p").addClass("class");//类样式
	$("id").toggleClass("class1");//为匹配的元素切换类样式

6、遍历数组

$("#div label").each(
	function(i){
		alert(i + "  " + $(this).html())
	}
)
//or
$("#div label").each(fn);  
function fn(){
	//得到原始DOM对象
	alert(this.innerHTML)
}

7、事件

$("#btn").bind("click",function(event){
	$(this).unbind();//事件解除绑定
});
//or
$("#btn").click(function(event){
	//...
});
//hover(enter,leave)光标移动到元素上触发enter函数,移出元素时触发leave函数.
//toggle(fc1,fc2,fc3,fc4...)依次触发fn1,fn2,fn3...

8、动画

9、AJAX

API应有尽有！就是一些方法的调用,具体还是得看实际项目的需求。

分享一个中文API，很好用的