锋利的jQuery：第一章认识jQuery

最新推荐文章于 2024-09-10 06:15:30 发布

iteye_17225

最新推荐文章于 2024-09-10 06:15:30 发布

阅读量78

点赞数

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_17225/article/details/82642380

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在页面引入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("选中");
				}
			});
		});

iteye_17225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
锋利的jQuery：第一章认识jQuery

在页面引入JQuery&lt;head&gt; &lt;script src="jquery-1.8.3.js" type="text/javascript"&gt;&lt;/script&gt;&lt;/head&gt; 第一个JQuery程序$(document).ready(function(){ alert("Hello Word"
复制链接

扫一扫