锋利的jQuery：第一章认识jQuery

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在网页中引入JQuery并展示基本用法，包括如何使用JQuery选择DOM元素及触发事件，还提供了简单的示例代码。

在页面引入JQuery

<head>
	<script src="jquery-1.8.3.js" type="text/javascript"></script>
</head>

第一个JQuery程序

$(document).ready(function(){
	alert("Hello Word");
});

1、网页中多有DOM结构绘制完成后就执行，可能DOM元素关联的东西还没有加载完成

2、能同时编写多个

3、简化写法

$(function(){
	alert("Hello jQuery");
});

DOM对象

var domObj = document.getElementById("id");//获得dom对象
var ojbHTML = domObj.innerHTML;//使用javascript中的属性

jQuery对象

$("#foo").html();//获取id为foo元素的html代码

等同于

document.getElementById("foo").InnerHTML;

jQuery对象转DOM对象

方式一：jQuery对象类似数组，通过[index]方式转成DOM对象

var $cr = $("cr");//jQuery对象
var cr = cr[0];//DOM对象

方式二：jQuery本身提供get(index)

var $cr = $("#cr");
var cr = $cr.get(0);

DOM对象转换jQuery对象

var cr = document.getElementById("cr");//DOM对象
var $cr = $(cr);//jQuery对象

一个选中checkbox就alert的例子

<input type="checkbox" id="cb"/>
$(document).ready(function(){//等待DOM对象加载完毕
			var $cb = $("#cb");//通过id获取jQuery对象
			$cb.click(function(){
				if($cb.is(":checked")){//jQuery方式判断
					alert("选中");
				}
			});
		});