Web静态开发 JQuery

伍章 JQuery

1节
介绍JQuery和顶级对象

<<锋利的JQuery>>
JQuery官网： http://jquery.com (下载jquery工具)
JQuery在线API: http://api.jquery.com
http://api.jquery.com/api(xml文件)
JQuery UI: http://jqueryui.com

什么是JavaScript框架库?
普通javascript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多javascript的封装库
常见的javascript框架库：
Prototype YUI Dojo ExtIS JQuery等这些库对JavaScript进行了封装，简化了开发，但内部还是用Javascript实现的
JQuery就是JavaScript语法写的一些函数类，内部任然是用js实现的，所以并不是代替js，使用JQuery的代码、编写JQuery的扩展插件等仍然需要js的技术，JQuery本身就是一堆js函数。JQuery是最火的js库，JQuery的扩展插件也是非常多

常用的JavaScript库：
1 Prototype: http://www.prototypejs.org
2 Dojo: http://dojotoolkit.org
3 YUI(The Yahoo>User Interface Library): http://developer.yahoo.com/yui

jQuery就是JavaScript的一堆函数库
JavaScript能做什么，JQuery就能做什么
JQuery的特点: Write Less Do More
隐式迭代
链式编程
插件丰富，开源，免费

JQuery中最常用的顶级对象即$对象，要想使用JQuery的方法必须通过$对象。只有将普通的Dom对象封装成JQuery对象，然后才能调用JQuery中的各种方法。
$是JQery的简写，在代码中可以使用JQuery代替$，但是一般为方便大家都直接使用$
写注释，后续JQuery的代码会越来越多，所以必要的注释一定要写.
jquery也是在操作页面的一些元素，和dom类似,dom代码比较多

2节
两个遍历方法

$(fun); 相当于 $(document).ready(fun); //只需要dom元素加载完毕即触发
$(window).load(fun); //需要等待页面完全加载完毕才会触发
$.map(array,callback(element,index)); //主要用于遍历数组
$.each(array,fn); //主要用于遍历键值对(map和each可以相互遍历，但是在有些浏览器可能不支持)

//1
//将一个数组的元素翻倍并返回一个新的数组
var arr=[1,2,3,4,5];
var newarr = $.map(arr,function(ele,index){ //map方式自动遍历
//alert(arguments.length); //用arguments接受匿名方法的参数
//获取该方法中有几个参数，分别是什么
//alert(arguments[0]+"=="+arguments[1]+"==="+arguments[2]); //得知第1个参数是元素，第2个参数是索引，第3个参数undifined
//alert(ele+‘===‘+index); //输出元素和索引
return ele*2; //返回一个新的数组
});
alert(newarr);
//google调试---开发工具---F5---F11---跳到当前引用jquery文件的map()方法
//ie调试---开发工具---脚本---调试启动---
//2
//将一个数组中索引>3的元素的值翻倍，其余值不变，并返回一个新数组

$.each(array,fn);
var dict={"name":"xiaoming","age":"23"};
$.each(dict,function(key,value){
alert(key+‘====‘+value);
});

3节
dom对象和jQuery对象互转

$.trim(字符串) //切掉两边空格
trimLeft=/^[\s\xAO]+/; trimRight=/[\s\xAO]+$/; //ie一些版本不支持\s空格，\xAO也表示空格

Dom对象如果想调用jQuery的方法必须先转换为JQuery对象
Dom对象：文档数中的对象都是dom对象
jQuery对象：把dom对象包装后就得到jQuery对象

//Dom jQuery混合方式
$(dvObj).css(‘backgroundColor‘,‘red‘); //dom对象转jQuery对象
var dvJqObj=$(dvObj);
var dvDomObj=dvJqObj.get(0); //jQuery对象转Dom对象
$(dvObj)[0].style.backgroundColor=‘gray‘; //jQuery对象转Dom对象

//JQuery方式
$(‘#btn‘).click(function(){
$(‘#dv‘).css(‘backgroundColor‘,‘red‘);
});

//哪些不需要转JQuery对象 Array(不是dom元素)

4节
选择器

