`

Jquery 入门知识

阅读更多

<div class="iteye-blog-content-contain" style="font-size: 14px">

    1、JQuery的优点:

1)体积小(导入的js文件小的有50多KB,大点的一百多KB);

2)速度快(Js和JQuery 整体的速度相比,JQuery的速度要快于js);

3)屏蔽浏览器之间的差异(例如:js写ajax时要判断一下浏览器);

4)运用广泛有很多插件支持(例如Tree插件);

5)强大的dom搜索功能;

6)支持ajax

2、简述一下常见的几个js框架:

1)domj、prototype:这两个框架比较早,现在用的不多了。

2)extjs:它主要是可以把网页做成像windows 的界面一样,现在用的也不少。

3)dwr(ajax) :主要倾向于ajax,本人用不习惯。

3、js 的几种获取标签的方式:

1)id   document.getElementById();

2)tag   document.getElementByTagName();

3)name document.getElementByName();

4、JQuery的onload事件:

 js写法:

 

window.onload=helloworld;

function helloworld(){

alert('hello world');
}
Jquery 写法 
$( helloworld);

function helloworld(){

alert('hello world');
}
 
JQuery通常的写法匿名方法 
$(function(){
alert('hello word')
});
 

 5、Jquery 的数组创建和遍历:数组的创建时用中括号“[  ]”,each 方法相当于java中的静态方法,两个参数一个是数组的序号;一个是callback 回调,也就是一个类似java的一个匿名内部类,在里面做操作。 

数组 
var arr=["a","b","c"];
$.each(arr,function(index,value){
alert(index+" "+value);
});

 6、Map的创建和遍历:map的遍历和数组的遍历很像。

map
var map={1:"a",china:"b",3:"c"};
$.each(map,function(key,value){
   alert(key+" "+value);
});

alert(map.china); //当key是字符串时,可以用这中方法获取map的值。key是数 值型的不能这样
alert(map[1]);// 当key是数值型的时候这样获取map的值。
  

 7、创建js 对象:定义三个人的数组,遍历数组打印数组信息。

js对象 
var user={id:1,name:"admin",age:18}//创建一个user对象

var users=[
{id:1,name:"admin",age:18},
{id:2,name:"admin1",age:88},
{id:3,name:"admin2",age:98}
];
$.each(users,function(index,user){
alert(user.id+" "+user.name+" "+user.age);
});

 8、用jquery改变页面的样式:选择器:. class、#id 、element 例子:标签的序号是从0开始

 
$(function(){
$("#a").css("color","red");//id="a" 的标签
$(".b").css("color","green"); class=“b”的标签
$("p").css("color",blue); 标签P的
});

 

 

$("p:not(:eq(1))").css("color","white");//p标签不等于第二行的样式改为白色。

$("tr:even").css("background-color","red");//tr标签的基数行背景为红色。
$("tr:odd").css("background-color","green");偶数行
$("tr:lt(3)").css("background-color","pink")前三行为粉色

 9、对多个复选框的操作:this当前对象。

 
function selectAll() //复选框全选。
$("input[type=checkbox][name=music]").attr("checked",true);
}

function selectNone(){//
$("input[type=checkbox][name=music]").attr("checked",false);
}
function selectOther(){
$("input[type=checkbox][name=music]").each(function(){
var flag = $(this) .attr("checked"); //获取值和set值都是attr
$(this).attr("checked",!flag);// this 是遍历到当前节点
});
}

 10、这是一个级联选择,有父节点,子节点。

 

    

 11、获取评论信息放到下面的li中

 


 

12这是对图片的操作:

 


 

13.常见的几种表单属性的值的获取和重置:

 



 



 

14、Ajax例子:常见注册页面用户名:是否能用。这是一个和struts整合的需要配置action的。

      这是一个参数的例子。



 



15、这是一个请求,返回一个json对象。

 

 

 

 

 

 

 

</div>

 

  • 大小: 10.3 KB
  • 大小: 107.9 KB
  • 大小: 60.9 KB
  • 大小: 145.7 KB
  • 大小: 120.5 KB
  • 大小: 49.1 KB
  • 大小: 181.8 KB
  • 大小: 60.4 KB
  • 大小: 171.1 KB
分享到:
评论

相关推荐

    JQ.docx(jquery入门知识)

    JQ.docx(jquery入门知识)

    jquery入门小知识

    jquery入门介绍 和常用方法和命令 替换类及替换方法

    jQuery入门知识简介

    到目前为之jQuery已经发布到1.4.2版本,而在这之前的一个星期他们刚发布1.4版本,看看他的各个版本的 发布时间 ,不难发现他的飞速发展,每个月都在更新版本;而且不断有人开发出新的 jQuery插件 ,最近又推出了 ...

    jquery基础知识总结

    详细的jquery基础知识总结 jQuery

    jquery入门基础知识

    该文档一开始就介绍了jquery与javascript的关系,轻松让你走进jquery世界,有了jquery,web开发更加简单了,相信你会喜欢上jquery的

    jQuery入门-1.0笔记

    jQuery入门的基本知识点整理,包括jQuery的基本语法,jQuery选择器,jQuery事件,jQuery效果,jQuery遍历,jQuery操作页面元素等等的基本内容。

    jQuery Mobile快速入门完整版.pdf + 所有源码

    作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...

    JQuery 入门代码经典

    JQuery 入门代码经典,本案例是授课代码实战,精讲各知识点内容,最后附上综合案例3个,很好的入门代码,欢迎顶起!

    JQuery 入门PPT

    JQuery入门的PPT从基础讲起,详细的描述了JQuery的一些入门知识

    jquery mobile快速入门

    作为jquery mobile的入门级读物,《jquery mobile快速入门》以示例方式讲解了jquery mobile的基本知识和核心特性,内容系统全面,便于理解。 《jquery mobile快速入门》总共分为10章,内容包括jquery mobile的基础...

    JQUERY快速学习

    jquery入门知识快速掌握,精简,实用

    jQuery Mobile快速入门

    作为jQuery Mobile的入门级读物,《jQuery Mobile快速入门》以示例方式讲解了jQuery Mobile的基本知识和核心特性,内容系统全面,便于理解。 《jQuery Mobile快速入门》总共分为10章,内容包括jQuery Mobile的基础...

    jQuery从入门到精通案例

    jQuery框架所有知识,实际案例,代码,包括选择器,异步请求事件处理等

    JQuery知识框架

    JQuery的知识框架,帮助入门前端的同学学习JQuery,构建JQuery知识网络;适合入门级选手,使用xmind打开

    jQuery中文入门指南

    jQuery中文入门指南,详细介绍jQuery的各个知识点

    jQuery详细入门教程

    js基础知识,jQuery详细入门教程

    Jquery 入门 例子代码详细介绍

    Jquery 初学知识,很不错的,一看就懂,代码实列,粘贴复制即可完成很好的效果。

Global site tag (gtag.js) - Google Analytics