Jquery

 有没有专门记软件编程笔记的像记事本一样的程序。

 

 

JQuery编程

 课前说明

 内容：掌握JQuery编程思想，使用JQuery进行常见网页效果开发。

  目标：能够使用JQuery开发常见网页效果

  参考书：《锋利的JQuery》

 

  1.JQuery简介.avi

   JQuery简介

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

JQuery等，这些库对JavaScript的封装，也就是咱们调用JQueryd的一句函数，JQuery内部这句函数帮我们调用JavaScript中的代码几十句，因为JQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的，使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术，JQuery是最火的JavaScript库，已经被集成到VS2010了，得到了MS的支持，MS的Ajax toolkit

和JQuery结合也是最方便，JQuery的扩展插件也是非常多。

 

  JQuery简介

  JQuery能做什么。

  JQuery的优点：尺寸小、使用简单方便（Write Less，Do More。链式编程、隐式迭（die二声）代（自动对于多个元素进行隐式迭代方法调用））、屏蔽浏览器差异跨浏览器兼容性好（IE 6.0，FF 2+，Safari 3.0+，Opera 9.0+，Chrome）、插件丰富、开源、免费。

  VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，VS008需要安装VisualStudio和VS90SP1-KB958502-x86补丁会更强更好用，下载地址见备注。然后引用jquery-1.4.1.js,jquery-1.4.1-vsdoc.js放到同目录下，不需要在页面引用。

 

  vsdoc是VS2008sp1以后增加的一个技术，将js文件对应的vsdoc（相当于js库提供的方法的说明库.）放到和js一起，就会有这个第三方js的自动提示功能。

 

  简单的JQuery

  $(document);ready(function(){

   alert("加载完毕!");

   });

   和onload类似，但是onload只能注册一次（没有C#中的+=机制），后注册的取代先注册的，而ready则可以多次注册都会被执行。

  JQuery的ready和Dom的onload的区别：onload是所有Dom元素创建完毕、图片、CSS等都健在完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在

