JQuery 菜鸟笔记(一)
什么是JQuery
JQuery是一个优秀的javascript类库,jQuery以其简洁、快速等优点征服了众多javascript开发者。jQuery使用户能更方便地处理DOM、events、实现动画效果,并且方便地为网站提供Ajax交互。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆javascript来调用命令了,只需定义id即可。(跟css有点类似)
它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
开始学习--要求
务必要理解Javascript
认识JQuery需要做的五件事
1.Find:找到HTML页面中的元素
2.Change:改变HTML的内容
3.Listen:根据用户的操作做出反馈,比如按下按钮
4.animate:在页面中使用动画效果
5.talk:与网络互交,如果不想刷新页面而改变页面内容
什么是Document Object Model
由浏览器生成的树状结构,从而能快速找到HTML中的元素,Document Object Model简称:DOM
我们键入了一个地址,浏览器就会从地址中接受HTML,就像这样吧内容一段一段的加载到DOM中,一收到元素,就在DOM中创建节点,也就是HTML中的<!DOCTYPE html>的下面<html>...</html>,可以说HTML是docunment的子节点,document就是HTML的父节点。
Function
为了用JQuery来操作DOM,我们把代码写到function中已达到目的,如: JQuery(<Code>); 改成JQuery(document);其中
document也就是DOM
Find
我们可以用选择器来找到DOM中的元素
<body>
<h1>Where do you wany to do?</h1>
</body>
我们要找到h1的元素,可
以这样写:Jquery("h1");简写可以这样写 $("h1");
Change
如何改变h1中的元素的值?我们首先获取到值,如:$("h1").text(); 这样就能获取到 “Where do you wany to do?”
改变:我们只需要将变化的值放到text的方法中就行了,如: $("h1").text("where to?"); 这样就能把DOM里面h1的text元素替换成"Where to?"
注意:HTML在浏览器中加载,可能JavaScript会在DOM加载完之前就运行了,这时候DOM是没有加载完的,这样h1元素可能不会Change的。
你要确定DOM在加载完之后在和HTML互交
Ready
在页面加载完之后,就会产生一个事件,也就是 准备好了 ,我们要注意这个事件,来保证在DOM加载完之后JQuery才开始运行,
我们可以这样写:
JQuery(doucment).ready(function(){<code>});
这样一旦整个页面加载完function里面的代码就会运行
最后Change代码应该这样写:
JQuery(doucment).ready(function(){$("h1").text("Where to?")});
这样整个页面加载完之后就会去寻找h1标签,改变h1的text
未完待续 2014-09-25
JQuery 菜鸟笔记(一)的更多相关文章
- jQuery初学者笔记 一
jQuery初学者笔记 一 Mirror王宇阳 by jQuery语法 jQuery语法是通过选取HTML元素,并对选取的元素进行操作 基础语法: 所有jQuery语句用"$"符号 ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- Nginx快速入门菜鸟笔记
Nginx快速入门-菜鸟笔记 1.编译安装nginx 编译安装nginx 必须先安装pcre库. (1)uname -a 确定环境 Linux localhost.localdomain 2.6. ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- jQuery整理笔记文件夹
jQuery整理笔记文件夹 jQuery整理笔记一----jQuery開始 jQuery整理笔记二----jQuery选择器整理 jQuery整理笔记三----jQuery过滤函数 jQuery整理笔 ...
- JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
随机推荐
- C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 适合大型企业信息化应用使用的角色权限管理体系
每个人外表看看都没什么大区别.但是内在的知识.处理问题的能力.解决问题的能力.头脑灵活性都会有很大的差距.软件组件也是一样,有些组件编写厉害,想问题深入,能处理的难题也多,构思巧妙. 通用快速开发平台 ...
- css3伪类温故知新
今天遇到一个问题.要求::after 和 ::before的 content:"content" 能够动态的进行变换,能被JavaScript操作. 百度了下,自己做了实验,发现有 ...
- Struts2 Interceptor学习
Interceptor的设计思想,其实是Spring里面的AOP思想,尽管Struts2又有自己的Interceptor但是,在实际开发中,用的较少,SSH整合之后你可以采用AOP事务处理进行拦截,更 ...
- FineUI(专业版)v2.6.0即将支持的两个新特性!
特性1:以一挡三,将 160 行代码缩减为 60 行的技巧! 为了更新单元格的编辑值,我们需要下面三个函数同时上阵: GetModifiedDict:修改的单元格值 GetDeletedList:删除 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- linux基础知识与技能1
1.隐藏文件与非隐藏文件Linux中:linux中隐藏文件特点是文件名以.开头,跟文件属性无关.在linux中查看隐藏文件用ls -a命令(普通显示ls)2.相对路径与绝对路径什么是路径:路径是用来标 ...
- python函数 与 函数式编程
「函数」一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,具体区别,我们后面会讲,编程中的函数在英文中也有很多不同的叫法.在BASIC中叫做subroutine(子过程或子程序), ...
- sqlalchemy入门记录
前言 发现翻译全文时间比较久,所以先整个简单的使用说明吧 安装SQLAlchemy pip install sqlalchemy 查看SQLAlchemy版本 In [1]: import sqlal ...
- Publishing failed with multiple errors 异常
Publishing failed with multiple errors 在使用eclipse发布项目时不能自动生成class文件,且无法启动调试的Tomcat服务.启动过程提示 以上 异常 解决 ...
- FMDB 数据库
iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.PlausibleDatabase.sqlitepers ...