python之前端

2022-03-20 01:58:34

一.Html总结

1、Html简介
　　HTML 是一种标记语言
　　忽略大小写，语法宽松
　　使用 HTML 标记和元素，可以：
　　控制页面和内容的外观
　　发布联机文档
　　使用 HTML 文档中插入的链接检索联机信息
　　创建联机表单，收集用户的信息、执行事务等等
　　插入动画
　　开发帮助文件
　　HTML 标记的格式组成： <ELEMENT ATTRIBUTE = value>
　　ELEMENT: 元素 - 标识标记
　　ATTRIBUTE: 属性 - 描述标记
　　value: 值 - 分配给属性的内容

2、超链接
<A HREF = protocol://host.domain:port/path/filename> Hypertext </A>
Protocol 协议类型
http –超文本传输协议<a href="http://127.0.0.1:8080/shopcart/index.html">
gopher –搜索文件
telnet –打开 telnet会话
ftp –文件传输协议
mailto –发送电子邮件 <A HREF="mailto:daillow@gmail.com">电子邮件连接
Host.domain 服务器的 Internet 地址
Port 目标服务器的端口号
Hypertext 用户必须单击才能激活链接的文本或图像
3、Html的基本标记
标题标记 <h1>~<h6> 标题标记，可显示六种大小的标题(1最大，6最小)
段落级标记 <ADDRESS> 可包含：到主页的链接,搜索字符串功能,版权信息,文档的作者、地址、签名等信息
<BLOCKQUOTE> 显示文档中的引用文本。用于较长的引用且显示为缩进式段落。
<PRE> 此元素用于预定义文本的格式。文本在浏览器中显示时遵循在HTML源文档中定义的格式。
块标记 <SPAN>定义段落内的内容块； <DIV>可以定义跨段落的内容块
字符级标记 (见下面的语法大全，字体效果)
列表 <li type=...> 指定符号type="disc"空心圆/"circle"实心圆/"square"方形
<OL TYPE="a/A/i/I"> 有序号的列表(内嵌<li>)(a/A用字母标示，i/I希腊字母标示)
<UL TYPE="disc/circle/square"> 无序号的列表(内嵌<li>)
从第n个值开始编号<OL START = n> type=数值：从1开始(任何数值都是这样)
OL与UL没区别；TYPE="a/A/i/I"就有序号，TYPE="disc/circle/square"就没序号
定义列表包含在<DL>标记内。<DT>标记用于指定要定义的术语，而<DD>标记用于对术语的定义。
水平标尺标记 <HR> 用于在页面上绘制一条水平线。它没有结束标记，且不包含任何内容。
字体标记 <FONT> 可以指定size、color、style(样式)等属性。
图像标记 <IMG> 语法为：<IMG SRC="URL">。支持GIF(支持图形渐近,动画)； JPEG(.JPG)； PNG

使用META标记
1. 提供关于网页的信息
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="daillo"> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT="noting Book"> 
2. 应用：关键词生成响应
<META http-equiv="Expires" content="Mon, 15 Sep 2003 14:25:27 GMT">
设置网页的到期值:响应 Expires: Mon, 15 Sep 2003 14:25:27 GMT
3. 自动刷新页面
<META http-equiv="Refresh" content="10; url=http://yourlink">
应用：如网上实时新闻报道。 content指每多少秒更新一次
4. 设置网页所使用的编码
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
设置网页使用gb2312: 页面显示中文(还可设置utf8等等) 应用：如在不同浏览器上正确显示中文。
在HTML文档中使用特殊字符(跟XML的一样)
> ==== > greater 大于 < ==== < litter 小于
&de; ==== ≥ 大于等于 ≤ ==== ≤ litter equal
≠ ==== ≠ not equal不等 &zwj; ==== 空格
" ==== ” 双引 ' ==== ‘ 单引号
© ==== © 版权符号 ® ==== ® 注册商标
& ==== & 与符号