id选择器
$(‘#dv‘).click(function(){
//$(this).text(‘这是一个层‘); //text相当于dom中innerText;html()相当于innerHTML
//$(this).css(‘‘,‘‘);
$(this).text(‘这是一个层‘).css(‘‘,‘‘); //链式编程
alert($(this).text()); //不设置，就是取值
});

标签选择器
//为某个按钮注册一个单击事件，单击的时候设置页面上所有的p标签中显示文字为“我们都是好孩子”。(隐式迭代)
$(‘p‘).text(‘我们都是好孩子‘);//隐式迭代

$(‘div.cls‘).text(‘我去‘)； //标签加类选择器
$(‘.cls‘).text(‘帅气‘); //类样式选择器

5节
各种选择器和案例

//1多条件选择器
$(‘p,div,span.cls‘).css(,);
<p>p</p>
<div>div</div>
<span class=‘cls‘>span<span>
//2层次选择器
$(‘div p‘).css(,); //获取层中所有p标签
$(‘div>p‘).css(,); //获取层中直接的子元素
$(‘div+p‘).css(,); //获得层后面的直接的p元素
$(‘div~p‘).css(,); //获取层后面的所有的p元素
$(‘*‘); //获取所有元素
$(‘div‘).next().css(,); //获得层后面直接的兄弟元素
$(‘div‘).nextAll().css(,); //获得层后面所有的兄弟元素
$(‘div‘).prev().css(,); //获得层前面直接的兄弟元素
$(‘div‘).prevAll().css(,); //获得层前面所有的兄弟元素
$(‘div‘).siblings().css(,); //获得当前元素的所有兄弟元素

//ul球队，鼠标移到li上，该li变红色,点击时,之前的所有li变黄，之后的所有li变蓝，自己不变
$(this).css(,).siblings().css(,);
$(this).prevAll().css(,).end().nextAll().css(,); //因为前面返回的是集合，就断链了，需要end()修复了，才能继续进行链式编程

6节
网页开关灯和评分案例

//1 评分案例
$(‘table tr td‘).mouseover(function(){
$(this).text(‘★‘).prevAll().text(‘★‘).end().nextAll().text(‘☆‘).mouseout(function(){ //因为中间断链了，end()返回链被破坏前得对象(当前就是鼠标移入时的对象)
$(‘td‘).text(‘☆‘);
});
});
<table class="cls">
<tr><td>☆</td>...</tr>
</table>

//jQuery的迭代(包装集)
//2 判断该元素是否存在
if($(‘#btn‘).length>0){
alert(‘存在‘);
}else{
alert(‘不存在‘);
}

//3 页面实现开关灯的效果
addClass 添加样式
removeClass 移除样式
toggleClass 切换样式的显示
hasClass 判断是否应用了样式

//31 关灯
$(‘#btnoff‘).click(function(){
$(‘body‘).addClass(‘cls‘); //.cls{background-clor:black;}
});
//32 开灯 removeClass
//33 用一个按钮实现开灯和关灯
if($(‘body‘).hasClass(‘cls‘)){
$(‘body‘).removeClass(‘cls‘);
}else{
$(‘body‘).addClass(‘cls‘);
}
//34 toggleClass
$(‘body‘).toggleClass(‘cls‘); //切换样式

7节
过滤器和案例练习

$(‘div:first‘) $(‘div‘).first() 选取层中第一个元素
$(‘div:last‘) $(‘div‘).last() 选取层中最后一个个元素
$(‘div:not(.cls)‘); 获取没有.cls样式的元素
$(‘div:even‘)偶数 :odd(奇数) 表示的是偶数，实际显示效果奇数
$(‘div:eq(5)‘) :gt() :lt()
$(‘div:gt(3):lt(2)‘) 索引>3 && <2的元素
$(‘:header‘) 获取所有h标签 $(‘h1,h2,h3,...‘)

