浪漫骑士必胜

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

jQuery(内涵: jquery选择器)

jQuery就是把我们js常用的方法写到一个框架库里面.

这个是jQuery的官网,大家有时间看一下.

jquery.com

 

一、jquery的下载

 

二、加载jquery文件

然后刷新一下。

好,那么学习jquery能达到理解其编程的思想,做到能使用jquery进行常见网页效果开发是我们目前学习的目标。

參考書目就是:《锋利的jQuery》(高清扫描版-有书签)

jQuery在线API:http://api.jquery.com

 

什么是JavaScript框架库?

普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库。

常见的JavaScript框架库

Prototype【‘prəutə.taip 】、YUI、Dojo【’dodʒo ,豆粥】、ExtJS、jQuery等,这些库对JavaScript进行了封装,简化了开发。这些库是对JavaScript的封装,内部都是用JavaScript实现的。(联想SQLHelper)

 

三、新建ASP网站

 

四、ASP网站为我们加载的内容

jQuery:

jQuery就是JavaScript语法写的一些函数类,内部仍然是调用JavaScript实现的,所以并不是代替JavaScript的。使用jQuery的代码、编写jQuery的扩展插件等仍然需要JavaScript的技术,jQuery本身就是一堆JavaScript函数。

jQuery是最火的JavaScript库,已经被集成到VS2010了,得到了MS的支持,MS的Ajax toolkit和jQuery结合也是最方便,jQuery的扩展插件也是非常多。

jQuery的特点?Write Less,Do More

 

很好的解决了不同浏览器的兼容问题(IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome)

問題:一般出現問題的時候想想是不是css兼容性的問題。

对于不同控件具有统一的操作方式。

 

体积小(几十KB)、使用简单方便(Write Less Do More)

链式编程$("#div1").draggble().show().hide().fly() 、隐式迭代

插件丰富、开源、免费。

让编写JavaScript程序更简单、更强大!

很多功能沒有腫麼辦?到網上搜非常的多。個人寫的插件非常的多。

 

如果是vs2008版本,沒有智能提示,需要安裝sp1布丁。

VisualStudio 2008SP1下载地址:

http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&familyid=27673c47-b3b5-4c67-bd99-84e525b5ce61

再安裝 VS90SP1-KB958502-x86下载地址:

http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736

第三步再把

jquery-1.4.1-vsdoc.js【vs2008下,智能提示需要的文件】

所以推薦大家用vs2010

 

下面介紹下:jQuery中的顶级对象$

 

五、引进来

 

六、顶级对象的另外一种写法

接下來我們寫段小代碼

 

七、提示

我先不着急写jQuery代码,我们先看这样一个问题。

 

八、两个小问题

 

九、$(document)介绍

 

十、jq的准备ready事件

 

十一、window.onload与$(document).ready()的区别

 

十二、推荐写法

想用jq写window.onload怎么写?

 

十三、在jq里面调window.load

下面我们看下jquery中的$.map和$.each

 

十四、jquery中的$.map

 

十五、map方法的作用

看下map方法内部怎么返回这个函数?

 

十六、F12看下map内部怎么实现的?

 

十七、看jq源代码

当我们想用js写点东西,但不会写,可以看看jq中的方法是怎么实现的。这是一种很好的自学方法

 

十八、未写数组长度的情况

接下来我们看两个例题.

 

十九、两道map例题

 

二十、以前遍历的方法

 

二十一、调试each

 

二十二、each遍历键值对

下面看下用each遍历普通数组是什么样的值:

 

三十三、用each遍历普通数组

大家想一想这为什么使用return false 跳出循环呢?建议设个断点调试一下。

 

三十四、调试,明白为什么return false

接下来我们看下:jQuery中的trim()

 

三十五、$.trim

 

三十六、内部调用了正则

接下来我们看看,jquery对象和Dom对象的转换。

 

三十七、把dom对象转换为jquery对象

 

把dom对象转换为jquery对象演示

下面看下新的需求

 