4、使用表<Table>
与表相关的标记
<TABLE>表标记 <tr>指定表格中的一行 <th>指定标题列 <td>指定表格中的单元格
在<TH>或<TD>标记中使用COLSPAN="n"表示跨n列(合并n列)；ROWSPAN="n"表示跨n行(合并n行)
border定义边框宽；cellSpacing定义单元格间距(单位像素)；cellpadding定义格边界与格内容的间距

<body bgcolor="#04D4F3" background="背景图片.jpg">
<form name="form1" action="regiester.jsp" method=post>
<TABLE height=30% cellpadding=5 border=3 align="center">
<caption><h3>User Login</h3></caption> 
<tr bgcolor=blue style =font-size:20> 
<th colspan=2>注册页 
<tr><th/>用户名： 
<td><input type="text" name="username"/></td></tr>
<tr><th/>密 码：
<td><input type="password" name="password"/></td></tr>
<tr><th/>性别： 
<td>男<input type="radio" name="gender" value="male" checked/>
女<input type="radio" name="gender" value="female"/>
保密<input type="radio" name="gender" value="none"/></tr>
<tr><th/>学历：
<td><select name="xueli" size="1">
<option value="blank"> 
<option value="none">没上过学</option>
<option value="zxx"/>中小学
<option value="dz">大专
<option value="bk">本科
<option value="ss">硕士
<option value="bs">博士/博士后</option></td></tr>
<tr><th/>爱好：
<td>旅游<input type="checkbox" name="hobby" value="travel"/>
看书<input type="checkbox" name="hobby" value="book"/><br>
音乐<input type="checkbox" name="hobby" value="music"/>
交友<input type="checkbox" name="hobby" value="friends"/></td>
<tr><th/>照片：
<td><input type="file" name="photo" />
<tr><th/>自我介绍：
<td><textarea cols="17" rows="3"></textarea>
<tr align="center" bgcolor=blue>
<td/><input type="reset"/> 
<td/><input type="submit" value="提交"/> 
</TABLE></form></body>

5、在Html中使用多媒体
(在<body>中插入)
插入图片 <IMG SRC=./picture/cart.gif ALT="购物车">
插入声音 <BGSOUND SRC="E:\\解决方案\\音乐\\3.mid"> (windows的路径写法)
<bgsound src="上海滩.mp3">
音频/视频 <EMBED ALIGN=CENTER SRC= "\path\file name" AUTOSTART= "TRUE" >

6、表单的使用
用途：收集信息，发送给程序处理
ACCEPT="Internet media type"
ACTION="URL" 指定处理提交的表单的脚本的位置
METHOD = (GET | POST) 指定向服务器发送数据的方法。
<input>属性：
TYPE= 此属性指定表单元素的类型。可用的选项有 TEXT(默认；单行文本)、CHECKBOX(多选)、
RADIO(单选)、SUBMIT(提交)、RESET(重置)、FILE(浏览文件)、HIDDEN、
PASSWORD(显示特定符号的单行文本)、IMAGE(插图) 和 BUTTON。
VALUE= 此属性是可选属性，它指定表单元素的初始值
NAME= 此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们
MAXLENGHT= 此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的
CHECKED= 是Boolean属性，指定按钮是否是被选中的。当输入类型为RADIO或CHECKBOX时使用。
SIZE= 此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是TEXT或PASSWORD的
input-type (见属性 TYPE= )
除input外，其他输入元素：
TextArea 元素(属性：Cols、Rows、Size) 多行文本
BUTTON 元素(属性：Name、Value、Type)
SELECT 元素(属性：Name、Size、Multiple、option) 下拉菜单(单选)

7、框架(frame)
框架将 Web 浏览器分成多个不同的区域，每个区域都可以显示独立、可滚动的页面。达到多个视图的效果。
<FRAMESET Rows Cols> 创建框架。 Rows分行；Cols分列。行列都分窗口时需要嵌套
<frameset cols="20%,*,20%"> 分割左中右三个框架；将左边和右边框架分割大小为20%；其余的自动调整
<frameset rows="20%,*"> 上下分割,将上面框架分割大小为20%；下面框架的大小浏览器会自动调整
<FRAME src="x.html"> 在 FRAMESET 元素内指定单个框架。属性有Name、Src、Noresize、
Scrolling=yes|no、 Frameborder、Marginwidth、Marginheight
<NOFRAMES> 对那些不支持 FRAMESET 的浏览器使用的 HTML。定义不出现分割窗口的文字
<IFRAME src="xxx.html"> 内嵌框架，不需要 frameset ，随处可用。
属性:Name,Width,Height,scrolling=auto,frameborder