JQuery中也可以用$(window).load()来实现onload那种事件调用的时机。

 

 

   3.JQuery的内置函数.avi

   

   $.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组。

  例子，得到一个元素值是原数组二倍的新数组。

  var arr={3,5,9};

  var arr2=$.map(arr,function(item){return item*2;});联想C#委托的例子，函数式编程。

  $.map不能处理Dictionary风格的数组。

  $.each(arr,function(key,value){alert(key+"="+value);});如果是普通风格的数组，则key的值是序号。

  还可以省略function的参数，这时候用this可以等到遍历的当前元素；

  var arr={3,6,9};

  $.each(arr,function(){alert(this);});

  普通数组推荐用无参，用dict风格的就用key、value。

 

 

  JQuery对象、Dom对象

  JQuery对象就是通过JQuery包装Dom对象后产生的对象：

  alert($('#div1').html())

  Dom对象要想通过JQuery进行操作，先要转换为JQuery对象。

  $('#div1').htm()等价于：document.getElementById("div1").innerHTML;

 

   $("#div1")得到的就是JQuery对象，JQuery对象只能调用JQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用JQuery对象的方法，所以alert($('#div1').innerHTML是错的，因为innerHTML是Dom对象的属性。

 

   Array是JS语言本身的对象，不是Dom对象，因此不需要转换为JQuery对象才能用。

   

   将Dom对象转换为JQuery对象的方法，$(dom对象）；当调用JQuery没有封装的方法的时候必须用Dom对象，转换方法：var domobj=jqobj[0]或者var domobj=jqobj.get(0)

 

 

   jQuery修改样式：$("#div1").css("background","red");获得样式$("#div1").css(("background");修改value:$("#un").val("abc"),获得value:$("#un").val(),类似的获得、设置innerText、innerHTML用text()何html()

 

 

 

  5.JQuery选择器.avi

  JQuery选择器

  jquery选择器用于查找满座条件的元素，比如可以用$("#控件Id")来根据控件id获得控件的JQuery对象，相当于getElementById;

  $("#div1").html("<font color=red>hello</font>")

   $("TagName")来获取所有指定标签名的JQuery对象，相当于

getElementsByTagName;

   $(function(){

    $("#btnClick").click(function(){

      $("p").html("我们都是p");

     

      });

   });

 

 

    JQuery选择器2

    css选择器，同时选择拥有样式的多个元素：

      <style type="text/css">

      .test{ background-color:Red }

    </style>

 

    <script type="text/javascript">

        $(function () {

            $(".test").click(function () {

                alert($(this).text());

            });

        });

    </script>

    <p class="test">test1</p>

    <p class="test">test2</p>

    <p class="test">test3</p>

 

 

 

 

     JQuery选择器3

  多条件选择器：$("p.div.span.menuitem"),同时选择p标签、

div标签和拥有menuitem样式的span标签元素。

   注意选择器表达式中的空格不能多不能少。易错点！！！

   层次选择器：

  （1）$("div li")获取div下的所有li元素(后代，子、子的子......)

   (2)$("div > li")获取div下的直接li子元素

  （3）$(".menuitem+div")获取样式名为menuitem之后第一个div元素（不常用）

  （4）$(".menuitem~div")获取样式名为menuitem之后所有的div元素（不常用）

   

   JQuery的迭代

 

   如何判断对象是否存在，JQuery选择器返回的是一个对象数组，调用text（）、html（）、click（）之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：

  if($("#btn1").length<=0){

   alert("id为btn1的元素不存在！！！");

   

   }

 

 

   7.节点遍历

   节点遍历：

   next()方法用于获取节点之后的挨着的第一个同辈元素，$(".menuitem").next("div").nextAll()方法用于获取节点之后的所有同辈元素，$(".menuitem").nextAll("div")

   siblings()方法用于获取所有同辈元素，

   $(".menuitem").siblings("li")

   案例：选中的p变色

   案例：评分控件.

   节点遍历是什么意思？、？？？？？？？

   8.Jquery连式编程播放不了。

 

   链式编程

   高亮选中项，给所有有menuitem这个样式的蒜素添加click监听事件，当click的时候，向被 点击的元素添加highlight这个样式，然后其兄弟节点(siblings)中移除highlight风格。

  <style type="text/css">

   .menuitem{}

 

 

   基本过滤选择器

   :first选取第一个元素。$("div:first")选取第一个<div>

    :last选取最后一个元素。$("div:last")选取最后一个<div>

    :not(选择器）选取不满足"选择器"条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>:even、：odd，选取索引是奇数、偶数的元素：$("input:even")选取索引是奇数的<input>

    :eq(索引序号)、:gt(索引序号)、:lt(索引序号)选取索引等于、大于、小于索引序号的元素，比如$("input:lt(1)")选取索引小于1的<input>

   $(":header")选取所有的h1......h6的元素

   $("div:animate")选取正在执行动画的<div>元素。

   

   基本练习：

   案例1:表格的奇数行是黄色背景。第一行是表头，所以显示大字体(fontSize=20),最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻大的字体（18）

   案例2：用Dom实现：用JQuery实现。对比差异！！

   

   案例

   案例：表格隔行变色

   案例：前三名粗体显示

   不仅可以使用选择器进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第三个参数为相对的元素

 

   案例:修改点击行的所有td的背景色

   练习：图片版评分控件

   练习：单选超链接。

 

   10.JQuery过滤选择器2.avi

   11.Each.avi

  12.JQuery表单选择器.avi

   这三个视频都播放不了。

   13.JqueryDom操作

   1.使用html()方法读取或者设置元素的innerHTML:

  alert("a:first").html());

 $("a:first").html("hello");

 2.使用text()方法读取或者设置元素的innerText:

  alert($("a:first").text());

  $("a:first").text("hello");

  3.使用attr()方法读取或者设置元素的属性：对于JQuery没有封装的属性用attr进行操作。

  alert($("a:first").attr("href"));

   $("a:first").attr("href","http://www.rupen.com");

  4.使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。

 

 

   动态创建Dom节点

  使用$(html字符串)来创建Dom节点，并且返回一个JQuery对象，然后调用append等方法将新创建的节点添加到Dom中：

  var link=$("<a href='http://www.baidu.com'>百度</a>");

  $("div:first").append(link);

 

  $()创建的就是一个JQuery对象，可以完全进行操作

  var link=$("<a href='http://www.baidu.com'>百度</a>");

   link.text("百度");

  $("div:first").append(link);

  练习：动态加载网站列表.动态分页。

  append方法用来在元素的末尾追加元素。

  preend，在元素的开始添加元素。

  after，在元素之后添加元素（添加兄弟)

  before:在元素之前添加元素（添加兄弟）.

   

  14.JQuery练习说明.avi

  如果报错"例外被抛出"等，很可能是选择器表达式有问题，比如单词拼写错误、加了不必要的空格等。val是方法不是属性。JQuery是完全按照JavaScript的语法写出来的JavaScript函数库，没有任何的魔法，任何看似怪异的写法都是很合法的JavaScript语法。JQuery就是一堆写好的JavaScript函数库而已。最好不要dom/JQuery方式混着用。

  案例：点击一个按钮，被点击的按钮显示"呜呜",其他按钮显示"哈哈".

  案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数（btn.disable=true)

  练习：加法计算器。两个文本框中输入数字，点击[=]按钮将相加的结果放到第三个文本框中。

  练习：美女时钟。

 

 

  练习：无刷新评论。

  <table>

    <tr><td>猫猫:</td><td>沙发耶!</td></tr>

  <table>

 昵称：<input type="text"/><br/>

 <textarea></textarea><br/>

 <input type="button"value="评论"/>

 

 

 案例1.创建三个输入文本框，当光标离开文本框的时候文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus,焦点离开控件的事件是onblur.

 

  练习3：放若干文本框。获得焦点的文本框黄色背景，其他控件背景颜色还原。

   思路：1.监听所有input的onfocus事件-->将背景设置为黄色；监听所有的input的onblur事件->将背景设置为白色。

 

   练习4.：点击表格行，被点击的行高亮显示（背景是黄色，其他行白色背景。）。监听每个tr的onclick事件，将点击的背景设置为黄色。其他的设置为白色背景。

 

 

   18.节点操作.avi

  替换节点：

  $("br").replaceWith("<hr/>");

  将<br/>替换为<hr/>

 

 

 

  包裹节点

  wrap()方法用来将所有元素逐个用指定标签包裹：

  $("b").wrap("<font color='red'></font>")将所有粗体字红色显示

 

 

   19.样式操作

   获取样式 attr("class"),设置样式attr("class","myclass"),追加样式addClass("myclass"),移除样式removeClass("myclass"),切换样式(如果存在样式则去掉样式，如果没有样式则添加样式)toggleClass("myclass"),判断是否存在样式：

hasClass("myclass")

   案例：网页开关灯的效果

  练习：给body设置body{filter:Gray;}这个style就可以让网页变为黑白显示，做切换黑白效果的按钮。

  点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。监听每个tr的click事件，将点击的背景设置为黄色，其他的设置为白色背景。颜色定义为样式。

  练习：聚焦控件的高亮显示 颜色定义为class样式

  练习：搜索框效果。 焦点放入控件，如果文本框中的值是"

请输入关键词",那么将文本清空，并且颜色设置为黑色，如果焦点离开控件，如果文本框中是空值，那么将文本框填充为"请输入关键词",颜色设置为灰色(Gray).定义为Class样式.

 

  21.IEcollection介绍

  安装IEcollection不用在安装IEtester。

 

 

  23.RadioButton操作.avi

 

  RadioButton操作

  取得RadioButton的选中值

 $("input[name=gender]:checked").val()

     <input id="Radio2" checked="checked" name="gender" type="radio" valu="男" />男<input id="Radio1" checked="checked" name="gender" type="radio value="女"/>女<input id="Radio3"

      checked="checked" name="gender" type="radio"

 value="未知"/>未知</p>

 

  设置RadioButton的选中值：

  $("input[name=gender]"}.val["女"]);

  或者

  $(":radio[name=gender]").val(["女"]);

  注意val中参数的[]不能省略。

 

   RadioButton操作2

  对RadioButton的选择技巧对于CheckBox和Select列表框也适用

  除了可以使用val批量设置RadioButton、CheckBox等的选中以外，还可以设定checked属性来单独设置控件的选中状态

  $("#btn1").attr("checked".true) 单独设置一个控件的选中状态。

 

  练习：权限选择框

  练习：CheckBox的全选、全不选、反选

 

  事件

  JQuery中的事件绑定：$("#btn").bind("click",function(){}),每次都这么调用太麻烦，所以JQuery可以用$("#btn").click(function(){})来进行简化

 

  合成事件hover,hover(enterfn,leavefn),当鼠标放在元素上时调用enterfn方法，当鼠标离开元素的时候调用leavefn方法。

  事件冒泡：JQuery中也像JavaScript一样是事件冒泡

 

  调用事件对象的stopPropagation（）方法终止冒泡

  如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数：e,e就是事件的对象。

  $("tr").click(function(e){alert("tr被点击");e.stopPropagation();});//注意函数的参数是e

  阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault()方法

  $("a").click(function(e){

  alert("所有超链接暂时全部禁止点击");

  e.preventDefault();

});

   

 

   鼠标

  获得发生事件时鼠标的位置

  $(document).mousemove(function(e){

   document.title=e.pageX+"."+e.pageY;

});

 

  在mousemove、click等事件的匿名响应函数中如果指定一个参数e,那么就可以从e读取发生事件时的一些信息，比如对mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。

  练习：跟着鼠标走的图片

 练习：Tooltips效果

  练习：美女图片详细解析层。

 

 

   动画

  show().hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换。

  $(":button[value=show]").click(function(){

   $("div").show();

});

 

   $(":button[value=hide]").click(function(){$("div").hide();});

 

   如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以使用三个内置的速度：fast(200毫秒)/normal(400毫秒)/show(600毫秒),JQuery动画函数中需要速度的地方一般也可以使用这个三个值。

  案例：QQTab效果

  练习：优酷视频右边视频列表、视频详细信息效果

  练习：大旗try.daqi.com的页面顶部的效果。

 

 

  课程30.Cookie简介.avi

  JQuery插件：JQuery cookie

  什么是cookie：Cookie就是保存在浏览器上的内容，用户在这次浏览页面的时候向Cookie中保存文本内容，下次在访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次"记忆"的内容。Cookie不是JQuery持有的概念，只不过JQueryCookie把它简化的更好用而已。

 

  Cookie就是存储在浏览器里的一些数据。

 

  Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的，如果禁用了Cookie就不能使用了，不过一般不用考虑禁用Cookie的情况。Cookie的几个特征：Cookie是与域名相关的，所以163.com不能读取baidu.com记录的Cookie，正因为如此读取、设置Cookie总尺寸是有限制的，一般是几千字节，能写入的Cookie总条数一般是几十条，超过以后浏览器自己会根据自己的策略移除一些Cookie：Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除，用户也可能会手动清除。

 

 

 

  课程31.Cookie插件的使用.avi

  JQuery Cookie使用

  使用方法：Cookie保存的是键值对

  1.添加对jquery.cookie.js

  2.设置值，$.cookie('名字','值').cookie中保存的值都是文本。

  3.读取值，var v=$.cookie('名字')

 

  案例：点击登录以后保存用户名；在登录的时候读取上次保存的用户名，帮用户填上

  设置值的时候还可以指定第三个参数，$.cookie('名字','值',{expires:7,path:'/',domain:'itcast.cn',secure:true}),

expires表示要求浏览器保留Cookie几天，这个值只是给浏览器的建议，可能没到时间就已经被清除了。可以实现"勾选[记录我的用户名10天]"的功能。

  练习：实现"上次访问时间"功能；

  练习：允许用户点击不同颜色的色块设置网页的背景颜色，然后记住用户的选择，下次进入的时候是用户上次设置的背景色。

 

   35.JQueryUI简介.avi

 

  常用JQuery插件

  JQuery官方的UI控件JQueryUI

  http://jqueryui.com/下发包

  演示常用方法，分析代码。

 

  JQuery.validate表单验证插件

  Form用于为表单提供直接的Ajax能力

  所有插件列表http://plugins.jquery.com/

  35课程和36课程没有学习等下载了UI插件之后再学习。