陆、jq基础语法
一、概述：更加方便的处理html文档、events事件、动画效果和ajax交互等。
1、jq主要功能：
（1）访问页面框架的局部。
（2）修改页面表现
（3）更改页面的内容
（4）响应事件
（5）为页面添加动画
（6）与服务器异步交互
（7）简化常用的js操作
2、jq的优势：
a、jQuery实现脚本与页面的分离
在HTML代码中，我们还经常看到类似这样的代码：
<form id="myform" onsubmit=return validate();">
即使validate()函数可以被放置在一个外部文件中，实际上我们依然是把页面与逻辑和事件混杂在一起。jQuery让你可以将这两部分分离。借助于jQuery，页面代码将如下所示：
<form id="myform"> 接下来，一个单独的JS文件将包含以下事件提交代码：
代码如下:
$("myform").submit(function(){
...your code here
)}
这样我们可以实现灵活性非常强的清晰页面代码。jQuery让JavaScript代码从HTML页面代码中分离出来，就像数年前CSS让样式代码与页面代码分离开一样。
b、最少的代码做最多的事情
最少的代码做最多的事情，这是jQuery的口号，而且名副其实。使用它的高级
selector，开发者只需编写几行代码就能实现令人惊奇的效果。开发者无需过于担忧浏览器差异，它除了还完全支持Ajax，而且拥有许多提高开发者编
程效率的其它抽象概念。jQuery把JavaScript带到了一个更高的层次。以下是一个非常简单的示例：
代码如下:
$("p.neat").addClass("ohmy").show("slow");
通过以上简短的代码，开发者可以遍历“neat”类中所有的<p>元素，然后向其增加“ohmy”类，同时以动画效果缓缓显示每一个段落。开发者无需检查客户端浏览器类型，无需编写循环代码，无需编写复杂的动画函数，仅仅通过一行代码就能实现上述效果。
c、性能
在大型JavaScript框架中，jQuery对性能的理解最好。尽管不同版本拥
有众多新功能，其最精简版本只有18KB大小，这个数字已经很难再减少。jQuery的每一个版本都有重大性能提高。本篇文章讲的是jQuery未经过任
何优化的原始速度。如果将其与新一代具有更快
JavaScript引擎的浏览器(如火狐3和谷歌Chrome)配合使用，开发者在创建富体验Web应用时将拥有全新速度优势。
d、它是一个“标准”
之所以使用引
号，是以为jQuery并非一个官方标准。但是业内对jQuery的支持已经非常广泛。谷歌不但自己使用它，还提供给用户使用。另外戴尔、新闻聚合网站
Digg、WordPress、Mozilla和许多其它厂商也在使用它。微软甚至将它整合到Visual
Studio中。如此多的重量级厂商支持该框架，用户大可以对其未来放心，大胆的对其投入时间。
e、插件
基于jQuery开发的插件目前已经有大约数千个。开发者可使用插件来进行表单确
认、图表种类、字段提示、动画、进度条等任务。jQuery社区已经成长为一个生态系统。这一点进一步证明了上一条理由，它是一个安全的选择。而
且，jQuery正在主动与“竞争对手”合作，例如Prototype。它们似乎在推进JavaScript的整体发展，而不仅仅是在图谋一己之私。
f、节省开发者学习时间
当然要想真正学习jQuery，开发者还是需要投入一点时间，尤其是如果你要编写大
量代码或自主插件的话，更是如此。但是，开发者可以采取“各个击破”的方式，而且jQuery提供了大量示例代码，入门是一件非常容易的事情。我建议开发
者在自己编写某类代码前，首先看一下是否有类似插件，然后看一下实际的插件代码，了解一下其工作原理。简而言之，学习jQuery不需要开发者投入太多，
就能够迅速开始开发工作，然后逐渐提高技巧。
g、让JavaScript编程变得有趣
我发现使用jQuery是一件充满乐趣的事情。它简洁而强大，开发者能够迅速得到自
己想要的结果。它解决了许多JavaScript问题和难题。我过去曾讨厌JavaScript编程，但现在却非常喜欢它。通过一些基础性的改进，开发者
可以真正去思考开发下一代Web应用，不再因为语言或工具的差劲而烦恼。我相信它的“最少的代码做最多的事情”口号。
3、jq的缺点：
◆ 不能向后兼容。每一个新版本不能兼容早期的版本。举例来说，有些新版本不再支持某些selector，新版jQuery却没有保留对它们的支持，而只是简单的将其移除。这可能会影响到开发者已经编写好的代码或插件。
◆ 插件兼容性。与上一点类似，当新版jQuery推出后，如果开发者想升级的话，要看插件作者是否支持。通常情况下，在最新版jQuery版本下，现有插件 可能无法正常使用。开发者使用的插件越多，这种情况发生的几率也越高。我有一次为了升级到jQuery 1.3，不得不自己动手修改了一个第三方插件。
◆ 在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题，但却又确实是一个难于调试和解决的问题。
◆ jQuery的稳定性。它没有让我的浏览器崩溃，我这儿指的是其版本发布策略。jQuery 1.3版发布后仅过数天，就发布了一个漏洞修正版1.3.1。他们还移除了对某些功能的支持，可能会影响许多代码的正常运行。我希望类似修改不要再出现。
◆ 在大型框架中，jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。
如果你还在犹豫是否要学习一个JavaScript框架，并困惑于选择哪一个框架，那么我推荐你选择jQuery。这并非说其它框架不好，只是jQuery可能是最稳妥和最具回报性的选择。
4、jq小练习
<script>
window.onload=function(){
var oTable=document.getElementById("oTable");
for(var i=0;i<oTable.rows.length;i++){
if(i%2==0)
oTable.rows[i].className=="altrow";
}
}
</script>
<style>
.datalist{ border:1px solid #999; font-family:Arial, Helvetica, sans-serif; border-collapse:collapse; background-color:#CF9; font-size:14px;}
.datalist tr.altrow{ background-color:#96F;}
/*
定义和用法
summary 属性规定表格内容的摘要。
summary 属性不会对普通浏览器中产生任何视觉变化。
屏幕阅读器可以利用该属性。
*/
</style>
<body>
<table width="200" class="datalist" summary="" id="oTable" border="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
二、jq中的“$”
1、概述：提供了各种的功能，包括选择页面中的一个或者一类元素，作为功能的前缀、window.onload的完善、创建页面的DOM节点等。
2、选择器：选择页面中的一个或者一类元素，并且为用户处理了浏览器的兼容问题。
a.通用语法：
(1)$（selector）或者jQuery
(2)$（"#showDiv"）id选择器，相当于js中的document.getElementById("#showDiv").
(3)$（".SomeClass"）类别选择器，选择css类别为“SomeClass”的所有节点元素，要是想要实现js相同的效果，需要用for循环遍历整个dom
(4)$（"p:odd"）所有位于奇数行的<p>标签。几乎所有的标记都可以使用odd或者even来实现奇偶选择。
(5)$（"td:nth-child(1)"）所有表格的第一行，就是第一列，修改某一属性很有用。注意:nth-child()选择器是从1开始计数的，其他的选择器是从0开始计数的。
(6)$（"li>a"）子选择器，返回<li>标记的所有子元素<a>。
(7)$（"a[href$=pdf]"）选择所有超链接，并且将这些超链接的href属性以pdf结尾。
(8)$（"a：cheked"）过滤选择器，筛选出用户选择的项。
(9)$（"a：not(filter)"）反向选择器，可以进行反向的选择，filter参数可以是任意其他的过滤选择器，参数必须是过滤器。
b.功能函数前缀：
例如：在提交表单的时候，需要清除文本框中最前端和末尾的空格，jq提供了trinm()这个函数。
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
var sString = " 1234567890 ";
sString = $.trim(sString);
alert(sString.length);
</script>
c.解决window.onload函数的冲突
window.onload函数在页面中频繁使用，ready（）函数来解决冲突问题。
<script>
$(function(){
$("table.datalist tr:nth-child(add)").addClass("altrow");
})
</script>
或者
<script>
$(docunment).ready(function() {
$("table.datalist tr:nth-child(add)").addClass("altrow");
});
</script>
d.创建DOM元素：jq提供了insertAfter（）重写这个方法。
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){ //ready()函数
var oNewP = $("<p>这是一个感人肺腑的故事</p>"); //创建DOM元素
oNewP.insertAfter("#myTarget"); //insertAfter()方法
});
</script>
</head>
<body>
<p id="myTarget">插入到这行文字之后</p>
<p>也就是插入到这行文字之前，但这行没有id，也可能不存在</p>
</body>
e.自定义添加$
f.解决“$”的冲突
jQuery.noConflict()用过一次$便不可再用，再次出现$需要修改成
例如：$("div p")修改为jQuery("div p")。
4、管理选择结果
a.获取元素的个数：size（）方法，返回整数值。
<style type="text/css">
<!--
html{
cursor:help; font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
div{
border:1px solid #003a75;
background-color:#FFFF00;
margin:5px; padding:20px;
text-align:center;
height:20px; width:20px;
float:left;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
document.onclick = function(){
var i = $("div").size()+1; //获取div块的数目（此时还没有添加div块）
$(document.body).append($("<div>"+i+"</div>")); //添加一个div块
$("span").html(i); //修改显示的总数
}
</script>
</head>
<body>
页面中一共有<span>0</span>个div块。点击鼠标添加div：
</body>
b.提取元素：方括号加序号
index（）方法
<style type="text/css">
<!--
body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
div{
border:1px solid #003a75;
background:#fcff9f;
margin:5px; padding:5px;
text-align:center;
height:20px; width:20px;
float:left;
cursor:help;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//click()添加点击事件
$("div").click(function(){
//将块本身用this关键字传入，从而获取自身的序号
var index = $("div").index(this);
$("span").html(index.toString());
});
});
</script>
</head>
<body>
<div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
点击的div块序号为：<span></span>
get（）方法
<style type="text/css">
<!--
div{
border:1px solid #003a75;
color:#CC0066;
margin:5px; padding:5px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
height:20px; width:20px;
float:left;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
function disp(divs){
for(var i=0;i<divs.length;i++)
$(document.body).append($("<div style='background:"+divs[i].style.background+";'>"+divs[i].innerHTML+"</div>"));
}
$(function(){
var aDiv = $("div").get(); //转化为div对象数组
disp(aDiv.reverse()); //反序，传给处理函数
});
</script>
</head>
<body>
<div style="background:#FFFFFF">1</div>
<div style="background:#CCCCCC">2</div>
<div style="background:#999999">3</div>
<div style="background:#666666">4</div>
<div style="background:#333333">5</div>
<div style="background:#000000">6</div>
</body>
陆、jq基础语法的更多相关文章
- JQ基础语法
empty HTML 代码: <p>Hello, <span>Person</span> <a href="#">and perso ...
- Hive学习笔记：基础语法
Hive基础语法 1.创建表 – 用户表 CREATE [EXTERNAL外部表] TABLE [IF NOT EXISTS 是否存在] HUserInfo ( userid int comment ...
- JavaScript进阶 - 第2章 你要懂的规则(JS基础语法)
第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...
- js进阶 10-2 JQuery基础语法是什么
js进阶 10-2 JQuery基础语法是什么 一.总结 一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...
- Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
- iOS-----正则表达式的基础语法
正则表达式简单语法总结 一.什么是正则表达式 从概念上来说,正则表达式也是一门小巧而精炼的语言,它可以用来简化检索特定的字符串,替换特定字符等功能,有许多开发语言工具,都内嵌支持正则表达式.那么一个正 ...
- python之最强王者（2）——python基础语法
背景介绍:由于本人一直做java开发,也是从txt开始写hello,world,使用javac命令编译,一直到使用myeclipse,其中的道理和辛酸都懂(请容许我擦干眼角的泪水),所以对于pytho ...
- emmet 系列（1）基础语法
emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...
- Scala基础语法 （一）
如果你之前是一名 Java 程序员,并了解 Java 语言的基础知识,那么你能很快学会 Scala 的基础语法. Scala 与 Java 的最大区别是:Scala 语句末尾的分号 ; 是可选的. 我 ...
随机推荐
- Nginx Location指令配置及常用全局变量
./configure的含义 在实践安装nginx的时候,不知道./configure是什么意思,这里特地记录一下. 在linux中./代表当前目录,属于相对路径../代表上一级目录,属于相对路径/代 ...
- pywinauto进阶练习
case1.画图工具简单练习 #_*_coding=utf-8_*_ import time from pprint import pprint import logging from logging ...
- vue-cli 中eslint代码检查之过滤指定文件
在需要过滤的文件头部末尾分别添加:/* eslint-disable */,/* eslint-disable no-new */
- django与mysql实现简单的增删查改
模型定义 from django.db import models class Grades(models.Model): g_name = models.CharField(max_length=2 ...
- uni-app 路由navigate
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 公司最近在写APP应用到了uni-app 我在写的时 ...
- FreeMarker 语法 include 引用模板
一.java 代码 @Test public void testFreeMarker() throws Exception { //1.创建一个模板文件 //2.创建一个Configuration对象 ...
- Mysql 索引-2
关于MySQL索引的好处,如果正确合理设计并且使用索引的MySQL是一辆兰博基尼的话,那么没有设计和使用索引的MySQL就是一个人力三轮车.对于没有索引的表,单表查询可能几十万数据就是瓶颈,而通常大型 ...
- Java关键字整理之二
abstrac和interface 一.抽象类:abstract 抽象类就是为了继承而存在的,如果你定义了一个抽象类,却不去继承它,那么等于白白创建了这个抽象类,因为你不能用它来做任何事情.对于一个父 ...
- 17 facade
客户不须要内部的实现,仅仅须要知道有这个功能就好了,(最少知识原则)
- windows下PTAM的编译
前些日子在研究PTAM,以下首先说说PTAM的编译过程,我在XP几WIN7搭配vs2010中均已測试过,都能够执行. 首先下载编译PTAM所必须的库文件.下载地址我会给出 PTAM(PTAM.zip) ...