二．CSS基本介绍

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

CSS是英语CascadingStyle Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

2．CSS的使用方法

有三种方法可以在站点网页上使用样式表：

外部样式：将网页链接到外部样式表。

内页样式：在网页上创建嵌入的样式表。

行内样式：应用内嵌样式到各个网页元素。

每一种方法均有其优缺点：

当要在站点上所有或部分网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如牛腩新闻发布系统中的公共样式Common.css。然后在需要此样式的页面中将其链接进来，如：

当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 <HEAD>标记符内。嵌入的样式表中的样式只能在同一网页上使用。如：

body {background:grey;}

</style>

使用内嵌样式以应用级联样式表属性到网页元素上。如：

<pstyle="@importurl('style3.css');">CSS document</p>

如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

要在网页上使用外部样式表的样式，可将该网页链接到样式表，方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。可以链接一个或数个样式表到网页视图模式下的当前网页，或到在文件夹列表中的所选网页，或到站点上的全部网页。

该“样式” 框列出标准 HTML 标记符，例如标题

1，还有嵌入的样式表或链接到网页的外部样式表中所含的类或 ID 选择器。要应用样式到网页元素，请选定该样式然后单击 “样式” 框中的样式或选择器。

在 Microsoft FrontPage 2000中，某些格式设置特性会作为内嵌样式自动应用。例如∶如果使用 “边框与阴影” 命令（在 “格式” 菜单上）在普通段落周围应用框，FrontPage 会写下格式设置信息，作为段落标记符的内嵌样式属性（例如∶ <pstyle="border-style: solid">）。然而某些属性的应用需要使用 CSS，其他则需要使用 HTML 。如果人们只想使用 CSS 应用内嵌样式，可使用 “样式”按钮（位于网页元素的 “属性” 对话框里）应用类或 ID 选择器或嵌入式样式。

3、CSS文字属性：

color: #999999; /*文字颜色*/

font-family: 宋体,sans-serif; /*文字字体*/

font-size: 9pt; /*文字大小*/

font-style:itelic;/*文字斜体*/

font-variant:small-caps;/*小字体*/

letter-spacing: 1pt; /*字间距离*/

line-height: 200%; /*设置行高*/

font-weight:bold;/*文字粗体*/

vertical-align:sub;/*下标字*/

vertical-align:super;/*上标字*/

text-decoration:line-through;/*加删除线*/

text-decoration:overline;/*加顶线*/

text-decoration:underline;/*加下划线*/

text-decoration:none;/*删除链接下划线*/

text-transform: capitalize; /*首字大写*/

text-transform: uppercase; /*英文大写*/

text-transform: lowercase; /*英文小写*/

text-align:right;/*文字右对齐*/

text-align:left;/*文字左对齐*/

text-align:center;/*文字居中对齐*/

text-align:justify;/*文字分散对齐*/

vertical-align属性

vertical-align:top;/*垂直向上对齐*/

vertical-align:bottom;/*垂直向下对齐*/

vertical-align:middle;/*垂直居中对齐*/

vertical-align:text-top;/*文字垂直向上对齐*/

vertical-align:text-bottom;/*文字垂直向下对齐*/

4、CSS符号属性：

list-style-type:none;/*不编号*/

list-style-type:decimal;/*阿拉伯数字*/

list-style-type:lower-roman;/*小写罗马数字*/

list-style-type:upper-roman;/*大写罗马数字*/

list-style-type:lower-alpha;/*小写英文字母*/

list-style-type:upper-alpha;/*大写英文字母*/

list-style-type:disc;/*实心圆形符号*/

list-style-type:circle;/*空心圆形符号*/