三十八、把jquery对象再转换为dom对象的两种方式

再来说说jquery中的一些个方法:

.text()方法相当于innerText或textContent

.val("ddd")  没有参数表示获取,有参数表示设置值

.html("")/html()相当于innerHTML

简单说一下,待会我们用到哪个再详细说下。

 

Array(数组)对象有没有对应的jQuery对象?

数组本身就不是Dom对象。不存在与jQuery对象之间的转换。使用jQuery语句可以直接使用数组,就像$.each()或$.map();

 

补充:通过document.getElementsByTagName()或者document.getElementsByName()获取的返回值是一个类似于数组的值,但不是数组,没有数组特有的方法,比如reverse()等,类似于C#中的string可以看成是一个char数组,但是其实不是,string是对char数组的封装。

   

parseInt()\Array这些是不需要转换的。

 

下面我们重点说下jquery选择器

 

三十九、三种选择器介绍

三种选择器的演示

接下来我们看两个案例:

案例1:设置某个div中显示的内容,通过Id选择器

案例2:为某个按钮注册单击事件,单击的时候设置页面上所有的p标签中显示文字为“川川是狗狗”。//隐式迭代

 

四十、两道练习题的代码

 

两道练习题的演示

 

四十一、设置css样式

 

四十二、链式编程

传进去的值主要是看js怎么进行判断。

下面介绍下标签+类选择器

 

四十三、标签加类选择器

 

标签加类选择器演示

接下来说说多条件选择器

 

四十四、多条件选择器

接下来说说层次选择器

又分四种:

 

四十五:层次选择器四种代码

注意:选择器表达式中的空格不能多不能少。易错!过滤器与表单选择器时注意。

next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个)

nextAll();//当前元素之后的所有兄弟元素

prev();//当前元素之前的紧邻着的兄弟元素(上一个)

prevAll();//当前元素之前的所有兄弟元素

siblings();//当前元素的所有兄弟元素

接下来我们看两个案例:

 

四十六、案例1

 

案例1演示

 

四十七、案例2-评分控件代码

 

案例2-评分控件演示

下面,请大家判断下页面上的元素是否存在

 

四十八、报错的第一种情况

 

四十九、错误的第二种情况

 

五十、包装集

接下来再说下怎样通过jq来操作类样式css

 

五十一、通过jq来操作类样式css

接下来我们做个一点就“关灯”的功能。

 

 

五十二、“关灯”代码

 

开关灯及通过jq来操作类样式css演示

 

作者近期文章列表:

C#基础教程(完全免费,献给代码爱好者的最好礼物。注:本作者分享自己精心整理的C#基础教程,无任何商业目的。
希望与更多的代码爱好者交流心得,也请高手多多指点!!!)
三层 三层(一)
三层相关案例(及常见的错误)
三层实例(内涵Sql CRUD)
SQL数据库 ADO.net 数据库的应用图解一
数据库的应用详解二
ADO.NET(内涵效率问题)
面向过程,面向对象中高级 面向过程,面向对象的深入理解一
面向过程,面向对象的深入理解二
面向对象的深入理解三
winform基础 Winform基础
winform中常用的控件
面向过程 三种循环的比较
C#中的方法(上)
我们常见的数组
面向对象 思想的转变
C#中超级好用的类
C#中析构函数和命名空间的妙用
C#中超级好用的字符串
C#中如何快速处理字符串
值类型和引用类型及其它
ArrayList和HashTable妙用一
ArrayList和HashTable妙用二
文件管理File类
多态
C#中其它一些问题的小节
GDI+ 这些年我收集的GDI+代码
这些年我收集的GDI+代码2
HTML概述以及CSS 你不能忽视的HTML语言
你不能忽视的HTML语言2精编篇
你不能忽视的HTML语言3
CSS基本相关内容--中秋特别奉献
CSS基本相关内容2
JavaScript基础 JavaScript基础一
posted on 2012-11-08 08:28  小事好  阅读(3511)  评论(15编辑  收藏  举报