jQuery入门学习笔记--初学
2010-06-29 17:47
453 查看
大家都知道,jQuery现在是一个很流行的JS框架,可以帮助菜鸟级别的js开发人员轻易开发。现在我把我的学习笔记记录一下:
1.引用jQuery框架:
开始我认为就像引用css文件一样引用jQuery,使用link标签,但是我错了。正确的引用方式是:
<script language="javascript" src="jquery-1.4.2.min.js" type="text/javascript"/>。我用的是jquery1.4版本的。这里提供一个下载地址:http://jquery.com/
2.利用jQuery调用标签对象
这里有很多种调用的方法:个人认为比较常用的分为这几种:
1.$("#id")通过id获取对象
2.$("a") 所有a标签对象
3.$("span,p,div")选取多个html标签对象
4.$("form>div")选取form的子标签div, 如果还要继续选择div的子标签,可以这样写:$("form>div p"),这样就是选取div的子标签p
很多博客都有这方面的介绍,本人仍在继续学习中,参考网站: jQuery的入门简介http://www.soidc.net/articles/1183730975605/20071017/1213992439055_1.html
3.jQuery即可执行的方法
在以前学习JavaScript的时候,如果要页面进行加载就执行页面的脚本的代码,只需要把所要执行的代码直接放在<script>的标签下,但注意不要放在function里面,因为在JavaScript中function里面的东西需要调用才会执行。现在来看一下著名的:“Hello,Word!”。以下是这段代码:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
上面一段代码所要实现的功能就是:一但点击页面的 a标签(超链接)。就会弹出一个“Hellow,word!”的消息框。这段代码是通过一个 function()方法体函数调用的。由此联想到,是不是所有要加载时就要实现的脚本都必须按照以下的模型:
$(document).ready(function() { //实现的函数体 });
进过验证,如果我们在页面加载的时候要把一段名为“ok” 的<div>添加背景色。如代码:
$("#ok").css({"background-color":"#3a6ea5"});
如果要实现效果,就必须按照上面的模式来执行这段代码 ,如:
$(document).ready(function() {
//实现的函数体
$("#ok").css({"background-color":"#3a6ea5"});
});
直接把上面的代码放在<script>标签中就会报错,不行大家可以试一下。当然,我们不调用JQuery库函数,在<script>标签中直接书写JavaScript代码就不会报错。
以上是我学习JQuery一段笔记代码,希望能和大家分享一下,如果有错,望兄弟们提出来,大家共同学习,共同进步!
1.引用jQuery框架:
开始我认为就像引用css文件一样引用jQuery,使用link标签,但是我错了。正确的引用方式是:
<script language="javascript" src="jquery-1.4.2.min.js" type="text/javascript"/>。我用的是jquery1.4版本的。这里提供一个下载地址:http://jquery.com/
2.利用jQuery调用标签对象
这里有很多种调用的方法:个人认为比较常用的分为这几种:
1.$("#id")通过id获取对象
2.$("a") 所有a标签对象
3.$("span,p,div")选取多个html标签对象
4.$("form>div")选取form的子标签div, 如果还要继续选择div的子标签,可以这样写:$("form>div p"),这样就是选取div的子标签p
很多博客都有这方面的介绍,本人仍在继续学习中,参考网站: jQuery的入门简介http://www.soidc.net/articles/1183730975605/20071017/1213992439055_1.html
3.jQuery即可执行的方法
在以前学习JavaScript的时候,如果要页面进行加载就执行页面的脚本的代码,只需要把所要执行的代码直接放在<script>的标签下,但注意不要放在function里面,因为在JavaScript中function里面的东西需要调用才会执行。现在来看一下著名的:“Hello,Word!”。以下是这段代码:
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});
上面一段代码所要实现的功能就是:一但点击页面的 a标签(超链接)。就会弹出一个“Hellow,word!”的消息框。这段代码是通过一个 function()方法体函数调用的。由此联想到,是不是所有要加载时就要实现的脚本都必须按照以下的模型:
$(document).ready(function() { //实现的函数体 });
进过验证,如果我们在页面加载的时候要把一段名为“ok” 的<div>添加背景色。如代码:
$("#ok").css({"background-color":"#3a6ea5"});
如果要实现效果,就必须按照上面的模式来执行这段代码 ,如:
$(document).ready(function() {
//实现的函数体
$("#ok").css({"background-color":"#3a6ea5"});
});
直接把上面的代码放在<script>标签中就会报错,不行大家可以试一下。当然,我们不调用JQuery库函数,在<script>标签中直接书写JavaScript代码就不会报错。
以上是我学习JQuery一段笔记代码,希望能和大家分享一下,如果有错,望兄弟们提出来,大家共同学习,共同进步!
相关文章推荐
- jQuery入门学习笔记--初学2
- jQuery学习笔记 - 基础知识扫盲入门篇
- jQuery入门学习笔记----第一章 jQuery开发入门
- Android 初学入门代码注释 学习笔记001 16.03.18
- jQuery学习笔记 - 基础知识扫盲入门篇
- JavaScript学习笔记8-jQuery入门介绍、css选择器复习
- jQuery入门学习笔记----第二章 jQuery选择器
- jQuery学习笔记(一):入门
- java 从零开始,学习笔记之基础入门<Jquery>(四十三)
- Jquery学习笔记——第一章 Jquery入门及基础语法
- jQuery学习笔记1——入门
- jQuery入门级学习笔记及源码,很好很强大的jQuery
- jQuery学习笔记之入门
- Hibernate学习笔记--第一篇 初学入门第一个例子
- jQuery入门基础知识学习笔记
- jQuery-基础入门 学习笔记一
- jQuery 入门级学习笔记及源码
- jQuery 学习笔记 之二 附: jQuery入门指南教程列表
- jQuery学习笔记(一):入门
- jquery入门学习笔记(1)