list-style-type:square;/*实心方形符号*/

list-style-image:url(/dot.gif);/*图片式符号*/

list-style-position:outside;/*凸排*/

list-style-position:inside;/*缩进*/

5、CSS背景样式：

background-color:#F5E2EC;/*背景颜色*/

background:transparent;/*透视背景*/

background-image: url(/image/bg.gif); /*背景图片*/

background-attachment: fixed; /*浮水印固定背景*/

background-repeat: repeat; /*重复排列-网页默认*/

background-repeat: no-repeat; /*不重复排列*/

background-repeat: repeat-x; /*在x轴重复排列*/

background-repeat: repeat-y; /*在y轴重复排列*/

指定背景位置

background-position: 90% 90%; /*背景图片x与y轴的位置*/

background-position: top; /*向上对齐*/

background-position: buttom; /*向下对齐*/

background-position: left; /*向左对齐*/

background-position: right; /*向右对齐*/

background-position: center; /*居中对齐*/

6、CSS连接属性：

a/*所有超链接*/

a:link/*超链接文字格式*/

a:visited/*浏览过的链接文字格式*/

a:active/*按下链接的格式*/

a:hover/*鼠标转到链接*/

鼠标光标样式：

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

7、CSS框线一览表：

border-top: 1px solid #6699cc; /*上框线*/

border-bottom: 1px solid #6699cc; /*下框线*/

border-left: 1px solid #6699cc; /*左框线*/

border-right: 1px solid #6699cc; /*右框线*/

以上是建议书写方式,但也可以使用常规的方式如下:

border-top-color: #369 /*设置上框线top颜色*/

border-top-width:1px /*设置上框线top宽度*/

border-top-style: solid/*设置上框线top样式*/

其他框线样式

solid/*实线框*/

dotted/*虚线框*/

double/*双线框*/

groove/*立体内凸框*/

ridge/*立体浮雕框*/

inset/*凹框*/

outset/*凸框*/

8、CSS表单运用：

文字方块 <input type="text" name="T1"size="15">

按钮 <input type="submit" value="submit"name="B1">

复选框 <input type="checkbox" name="C1">

选择钮 <input type="radio" value="V1" checkedname="R1">

多行文字方块 <textarea rows="1" name="S1"cols="15"></textarea>

下拉式菜单 <select size="1" name="D1"><option>选项1</option>

9、CSS边界样式：

margin-top:10px;/*上边界*/

margin-right:10px;/*右边界值*/

margin-bottom:10px;/*下边界值*/

margin-left:10px;/*左边界值*/

十、CSS边框空白

padding-top:10px;/*上边框留空白*/

padding-right:10px;/*右边框留空白*/

padding-bottom:10px;/*下边框留空白*/

padding-left:10px;/*左边框留空白*/

十一、滚动条样式

Scrollbar-face-color:#f3f3f3;/*滚动条凸出部分的颜色*/

Scrollbar-highlight-color:#f1f1f1/*滚动条阴影部分的颜色*/

Scrollbar-shadow-color:#fcfcfc/*立体滚动条阴影颜色*/

Scrollbar-3dlight-color:#fcfcfc/*滚动条亮边的颜色*/

Scrollbar-arrow-color:#34837/*上下按钮上三角箭头的颜色*/

Scrollbar-track-color:#fcfcfc/*滚动条的背景颜色*/

Scrollbar-darkshadow-color:#66c0f4/*立体滚动条强阴影颜色*/

Scrollbar-base-color:#fcfcfc/*滚动条的基本颜色*/

三、JQuery概念

A、Jquery是一个优秀的Javascript框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

B、JavaScript的缺点:控件的操作方式不统一，不同浏览器容易出观兼容问题。为了简化操作，出现了许多对JavaScript封装的函数库比如Prototype、JQuery等。

C、JQuery的优点:小巧、方便、功能强大。插件丰富、开源、免费。

D、VS在VS2010中已经实现自动完成功能，VS2008需要安装VSSP1补丁和VS90SP1-KB958502-X86补丁才能更好的支持，然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放在同目录下，VS2008中才会有自动提示和自动完成功能。