margin-bottom:10px; //设置外边距(层之间的距离)
$(‘#tab tr:gt(0):lt(3)‘).css(‘fontSize‘,‘28px‘);
//1表格字体大小及颜色的过滤器案例
//2点击按钮。表格变色，奇红偶黄,点击的变蓝，其他白色

8节
相对定位和属性过滤器

//相对定位
$(‘p‘,‘div‘) //从层中去找p标签
$(‘td:odd‘,$(this)).css(,)
$(‘td‘,$(this).sliblings()).css(,)

//属性、表单过滤器
$(‘#div input[name]‘).css(,) //获取层中有name属性的input标签
$(‘#div input[name=n]‘).css(,) //获取层中name属性为n的input标签
$(‘#div input[name!=n]‘).css(,) //获取层中name属性不是n的input标签
$(‘#div input[name^=n]‘).css(,) //获取层中name属性以n开头的input标签
$(‘#div input[name$=n]‘).css(,) //获取层中name属性以n结束的input标签
$(‘#div input[name*=n]‘).css(,) //获取层中name属性所有的input标签

//表单对象属性选择器(过滤器)
$(‘#form1 :enabled‘) //获取表单内所有启用的元素(有空格)
$(‘#form1:enabled‘) //表示的是选中了的form1表单
$(‘#form1 :disabled‘) //获取表单内所有禁用的元素
$(‘input:checked‘) //获取input标签中选中了的元素(没有空格) Radio、CheckBox
$(‘select:selected‘) //获取选项中选中了的元素

9节
元素的each和其他过滤器

//elements.each(function(k,v){...}); //each函数遍历元素并获取元素值
$(‘#dv input[type=checkbox]‘).click(function(){
var cks=$(‘#dv :checked‘); //获得层内被选中的元素
var len=cks.length; //记录个数
var arr=[]; //用于存储获得的元素值
cks.each(function(k,v){ //通过each()函数遍历选中的元素-----------------------------------------(*)
arr[arr.length]=$(v).val();//记录选中的元素的value值
});
$(‘#p1‘).text(‘共选择了‘+len+‘个，分别是：‘+arr);
});

//表单选择器
$(‘:input‘)选取所有<input> <textarea> <select> <button>元素
$(‘input‘)只获取<input>元素
$(‘:text‘)选取所有单行文本框,等价于 $(‘input[type=text]‘)
$(‘:password‘)选取所有密码框 :radio :checkbox :submit :image :reset :button :file :hidden //这些代替了$(‘input[type=...]‘);

//其他过滤器
:hidden //选取所有不可见元素(如果直接写:hidden则会包含head\title\script\style...)
表单元素type="hidden" (表示的是隐藏域)
设置css的display:none
高度和宽度明确设置为0的元素
父元素时隐藏的，所以子元素也是隐藏的
visibility:hidden与opacity为0不算，因为还占位所以不认为是-----???----
hidden:visible选取所有可见元素

//内容过滤器
:contains(text) 过滤出包含指定文本的元素(innerText中包含)
:empty 过滤出所有不包含子元素或文本的空元素
:has(selector) 过滤出元素中指定子元素得元素
:parent 过滤出可以当做父元素的元素(即该元素有子元素或元素中包含文本)
$(‘div:contains(好)‘).css(,) 获取层中包好‘好’的元素
$(‘div:empty‘).css(,) 获取为空元素的层
$(‘div:has(a)‘).css(,) 获取包含子元素的层
<div><a href="">百度</a></div>
<div></div>
<div>好帅啊</div>
<div></div>

//子元素过滤器
:first 只能选取第一个
:first-child 选取每个子元素的第一个元素
$(‘ul :first-child‘)
$(‘ul li:first‘) 只返回一个li元素
$(‘ul li:first-child‘) 为每个父元素(ul)都返回一个li
:last-child
:only-child 匹配当前元素只有一个子元素的元素
:nth-child 为每个父元素都要匹配一个子元素，eq()只匹配一个
:nth-child(index) index从1开始
:nth-child(even)
:nth-child(odd)
:nth-child(3n) 选取3的倍数的元素
:nth-child(3n+1) 满足3的倍数+1的元素
.children()方法只考虑子元素，不考虑后代元素

10节
动态创建元素

html() innerHTML
text() innerText
attr() 读取或设置元素的属性

$(‘#chk‘).attr(‘checked‘,true).attr(‘class‘,‘cls‘); //属性有，值没有; google中checkbox CSS表现不出来,ie可以
$(‘#chk‘).attr(‘class‘,‘‘);
$(‘#chk‘).removeAttr(‘class‘); //属性也没有了

//创建一个层
var dvObj = $(‘<div id="dv"></div>‘).appendTo($(‘body‘)); //创建一个层，并添加到Body中 $(‘body‘).append(dvObj);也可以
//dvObj.css(,).css(,).css(,); //google中是看不到的,查看的话，在ie中装DebugBar--重建document树-------------DebugBar----------------
dvObj.css({"width":"300px","":"","":""}); //用键值对添加样式

11节
动态创建元素的两个案例

//动态创建一个表格
var dict={"百度":"http://www",...};
//无刷新评论
$(‘<tr><td>‘+$(‘#txt‘).val()+‘</td><td>‘+评论的内容+‘</td></tr>‘).appendTo($(‘#tab‘));

12节
移除元素和练习

appendTO() //主动巴结到最后一个 append()是追加
prependTo() //主动巴结到第一个
A.insertBefore(B) //将A加到B得前面,等同于 B.before(A)
X.insertAfter(Y) //将X加到Y的后面,等同于 Y.after(X)

//1 删除元素
$(‘div‘).empty(); //清空层中元素
$(‘div‘).remove(); //层没了，自杀 ,删除这个层之后，还可以调用这个层对新
$(‘div‘).remove(‘.cls‘) //层没了，移除应用了cls样式的层,有目的性的杀掉

//2 权限选择
$(‘#se1 option:selected‘).appendTo($(‘#se2‘)); //单个选择添加到sel2
$(‘#se1 option‘).appendTo($(‘#se2‘)); //全部添加到sel2
//如果报错"例外被抛出"等,很可能是选择器表达式有问题，比如单词拼写错误，加了不必要的空格等。vla()是方法不是数学.

//3 加法计算器
var ret = parseInt($(‘#txt1‘).val())+parseInt($(‘#txt2‘).val());
$(‘#txt3‘).val(ret);

//4 10秒后协议文本注册
//5 创建若干文本框,当失去焦点时，如果文本框为空，则将文本框背景设置为红色，如果不为空则为白色。
if($(this).val().length==0){...}
//6 选择球队，2个ul。被悬浮(鼠标移到)行高亮显示(背景是红色),点击球队将它放到另一个的球队列表
.unbind() //清除所有事件
.unbind(‘click‘) //清除点击事件

$(‘#uu1 li‘).mouseover(function(){
$(this).css(,).siblings().css(,);
}).click(function(){
//$(this).appendTo(‘#uu2‘); //把元素的样式和事件都进来了
$(this).removeAttr(‘style‘).unbind().appendTo(‘#uu2‘); //清除样式和事件
});

13节
节点替换和包裹节点

//替换节点
$(‘br‘).replaceWith(‘<hr/>‘); //用hr标签替换br标签
$(‘<br/>‘).replaceAll(‘hr‘); //br标签替换所有hr
//包裹节点
$(‘div p‘).wrap(‘<font></font>‘); //包裹每个p标签
$(‘div p‘).wrapAll(‘<font></font>‘); //包裹所有p标签
$(‘div p‘).wrapInner(‘<font></font>‘); //包裹在p标签里面

14节
案例和练习

attr(‘class‘) 获取样式
attr(‘class‘,‘cls‘) 设置样式
addClass(‘cls‘) 追加样式
removeClass(‘cls‘) 删除样式
toggleClass(‘cls‘) 切换样式(如果存在样式，就去掉样式，如果没有样式，则添加样式)
hasClass(‘cls‘) 判断是否存在样式

//1
$(‘body *‘).mouseover(function(){ //body的所有元素
$(this).addClass(‘cls‘);
}).mouseout(function(){
$(this).removeClass(‘cls‘);
});

//2 搜索文本框
if($(this).val()==‘请输入值‘){ //清空值 //移除样式}
//3 RadioButton操作(点击按钮使单选框被选中)
$(‘:radio[value=1]‘).attr(‘checked‘,true);
$(‘:radio‘).val(["1","2","3"]); //如果name值不同的话，就可以都被选中

15节
复选框案例

//全选全不选反选
$(‘div :checkbox‘).attr(‘checkbox‘,true);
$(‘div :checkbox‘).attr(‘checkbox‘,false);
$(‘div :chexkbox‘).each(function(){ //遍历每一个复选框
$(this).attr(‘checked‘,!$(this).attr(‘checked‘));
});

16节
微博案例上

//1 按钮高亮显示
$(this).css(backgroundPosition,‘0 -195px‘)
$(this).css(backgroundPosition,‘-117px- -165px‘)
//2 计算文本框还能输入多少字
$(‘#msgTxt‘).change(function(){
var len = 140 - $(this).val().length;
});
Math.abs(len) //取绝对值
//计时器

17节
微博案例中

//3 显示话题
<a href="javascript:void(0);" >话题</a>
$(‘#msgTxt‘).val(‘#输入话题标题#‘).selectRange(1,7); //扩展方法，使标题高亮显示(被选择)
//4 显示朋友
//如果层存在，就关闭 if(‘#dvF‘).length>0){$(‘#dvF‘).remove(); }
var dvX=$(this).offset().left+‘px‘; //层距离左侧的像素
var dvX=$(this).offset().top+$(this).height()+‘px‘;
dvFriends.css({"left":dvX,"top":dvY});
//添加一个关闭
float:right;浮动到右侧
$(this).parent().remove();
//显示朋友列表
clear:both; //清除浮动
style="list-style-type:none;margin:0;padding:0;clear:both;"

18节
微博案例下

//5 显示表情
//创建层(脱离文档流，设置左顶距离)(前面如果有层，就删除)
//显示表情和关闭
var dict={‘1.gif‘:‘微笑‘,...};
//再创建一个层放表情(clear:both;清除浮动)
//遍历键值对
//创建图片
//鼠标进入事件点击事件
//如果msgTxt的值"是不是输入话题"
$(‘#msgTxt‘).val( ‘[‘+$(this).attr(‘title‘)+‘]‘ );

16-18节
微博案例

$(function(){
//1 广播按钮高亮显示
$(‘#dvFigure .clsBroadcast‘).mouseover(function(){
$(this).css(‘backgroundPosition‘,‘0 -195px‘).css(‘backgroundColor‘,‘red‘);
}).mouseout(function(){
$(this).css(‘backgroundPosition‘,‘-117px -165px‘).css(‘backgroundColor‘,‘blue‘);
});
//2 显示剩余字数
$(‘#dvContent .clsTxt‘).change(function(){
var surplus = 140 - $(this).val().length;
if(surplus>=0){
$(‘#dvFigure .clsSurplus‘).html(‘还能输入<em>‘+surplus+‘</em>个字‘);
}else{
$(‘#dvFigure .clsSurplus‘).html(‘超出<font color="red"><em>‘+Math.abs(surplus)+‘</em></font>个字‘);
}
clearInterval(setId); //为了避免一直计时，在这里先禁掉------???---------
});
var setId = setInterval(function(){
$(‘#dvContent .clsTxt‘).change();
},500);
//3 显示话题
$(‘#dvLink #topic‘).click(function(){
$(‘#dvContent .clsTxt‘).val(‘#请输入话题标题#‘); //.selectRange(1,7) 获得高亮显示
});
//4 显示朋友
$(‘#dvLink #friend‘).mouseover(function(){
var arrFri=[‘东邪‘,‘西毒‘,‘南帝‘,‘北丐‘,‘鞠婧祎‘,‘朴智妍‘];
if($(‘#dvFriend‘).length>0){
$(this).remove();
}
var dvF=$(‘<div id="dvFriend" style="width:100px;border:1px solid blue;position:absolute;"></div>‘).appendTo($(‘body‘));
var dvFX=$(this).offset().left+‘px‘;
var svFY=$(this).offset().top+$(this).height()+‘px‘;
dvF.css({"left":dvFX,"top":svFY});
//创建一个关闭按钮
$(‘<input type="button" style="float:right;" value="关闭" />‘).mouseover(function(){
$(this).css(‘backgroundColor‘,‘blue‘);
}).mouseout(function(){
$(this).css(‘backgroundColor‘,‘‘);
}).click(function(){
$(this).parent().remove(); //----为什么点2次才移除-----???-------------
}).appendTo(dvF);
//创建列表
var ulObj=$(‘<ul style="list-style-type:none;clear:both;margin:0;padding:0;"></ul>‘).appendTo(dvF);
for(var i=0;i<arrFri.length;i++){
$(‘<li>@‘+arrFri[i]+‘</li>‘).mouseover(function(){
$(this).css(‘backgroundColor‘,‘red‘);
}).mouseout(function(){
$(this).css(‘backgroundColor‘,‘‘);
}).click(function(){
if($(‘#dvContent .clsTxt‘).val()==‘#请输入话题标题#‘){
$(‘#dvContent .clsTxt‘).val($(this).text());
}else{
$(‘#dvContent .clsTxt‘).val($(‘#dvContent .clsTxt‘).val()+$(this).text());
}
}).appendTo(ulObj);
}
});
//5 显示表情
$(‘#dvLink #face‘).mouseover(function(){
var dict={"00.gif":"00","01.gif":"01","02.gif":"02","03.gif":"03","04.gif":"04","05.gif":"05","06.gif":"06","07.gif":"07","08.gif":"08","09.gif":"09","10.gif":"10","11.gif":"11","12.gif":"12","13.gif":"13","14.gif":"14","15.gif":"15","16.gif":"16","17.gif":"17","18.gif":"18","19.gif":"19","20.gif":"20","21.gif":"21","22.gif":"22","23.gif":"23","24.gif":"24","25.gif":"25","26.gif":"26","27.gif":"27","28.gif":"28","29.gif":"29"};
//创建层
if($(‘#dvFace‘)){
$(‘#dvFace‘).remove();
}
$(‘<div id="dvFace" style="width:400px;border:1px solid blue;position:absolute;"></div>‘).appendTo($(‘body‘));
var dvFaceX=$(this).offset().left-80+‘px‘;
var dvFaceY=$(this).offset().top+$(this).height()+‘px‘;
$(‘#dvFace‘).css({"left":dvFaceX,"top":dvFaceY});
//层中创个标题和关闭按钮
$(‘<span style="float:left;">表情</span>‘).appendTo(‘#dvFace‘);
$(‘<span><input type="button" style="float:right;" value="关闭"/></span>‘).mouseover(function(){
$(this).css(‘backgroundColor‘,‘blue‘); //---背景为什么未变色----???-----------
}).mouseout(function(){
$(this).css(‘backgroundColor‘,‘‘);
}).click(function(){
$(this).parent().remove();
}).appendTo(‘#dvFace‘);
//再创一个层，放入dvFace层
$(‘<div id="dvFaceImg" style="clear:both;"><div>‘).appendTo(‘#dvFace‘);
//编译添加表情
for(var key in dict){
$(‘<img src="faceImg\\‘+key+‘" title="‘+dict[key]+‘" />‘).mouseover(function(){
$(this).css({‘borderColor‘:‘red‘,‘cursor‘:‘pointer‘});
}).mouseout(function(){
$(this).css({‘borderColor‘:‘‘,‘cursor‘:‘‘});
}).click(function(){
if($(‘#dvContent .clsTxt‘).val()==‘#请输入话题标题#‘){
$(‘#dvContent .clsTxt‘).val(‘[‘+$(this).attr(‘title‘)+‘]‘);
}else{
$(‘#dvContent .clsTxt‘).val( $(‘#dvContent .clsTxt‘).val()+‘[‘+$(this).attr(‘title‘)+‘]‘ );
}
}).appendTo($(‘#dvFaceImg‘));
}
});
});

19节
jquery中的几个绑定事件的方法

//1 绑定事件
$(‘#btn‘).bind(‘click‘,function(){
alert(‘点击了‘);
});
//2 合成事件
hover(enterfn,leavefn)
$(‘#btn‘).hover(function(){...},function(){...});
//3 切换事件
$(‘#btn‘).toggle(function(){},function(){},function(){},...);
//4 事件冒泡:同样的事件时，触发里面，也会触发外面
alert($(this).attr(‘id‘));
e.stopPropagation(); //取消事件冒泡,需要传e参数
//5 阻止事件
e.preventDefault();
//6 jqery在注册事件时如何传参数(单个参数，数组，键值对都行)
$(‘#btn‘).click({"name":"熊爱明"},function(e){
alert( e.data.name );
});

20节
jquery中的其他事件

pageX PageY //获得当前鼠标的x y
//让图片飞起来
$(document).mousemove(function(e){
$(‘#img‘).css(‘position‘,‘absolute‘).css({‘left‘:e.pageX,‘top‘:e.pageY});
});

$(‘div‘).mousedown(function(e){
alert(e.which);//获得键值
});

unbind() //移除元素上的所有绑定事件
$(this).offset() //当前元素相对于页面的坐标
$(this).offset().left $(this).offset().top

$(‘#btn‘).one(‘click‘,function(){ //只执行了1次
alert(‘也许这是一个不错的选择‘);
});

event.originalEvent //获得原始的event对象

21节
动画效果

Tooltips(作业几乎全是css实现的鼠标进入时创建一个层，并把这个层slide)

//1 显示和隐藏元素
show() hide()
$(‘div‘).show(); 显示层
$(‘div‘).show(1000); 在1秒内显示

//2 上下显示或隐藏
//在右下角弹出qq消息的效果(作业)
slideDown(1000) 从上到下显示
slideUp(1000) 从下到上隐藏
slideToggle(1000) 上下滑动

//3 淡入淡出
fadeIn(1000);
fadeOut(1000);
fadeToggle(1000);

//4 自定义动画
animate({css},speed);

$(‘img‘).animate({"left":"50px","top":"500px"},1000).animate({"left","+500px","top":"-400px","width":"30px","height":"30px"},2000);

22节
cookie

cookie:保存在浏览器的内容，下次再次访问就可以取出上次保存的内容,
cookie需要浏览器支持,禁用掉就没有了,与域名有关，不会冲突，cookie内容超出，会自动删除;有期限7天;可进行加密;进行作弊

//引入jquery.cookie.js

//判断cookie中是否有保存
if($.cookie(‘uName‘)){
$(‘span‘).text(‘欢饮‘+$.cookie(‘uName‘)+‘登陆‘);
}else{
$(‘span‘).text(‘欢饮菜鸟登陆‘);
}
//如果没保存,把值存入cookie的uName中
$.cookie(‘uName‘,$(‘#txt‘).val()); //------------没存入----???--------------

23节
jquery插件

//通过jqzoom插件是图片放大(高清无码)
http://www.mind-projects.it/projects/jqzoom/ --download--下载--
//所有插件列表 http://plugins.jQuery.com/

网页的分析工具
DebugBar -> IE
Firebug -> FireFox
Collection -> Googgle

Regex在匹配网址时，regularException必须有‘^‘和‘$‘
考虑正则表达式本身时不要考虑转义，当翻译为C#代码时，再考虑转义
\. 表示 . //相当于 [.]也表示一个.
\( 表示 (
正则表达式博大精深：知道正则表达式可以做字符串的匹配，字符串的提取，字符串的替换;知道常用的简单的正则表达式的写法;能够看懂常见的正则表达式
在正则表达式中，\w 表示[0-9a-zA-Z_] ;但是在中文操作系统，C#应用环境中也是可以匹配汉字的
<<J2EE全程开发实例>>

//拼接sql语句
//需要获得类名和列名
Type type=obj.GetType();//获取对象类型
string className=type.Name;//获得类名，就是表名
PropertyInfo[] proInfos=type.GetProperties();
string[] proNames=new string[proInfos.length-1];//排除id
//遍历属性，获得除了id的数组
//用‘,‘拼接成字符串,加入到sql语句中

//根据id查询
//泛型 T
return default(T) //用来获得类型的默认值

写DeleteById()方法
写Update()方法
http://www.rupeng.com/forum/thread-44526-1-1.html (上交作业)

//委托事件

//sender 触发事件的控件对象

时间： 2024-10-02 13:54:45

Web静态开发 JQuery

Web静态开发 JQuery的相关文章

10个极客Web前端开发jquery资源大荟萃

Web前端开发——JQuery基础梳理

JQuery WEB前段开发

SpringBoot 基于web应用开发(请求参数获取，静态资源，webjars)

Web前端开发必备：《Jquery实战》第3版介绍

web app开发——使用jQuery Mobile创建餐厅订餐应用

《JavaScript &amp; jQuery交互式Web前端开发》之JavaScript基础指令

JavaScript & jQuery交互式Web前端开发

web前端开发规范