`
java110eye
  • 浏览: 64960 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JQuery入门 -- 01 -- 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,很好用的


 

 

  • 大小: 260 KB
分享到:
评论

相关推荐

    jQuery入门---快速的,简洁的javaScript库

    《jQuery中文入门指南》是一本不错的参考资料,涵盖了从基础到高级的各种主题,对于初学者来说,是快速掌握jQuery的捷径。 总结,jQuery以其高效、简洁的特性,成为前端开发的重要工具。通过学习和熟练使用jQuery,...

    jQuery入门---设计思想

    总的来说,jQuery 的设计思想是简化JavaScript中的DOM操作,提供强大且易用的API,让开发者能够更专注于实现业务逻辑,而不是处理浏览器之间的兼容性问题和复杂的DOM遍历。通过学习和熟练掌握jQuery,开发者可以极大...

    jqueryAPI-1.4

    《jQuery API 1.4 入门指南及深入解析》 jQuery API 1.4 是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。本教程将深入探讨这个版本的jQuery API,帮助开发者们更好地...

    jQuery入门-1.0笔记

    jQuery入门笔记涵盖了JavaScript库jQuery的基本知识点,包括其核心概念、语法、选择器、事件处理以及页面元素操作等内容。在深入之前,我们先明确jQuery是一个高效的JavaScript库,它通过简化DOM操作、事件处理、...

    jQueryAPI-1.41

    《jQuery API 1.41 入门与深入探索》 jQuery API 1.41是JavaScript库jQuery的一个重要版本,它为开发者提供了强大的DOM操作、事件...学习和使用jQuery API 1.41的文档,如jQueryAPI-1.41.chm,是提升技能的关键步骤。

    jQueryAPI和JQuery基础入门ppt都在里面

    解压后里面有jQueryAPI-100214.chm、JQuery基础入门-1.ppt JQuery基础入门-1.ppt只要你看完后保证JQuery Web开发一定会 我就是看JQuery基础入门-1.ppt 入门的,我很喜欢这ppt所以分享给大家。

    jQueryAPI-100512帮助文档

    综上所述,《jQuery API-100512帮助文档》是学习和掌握jQuery的关键参考资料,它覆盖了从基础到高级的全方位知识,无论是新手入门还是进阶提升,都能从中受益。对于希望提升网页交互体验、提高开发效率的Web开发者来...

    jQueryAPI-1.41.zip

    &lt;script src="jQueryAPI-1.41.js"&gt; ``` 1.2 选择器:jQuery的核心在于选择DOM元素,如`$("#id")`选择ID为`id`的元素,`$(".class")`选择所有类名为`class`的元素。 1.3 DOM操作:`$(selector).html()`用于设置或...

    jqueryAPi-1.41.rar

    《jQuery API 1.41 入门指南与深度解析》 jQuery,一款著名的JavaScript库,因其简洁的语法和强大的功能而备受开发者喜爱。API(Application ...阅读jQueryAPI-1.41.chm文档,将帮助你更好地掌握这一神器的使用。

    JQuery教程---入门

    jQuery提供了丰富的API来操作DOM。例如,`append()`方法可以在元素内部添加内容,`before()`可以在元素前面插入内容,`after()`则在元素后面插入。另外,`html()`, `text()`, 和`val()`分别用于获取或设置元素的HTML...

    jQueryAPI-1.41.rar

    《jQuery API 1.41 入门指南与深度解析》 jQuery,作为一个广泛使用的JavaScript库,极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。本指南将聚焦于jQuery API 1.41版本,这个版本在当时具有重要的地位...

    jquery-easyui-EDT-1.4-build1-附带各种主题

    这个文件可能是对整个压缩包内容的详细介绍,包括如何使用 EasyUI、如何应用主题、如何进行开发调试等信息,对于初学者来说是很好的入门指南。 7. **jquery-easyui-1.4** 这是 jQuery EasyUI 的核心库文件,包含...

    Jquery教程-pdf

    #### 三、使用jQuery入门:Hello World示例 ##### 1. 下载jQuery类库 - **Minified版本**:适用于生产环境,经过压缩,文件体积小。 - 示例:`jquery-1.3.2.min.js` - **VSDoc版本**:用于Visual Studio环境,...

    jQuery入门汇总---无私奉献!

    **jQuery入门汇总** jQuery,一个轻量级的JavaScript库,以其简洁的API和强大的功能深受开发者喜爱。它简化了HTML文档遍历、事件处理、动画和Ajax交互等常见任务,大大提高了开发效率。本篇文章将深入浅出地介绍...

    最新JQuery类库 -- JQuery1.4

    - **简化代码**:通过jQuery的链式操作和丰富的API,开发者可以编写出简洁、可读性强的代码。 - **跨浏览器兼容**:jQuery 1.4在主流浏览器上的表现一致,消除了处理不同浏览器间差异的痛苦。 - **高效动画**:内置...

    jquery-easyui-EDT-1.4.2-build1.rar 包含中文文档

    jQuery EasyUI 官方API文档中文版 version 1.4.2 Build 1 作者:王锦阳 CSDN账号:richie696 EasyUI专题 http://download.csdn.net/album/detail/343 文档 EasyUI每个组件的属性,方法和事件。用户可以很容易地扩展...

    jquery-easyui-1.3.4 api

    - `readme.txt`:快速入门指南,提供了如何使用和配置jQuery EasyUI的基本信息。 - `locale`目录:包含各种语言的本地化文件,用于支持多语言界面。 在jQuery EasyUI 1.3.4的API中,我们可以找到如对话框(dialog)...

    jquery-easyui-1.3

    总结来说,jQuery EasyUI 1.3是一个强大且易用的前端开发框架,它通过简洁的API和丰富的组件,降低了前端开发的复杂度,提升了开发效率。无论你是初学者还是经验丰富的开发者,都可以从中受益,快速打造出美观且功能...

    Jquery1.2中文API,jquery-1[1].2.6.Mini,十五天学会Jquery

    二、15天学会jQuery入门教程 该教程分为5个阶段,每个阶段包括3天的学习内容: 1. **第1-3天**:理解jQuery基本概念,学习选择器和DOM操作,实现简单的元素选取和操作。 2. **第4-6天**:深入学习事件处理,包括...

Global site tag (gtag.js) - Google Analytics