E、JQuery文件说明:

jquery-1.4.2.js是JQuery主文件。

jquery-1.4.2.min.js是压缩板JQuery主文件。

jquery-1.4.2-vsdoc.js是JQuery在VS中的自动提示功能。

2、JQuery之Ready

A、JQuery的read和Dom onload的区别:onload是所有Dom元素创建完毕触发，而ready则是Dom元素创建完就触发，这样可以提高网页的响应速度。

3、JQuery内置函数

A、$.map(array, function)函数:对数组array中每个元素调用function函数逐个处理，function函数处理返回一个新的数组。如:

var array = [3, 6, 9];

var arrary2 = $.map(array, function(item) { return item * 2 });

for (var i = 0; i < arrary2.length; i++) {

alert(arrary2[i]);

};

或: alert(arrary2);

注: $.map函数不能处理dictionary风格的数组。

B、$.each(array, function)对array每个元素进行处理，但没有返回值。

var array = ["TOM", "汤姆", "Jerry", "杰瑞"];

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

或:

var dict = { "TOM": 20, "Jerry": 50 };

$.each(dict, function(key, value) { alert(key + "=" + value); });

4、JQuery对象与Dom对象

A、JQuery对象是通过对Dom对象的封装产生的对象。

B、Dom对象要想通过JQuery进行操作，需要先转换成JQuery对象。

