Jquery基础学习之-入门

最近段时间在阅读Jquery基础教程，本文主要总结Jquery学习开发环境的建立。

使用的开发工具：Dreamweaver 、Nodpad++;

使用Jquery版本：jquery-1.10.2 http://jquery.com/download/

开发web站点目录:

下面介绍如何引入Jquery源程序及Javascript代码：

在html文件的开头,title标签下面

<title>jquery入门</title>

<link rel= "stylesheet" href="01.css" type="text/css">

<script src="../jquery-1.10.2.js"/> </script>


<script src="1.2.js"></script>

基础示列代码：

通过使用 $(document).ready() 方法给div里面的内容添加样式

html-div代码如下：

     <div class="poem"><h3 class="poem-title">YKCOWREBBAJ</h3><div id="fred" class="poem-stanza"> <div>sevot yhtils eht dna ,gillirb sawT'</div><div>;ebaw eht ni elbmig dna eryg diD</div><div>,sevogorob eht erew ysmim llA</div><div>.ebargtuo shtar emom eht dnA</div></div></div>

Jquery代码如下几种写法：

第一种：

<pre name="code" class="javascript"> function addHighlightClass() {$('div.poem-stanza').addClass('highlight');}

$(document).ready(addHighlightClass);

第二种：

 $(document).ready(function() {$('div.poem-stanza').addClass('highlight');});

我们注意到第二种写法更加简洁，在$(document).ready方法中接收一个匿名函数

如果我们使用源生的javascript实现类似功能则要复杂的许多，源生javascript代码如下：

<!--原生JS添加样式-->
window.onload = function() {var divs = document.getElementsByTagName('div');for (var i = 0; i < divs.length; i++) {if (hasClass(divs[i], 'poem-stanza') && !hasClass(divs[i], 'highlight')) {divs[i].className += ' highlight';}}function hasClass( elem, cls ) {var reClass = new RegExp(' ' + cls + ' ');return reClass.test(' ' + elem.className + ' ');}
};

总结：本文主要介绍了Jquery开发环境的建立及通过一个小示列演示比较了通过Jquery实现一个功能通常比Javascript要简洁很多。

下一篇文章主要介绍,选择元素

以上内容及案例摘自Jquery基础教程(第四版)

Jquery基础学习之-入门相关推荐

零基础学习嵌入式入门以及项目实战开发【手把手教+国内独家+原创】
零基础学习嵌入式入门以及项目实战开发[手把手教+国内独家+原创] 独家拥有,绝对经典创科之龙嵌入式开发经典系列教程 [第一期] 主讲人: ...
JQuery基础学习
JQuery基础学习一.简介 JS框架框架使用原生的代码完成某些功能过于繁琐(代码量太大.冗余代码过多) 在开发过程中,大部分程序员会对这些复杂的代码进行封装封装之后,提高了代码的编程效率这 ...
零基础学习python入门书_零基础学习Python不可错过的5本书籍
原标题:零基础学习Python不可错过的5本书籍 Python作为目前编程开发的主流语言之一,在企业中的应用范围越来越广,广阔的发展前景吸引了很多小伙伴想要入行Python,下面小U就为大家介绍一下零 ...
c语言计算机培训,C语言计算机基础学习||新手入门必看
本次内容笔者将完全抛弃传统教学的形式,通过自己所学所闻得出来的心得,用通俗易懂的语言结合生活,来让大家更好的认识计算机编程,更好的入门计算机基础. 笔者也想用自己的论述告诉大家,专业知识有时会比较枯燥 ...
jquery基础学习记录
入口函数再昨天过了一遍JavaScript之后,我觉得有必要了解一下,jQuery的使用,我主要看的是菜鸟教程,也比较简单易懂,先暂时有个印象了解一下吧,后面需要用到也方便查,在实践中去深入学习. ...
jQuery基础学习【博学谷学习记录】超强总结，用心分享
jQuery 介绍 JavaScript 库即 library,是一个封装好的特定的集合(方法和函数)常见的JavaScript 库:jQuery.Prototype.YUI.Dojo.Ext JS. ...
【总结整理】JQuery基础学习---DOM篇
前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性加入到文档中流程中涉及 ...
jQuery基础学习笔记(上)
1.简介及语法认识jQuery 1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中. 2.什么事jQuery: jQuery是一个JavaScript函数库. 3 ...
JQuery基础教程：入门
JQuery能做什么 JQuery在线手册 1.取得文档中的元素如果不使用JavaScript库,遍历DOM(Document Object Model,文档对象模型)树,以及查找HTML文档结构中 ...

Jquery基础学习之-入门

Jquery基础学习之-入门相关推荐

最新文章

热门文章