$(‘#div1’).html等价于:document.getElementByid(‘div1’).innerHTML;

$(‘#div1’)得到的是JQuery对象，JQuery对象可以调用JQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用JQuery对象的方法。

C、将Dom对象转换成JQuery对象的方法，$(Dom对象)。当调用JQuery没有封装的方法时必须用Dom对象，转换方法:var docobj = jqobj[0]或var domobj=jqobj.get(0)。

D、样式的修改：

JQuery修改样式方法:$(“#div1”).css(“background”, “red”);

JQuery获得样式的方法:$(“#div1”).css(“background”);

修改value值方法:

JQuery修改value方法: $(“#div1”).val(“Dragon”);

JQuery获得value方法: $(“#div1”).val();

5、JQuery选择器

A、JQuery选择器用于查找满足条件的元素，比如可以使用$(“#控件id”)来根据控件id获得控件的JQuery对象。相当于getElementByid。

B、$(“TagName”)来获取所有指定签名的JQuery对象，相当于getElementsByTagName。

C、CSS选择器，同时选择拥有某个样式的多个元素:

$(“.text”).click(function(){alert($(this).text();)});

D、多条件选择器:$(“p,div,span.menuitem”),同时选择p标签、div标签和拥有menuitem样式的span标签。

E、层次选择器:

1、$(“div li”)获取div下的所有li标签(后代，子、子的子标签…)。

2、$(“div > li”)获取div下的直接li子标签。

3、$(“.menuitem + div”)获取样式名为menuitem之后的第一个div标签。

4、$(“.menuitem ~ div”)获取样式名为menuitem之后的所有div标签。

6、JQuery隐式迭代

A、注:如果用隐式迭代就会不容易发现错误。

$(function(){

var elements = $(“#btn1”);

If (elements.length <= 0){

alert(“没有找到提定对象”);

return;

}

elements.mouseover(function(){ alert(“找到了”)});

7、节点遍历

A、next()方法用于获取节点之后的挨着的第一个同辈标签，$(“.menuitem”).next(“div”)、nextAll()方法用于获取节点之后的所有同辈标签。

B、siblings()方法用于获取所有同级标签。

8、链式编程

A、JQuery可以实现链式编程

9、JQuery过滤选择器

A、:first选择第一个标签。$(“div:first”)选取第一个<div>。

B、:last选取最后一个标签。$(“div:last”)选取最后一个<div>。

C、:not选取不满足选择器条件的标签。$(“input:not(.myclass)”)选取样式名不是myclass的<input>标签。

D、:even、:odd，选取索引是奇数、偶数的标签:$(“input:event”)选取索引是奇数的<input>。

E、:eq、:gt、:lt选取索引等于、大于、小于索引序号的标签，比如$(“input:lt(1)”)选取索引小于1的<input>。

F、$(“:header”)选取所有的h1…h6标签。

G、$(“div:animated”)选取正在执行动画的<div>标签。

10、属性过滤选择器

A、$(“div[id]”)选取有id属性的<div>。

B、$(“div[title=test]”)选取title属性为“text”的<div>。

C、$(“div[title!=test]”)选取title属性不为“text”的<div>。

11、表单对象选择器

A、$(“#form1:enabled”)选取id为form1的表单内所有启用的标签。

B、$(“#form1:disabled”)选取id为form1的表单内所有禁用的标签。

C、$(“#form1:checked”)选取所有选中的标签。(checkBox)。

D、$(“#form1:selected”)选取所有选中的选项标签。(下拉列表)。

12、JQuery的Dom操作

A、使用html()方法读取或设置标签的innerHTML:

alert($“a:first”).html());

$(“a:first”).html(“hello”);

B、使用text()方法读取或设置标签的innerText:

alert($(“a:first”).text());

$(“a:first”).text(“hello”);

C、使用att()方法读取或设置标签的属性:

alert($(“a:first”).attr(href”));

$(“a:first”).attr(“href”, http://www.rupeng.com);

D、使用removeAttr删除属性。

13、动态创建Dom节点

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

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

$(“div:first”).append(link);

Append方法用来在标签的末尾追加标签。

prepend在标签的开始添加标签。

after在标签之后添加标签。

before在标签之前添加标签。

14、删除节点

A、remove()删除选择的节点。

如:清空ul中的项。$(“ul li.testitem”).remove();删除ul下的li id=testitem的标答。

B、remove()方法返回值是被删除的节点对象，还可以继续使用删除的节点。

var lis = $(“#ulsite li”).remove();

$(“#ulsite2”).append(lis);

C、empty()是将节点清空。

15、设定按钮的启用时间

var leftseconds = 10

var intervalid;

$(function(){

$(“#btnReg”).attr(“disabled”,true);

Intervalid = setInterval(“countDown()”,1000);

}

Function CountDown(){

if(leftseconds <= 0){

$(“#btnReg”).val(“同意”);

$(“#btnReg”).attr(“disabled”,false);

clearIntervalid(Intervalid);

return;

}

Leftseconds--;

$(“#btnReg”).val(“请仔细阅读”+ Leftseconds + “”);

}

</script>

16、样式操作

A、获取样式attr(“class”)，设置样式attr(“class”, “myclass”)。

B、追加样式addclass(“myclass”)。

C、移除样式removeclass(“myclass”)。

D、切换样式togleclass(“myclass”)。如果存在则去掉样式，如果不存在则添加。

E、判断样式是否存在:hasclass(“myclass”)。

17、RadioButton操作

A、取RadioButton选中值:

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

<input id= “radio1” checked= “checked” name= “gender” type= “radio” value= “男” />男

<input id= “radio2” checked= “checked” name= “gender” type= “radio” value= “女” />女

<input id= “radio3” checked= “checked” name= “gender” type= “radio” value= “未知” />未知

B、设置RadioButton选中值:

$(“input[name=gender]”).val([“女”]);

18、事件

A、JQuery中事件的绑定:$(“#btn”).bind(“click”,function(){})。

JQuery用$(“#btn”).click(function(){})来简化。

B、调用事件对象的stopPropagation()方法终止事件冒泡。

C、阻止默认行为: 比如超链接点击后会转向新的链接。如果想阻止默认行为只要调用事件对象的preventDefault()方法。

D、属性:pageX、pageY、target获得触发事件的元素（冒泡的起始,和this不一样）。

which如果是鼠标事件获得按键(1左键，2中键，3右键)。

altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。

keyCole、charCode属性发生事件时的keyCode、charCode。

E、移除事件绑定:unbind()方法即可移除元素上绑定的事件，如果bind(“click”)则移除click事件的绑定。

F、一次性事件:如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行绑定。

码农公寓

相关文章