一、JQuery对象和DOM(文本对象模型)对象定义
1)变量定义的区别
var $mObject=JQuery对象;
var m=DOM对象；
2)JQuery对象和DOM对象转化
1、JQuery对象转化为DOM对象
通过[index]和get(index)两种方法可以将JQuery对象转化为DOM对象。方法一：
1var$cr=$("cr"); //JQuery对象
2var cr=$cr[0]; //DOM对象
方法二：
var$cr=$("cr"); //JQuery对象
var cr=$cr.get(0); //DOM对象
2、DOM对象转化为JQuery对象
var cr=doucment.getElementById("cr"); //DOM对象
var$cr=$(cr); //JQuery对象
二、JQuery获取页面上的元素
3)$与JQuery
JQuery为了防止和其它的库有冲突，只建立了一个对象就是jQuery对象，$是jQuery 的缩写形式。因此：
$.ajax和jQuery.ajax是等价的。
4)JQuery的$()简介
JQuery为了达到document.getElementById(“myID”)的目的，采用$(“#myID”)实现。得到ID为myID的元素。
$(“div p”) ：得到所有
元素
$(“div.container”) :得到class为container的
$(“div #msg”) ：得到
$(“table a”,context) ：得到context为上下文的table里面的所有链接元素。
→$(”username”)
→$(“#passwd”)
→$(“.inputcss”)
→$(“[a@rel=’ nofollow self’]”)
$(“a[@rel]”) :选择所有的以为标记并且具有rel属性的元素。
$(“input[name=myname]”) :选择所有的input标签并且标签的名字为myname $(“input[name!=myname]”) :选择所有的input并且标签名字不为myname
$("div > p").html() ：值为div下的p元素中的内容
还可以根据正则表达式来选择。
注意：$("p")和$("#p")的区别,$("p")表示取所有p标签(
)的元素,$("#p")表示取id 为"p"()的元素.5)下面根据正则表达式来选择，以什么结尾
$(“a[herf$=index.htm]”) :选择所有的标签并且这个标签具有以index.htm结尾的href 属性。
6)根据正则表达式来选择，包含什么
$(“a[herf*=https://www.doczj.com/doc/9e12844456.html,]”) : 选择所有的标签并且这个标签的href属性值包含https://www.doczj.com/doc/9e12844456.html,
7)根据属性选择
$("span[id='Unit_" + m_id + "']").html("万元");
可以使用变量表示控件的属性值
8)自定义选择符
$(“tr:odd”) :取得表格中的奇数行
$(“tr:even”) ：取得表格中的偶数行
$(“div.horizontal:eq(1)”) :选择带有horizontal类的div集合中的第2项
$(‘td:contains(“Henry”)’) :”选择表格中包含“Henry”内容的单元格。
$("#orderedlist li:last") : list的最后一个element上生效
alert($("p").get(1).innerHTML); ：alert对话框显示第二个
标签的内容
注意get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML
9)访问某个元素
Var myTag=$(“#myelement”).get(0).tagName
:找到Id=” myelement”的元素的第0个元素的标签名。
var f = $("div");
alert($(f).find("p").html()) ：显示div中的p内容
alert($("img").length); ：弹出alert对话框显示2，表示找到两个匹配对象
10)add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象
Hello
Hello Again
jQuery代码及功能：
function jq(){
var f=$("p").add("span");
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
执行$("p")得到匹配
的对象，有两个，add("span")是在("p")的基础上加上匹配的对象，所有一共有3个，从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合，分别是[ Hello Hello Again
add(el) 在匹配对象的基础上在附加指定的dom元素。
$("p").add(document.getElementById("a"));
add(els) 在匹配对象的基础上在附加指定的一组对象，els是一个数组。
Hello
Hello Again
jQuery代码及功能：
function jq(){
var f=$("p").add([document.getElementById("a"), document.getElemen tById("b")])
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
注意els是一个数组，这里的[ ]不能漏掉。
11)匹配结点的父节点
ancestors () 一依次以匹配结点的父节点的内容为对象,根节点除外（有点不好理解，看看下面例子就明白了）
one
two
jQuery代码及功能：
function jq(){
var f= $("u").ancestors();
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
第一个对象是以的父节点的内容为对象，[ two ]
第一个对象是以的父节点的父节点（div）的内容为对象，[
one
two ]一般一个文档还有
和，依次类推下去。ancestors (expr) 在ancestors（）的基础上之取符合表达式的对象
如上各例子讲var f改为var f= $("u").ancestors(“div”),则只返回一个对象：
[
one
two ]children() 返回匹配对象的子节点
one
two
jQuery代码及功能：
function jq(){
alert($("#ch").children().html());
}
$("#ch").children()得到对象[ two ].所以.html()的结果是”two”
children(expr) 返回匹配对象的子介点中符合表达式的节点
two
three
jQuery代码及功能
function jq(){
alert($("#ch").children(“#sp”).html());
}
$("#ch").children()得到对象[twothree ].
$("#ch").children(“#sp”)过滤得到[three ]
parent () parent (expr)取匹配对象父节点的。参照children帮助理解
contains(str) 返回匹配对象中包含字符串str的对象
This is just a test.
So is this
jQuery代码及功能：
function jq(){
alert($("p").contains("test").html());
}
$("p")得到两个对象，而包含字符串”test”只有一个。所有$("p").contains("test")返回[
This is just a test.
]end() 结束操作,返回到匹配元素清单上操作前的状态.
filter(expr) filter(exprs) 过滤现实匹配符合表达式的对象exprs为数组，注意添加“[ ]”
Hello
Hello Again
And Again
jQuery代码及功能：function jq(){
alert($("p").filter(".selected").html())
}
$("p")得到三个对象，$("p").filter(".selected")只返回class为selected的对象。
find(expr) 在匹配的对象中继续查找符合表达式的对象
Hello
Hello Again
And Again
Query代码及功能：
function jq(){
alert($("p").find("#a").html())
}
在$("p")对象中查找id为a的对象。
is(expr) 判断对象是否符合表达式,返回boolen值
Hello
Hello Again
And Again
Query代码及功能：
function jq(){
alert($("#a").is("p"));
}
在$("#a ")是否符合jquery表达式。
大家可以用$("#a").is("div"); ("#a").is("#a")多来测试一下
next() next(expr) 返回匹配对象剩余的兄弟节点
Hello
Hello Again
And Again
jQuery代码及功能
function jq(){
alert($("p").next().html());
alert($("p").next(".selected").html());
}
$("p").next()返回[
Hello Again
,And Again
]两个对象$("p").next(".selected)只返回[
And Again
]一个对象
prev () prev (expr) 参照next理解
not(el) not(expr) 从jQuery对象中移出匹配的对象，el为dom元素，expr为jQuery表达式。
one
two
jQuery代码及功能：
function js(){
alert($("p").not(document.getElementById("a")).html());
alert($("p").not(“#a”).html());
}
$("p")由两个对象，排除后的对象为[
one
]siblings () siblings (expr) jquery匹配对象中其它兄弟级别的对象
one
two
jQuery代码及功能：
function js(){
alert($("div").siblings().eq(1).html());
}
$("div").siblings()的结果实返回两个对象[
one
，jQuery ] alert($("div").siblings(“a”)返回一个对象[jQuery ]三、JQuery管理样式表
12).addClass()方法把一个CSS类应用到我们选择的对象。
13).removeClass()方法将移除一个CSS类
14).toggleClass(class)
为匹配的元素切换CSS类。例：
HTML 代码:
Hello
Hello Again
jQuery 代码:$("p").toggleClass("selected");
结果:
Hello
,Hello Again
说明：具有selected类的p就没有了，没有的就添加了相应的类四、JQuery中的事件
15)$(document).ready(function(){ })预定了DOM加载完成后（不必等待图像加载完
成）触发的函数调用。
16)给对象添加click事件
$(document).ready(function(){
$(“#Myid”).bind(“click”,function(){
……
$(this).addClass(“……”); //表示给当前对象（Myid）添加样式
});
});
上面代码还可以简写为如下形式：
$(document).ready(function(){
$(“#Myid”).click(function(){
……
$(this).addClass(“……”); //表示给当前对象（Myid）添加样式
});
});
17)交替执行单击事件
$(document).ready(function(){
$(#button).toggle(function(){
事件一；
},function(){
事件二
})；
});
当第一次单击按钮时执行事件一，当第二次单击按钮时执行事件二。
18)鼠标在对象上事件
$(document).ready(function(){
$(“#button”).hover(function(){
鼠标在上事件；
},function(){
鼠标离开事件;
});
});
五、DOM操作
19)给文档对象添加属性
$(document).ready(function(){
$(‘div.chapter a’).each(function(index){
$(this).attr({
‘rel’:’external’,
‘id’:’link_’+index
});
});
});
给文档中class为chapter的div中的每个链接添加rel属性值为external，并添加ID属性值为’link_’+index
alert($("#test").href()); ：显示ID为test的链接
$("#test").href("2.html"); ：修改ID为Test的链接
同理，jQuery还提供类似的其他方法，大家可以分别试验一下：
herf() herf(val) html() html(val) id() id (val) name() name (val)
rel() rel (val) src() src (val) title() title (val) val() val(val)
20)得到对象的属性
$("#test").attr(“name”)
21)在页面中插入HTML元素
$(document).ready(function(){
$(‘回到顶部’).insertAfter(‘div.chapter p’);
});
在div.chapter p之后插入‘回到顶部’，下面的代码与上面功能相同。$(document).ready(function(){
$(‘div.chapter p’).after(‘回到顶部’);
});
.insertBefore()和.before()和上面用法相同。
append(html)在匹配元素内部，且末尾插入指定html
$("
Hello
：向body中添加“
Hello
clone() 复制一个jQuery对象
after
jQueryjQuery代码及功能：
function jq(){
$("#test").clone().appendTo($("a"));
}
复制$("#test")然后插入到后,执行后相当于
after
jQueryafter
empty() 删除匹配对象的所有子节点span
after
jQuery代码及功能：
function jq(){
$("#test").empty();
}
执行后相当于
jQueryremove() 删除匹配对象
注意区分empty()，empty()移出匹配对象的子节点，remove()，移出匹配对象prepend (html) 在匹配元素的内部且开始出插入
通过下面例子区分append(elem) appendTo(expr) prepend (elem)
p
执行$("#a").append($("div")) 后相当于
P
执行$("#a").appendTo($("div")) 后相当于
div
p
执行$("#a").prepend ($("div")) 后相当于
P
wrap(htm) 将匹配对象包含在给出的html代码内
Test Paragraph.
jQuery jQuery代码及功能：function jq(){
$("p").wrap("
");}
执行后相当于
Test Paragraph.
22)判断复选框是否选择
var$cr=$("cr");
$cr.click(function(){
if($cr.is(":checked")){
alert("已经选择复选框");
}
});
六、Javascript处理
23)判断浏览器类型
$(function(){
if($.browser.msie) {
alert("这是一个IE浏览器");}
else if($.browser.opera) {
alert("这是一个opera浏览器");}
})
当页面载入式判断浏览器类型，可判断的类型有msie、mozilla、opera、safari 24)$.each(obj, fn)
obj为对象或数组，fn为在obj上依次执行的函数，注意区分$().each()
$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
分别将0，1，2为参数，传入到function(i)中
25)$.trim(str) 移出字符串两端的空格
$.trim(" hello, how are you? ")的结果是"hello, how are you?"
七、动态效果
hide()隐藏匹配对象
Hello Again
jQuery当点击连接时,id为a的对象的display变为none。
show()显示匹配对象
hide(speed)以一定的速度隐藏匹配对象，其大小（长宽）和透明度都逐渐变化到0，speed有3级("slow", "normal", "fast")，也可以是自定义的速度。
show(speed)以一定的速度显示匹配对象，其大小（长宽）和透明度都由0逐渐变化到正常
hide(speed, callback) show(speed, callback)当显示和隐藏变化结束后执行函数callback
toggle() toggle(speed)如果当前匹配对象隐藏，则显示他们，如果当前是显示的，就隐藏，toggle(speed),其大小（长宽）和透明度都随之逐渐变化。
fadeIn(speeds) fadeOut(speeds)根据速度调整透明度来显示或隐藏匹配对象，注意有别于hide(speed)和show(speed)，fadeIn和fadeOut都只调整透明度，不调整大小
点击连接后可以看到图片逐渐显示。
fadeIn(speed, callback) fadeOut(speed, callback)callback为函数，先通过调整透明度来显示或隐藏匹配对象，当调整结束后执行callback函数
点击连接后可以看到图片逐渐显示,显示完全后弹出对话框
本文由我司收集整编，推荐下载，如有疑问，请与我司联系 jQuery 基础教程第四版第3 章学习笔记 2017/08/30 114 第3 章 3.1 在页面加载后执行任务 3.1.1 代码执行的时机选择①当文档完全下载到浏览器中时，会触发window.onload 事件，意味着页面上的全部元素对于JavaScript 而言都是可以操作的。②通过(document).ready()注册的事件处理程序，则会在DOM 完全就绪并可以使用时调用。意味着所有元素对 脚本而言都是可以访问的，但是，却不意味着所有关联的文件都已经下载完毕。 3.1.2 基于一个页面执行多个脚本①.onload 属性一次只能保存对一个函数的引用，因此不能在现有的基础上再增加新行为。②每次调用(document).ready()方法时都会向内部的行为队列添加一个新函数，当页面加载完成后，所有的函数都会被执行。而且，这些函数会按照注册他们的顺序依次执行。 3.1.3 .ready()的简写形式①(document).ready()结构，实际上是基于document 这个DOM 元素构建而成的jQuery 对象上调用了.ready()方法。②(document).ready(){ //这里是代码……}); 可以简写成：$(function() { //这里是代码……} 3.1.4 向.ready()回调函数中传入参数 3.2 处理简单的事件 3.2.1 简单的样式转换器①在用户单击按钮时执行，需要引入.on()方法。通过这个方法，可以指定任何DOM 事件，并为该事件添加一 种行为。此时，事件是click。eg: (‘#switcher- large’).on(‘click’,function(){});3.2.2 启用其他按钮3.2.3 利用事件处理程序的上下 文①当触发任何事件处理程序时，关键字this 引用的都是携带相应行为的DOM 元素。通过在事件处理程序中使用(this)，可以为相应的元素创建jQuery 对象，然后就如同使用CSS 选择符找到该元素一样对它进行操作。 3.2.4 使用事件上下文进一步减少代码上下文关键字this 引用的是DOM 元素，而不是jQuery 对象，因此可以使用原生的DOM 属性来确定被单击元素的ID。 3.2.5 简写的事件 3.2.6 显示和隐藏高级特性jQuery 的toggleClass()方法，能够根据相应的类是否存在而添加或删除类。 3.3 事件传播 3.3.1 事件的旅程①事件捕获：事件首先会交给最外层的元素，接着再交给更具体的元素。
第一章 一、$(document).ready(function(){ //do something }); 和window.onload的区别 1.前者同一页面可以使用多次，后者出现多次只有最后一次能正确显示 2.前者在DOM模型加载完成后就开始执行，后台在所有元素（包括图片）加载完成 后执行 3.前者可以简化为$(function(){ //do something }); 后者没有简写形式。 二、jQuery比较常使用的是链式操作，比如一个书目导航条： $(function(){ $(“ul”).click(function(){ $(this).addClass(“current”).children(“li”).slideDown().end().sublings().removeClass (“current”).children(“li”).slideUp(); }) }) 对于同一元素不超过3个操作的，一般写同一行，如果操作过多，可以将类似的操纵写成一行，便于阅读。 三、jQuery对象和DOM对象的转换 1.jQuery转化为DOM对象 Var $variable = $(“tr”); //jQuery object Var variable = $variable[0]; //DOM object The transpartent method. DomObject = jQueryObject[index] or = jQueryObject.get(index). 2.DOM Object To jQuery Object Var variable = getElementsByTagName(“tr”); //DOM object Var $variable = $(variable) // jQuery object; The transpartent method. jQueryObject = $(DomObject) 四、jQuery开发工具 1.Dreamweaver 可以安装插件提示jQuery 插件名称：jQuery_API.mxp 2.Aptana 功能非常强大的、开源、专注javascript和Ajax开发IDE; 3.Visual Studio 2008。想要安装插件之后才能提示jQuery
HTML5+CSS3响应式布局笔记 第一章：HTML5,CSS3响应式布局入门 响应式布局：流式设计，弹性布局... 指针对任一设备对网页内容进行完美布局的一种显示机制。 视口：指浏览器窗口内的内容区域，不包含工具栏，标签栏等。 CSS3是在CSS2基础上按模块构建的，以CSS2.1标准为核心。 实现响应式设计的关键技术是CSS3—媒体查询。 响应式布局的条件：CSS3的媒体查询，流动布局。 原则：让设计在多平台多视口的情况下保留尽可能多的内容，而不是使用display：none隐藏它。 可以通过调整标签的先后顺序来显示大小屏内容顺序问题。 第二章：媒体查询，支持不同的视口 html4中的媒体查询： 加载CSS的四种方法：行内，内链，外链，import。其中import会增加css请求，影响速度。@import url(“phone.css”) screen and (max-width: 媒体查询可以检测到如下特性，但最常用的是视口宽度（width）和屏幕宽度（device-width）: width:视口宽度。 height:视口高度。 device-width:屏幕宽度。 device-height:屏幕高度。 orientation:检查设备处于横向还是纵向。 aspect-ratio:基于视口宽度和高度的宽高比。如16：9写为aspect-ratio:16/9. device-aspect-ratio:设备屏幕的高宽比。 color:每种颜色的位数。例如min-color:16会检测设备是否拥有16位颜色。 color-index:设备的颜色索引表中的颜色数。值为非负整数。 monochrome:检测单色帧缓冲区中每像素所使用的位数。值为非负整数，比如 monochrome:2。 resolution:用来检测屏幕或打印机的分辨率。如min-resolution:300dpi或 min-resolution:300dpcm。 scan:电视机的扫描方式，值可设为progressive(逐行扫描)或interlace(隔行扫描)。 grid:用来检测输出设备是网格设备还是位图设备。 以上除了scan和grid都可以使用min，max创建一个查询范围。 Respond.js(https://https://www.doczj.com/doc/9e12844456.html,/scottjehl/Respond)是为Internet Explorer 8 及更低版本增加媒体查询支持的最快的JavaScript 工具,但它目前无法解析CSS 的@import
第4章WEB04- JQuery篇 1.1使用JQuery完成定时弹出广告：1.1.1需求： 之前使用的JS的方式完成定时弹出广告，现在使用JQuery完成同样的效果: 1.1.2分析 1.1. 2.1技术分析： 【JQuery的概述】 什么是JQuery: JQuery是一个JS的框架（JS的类库）.对传统的JS进行了封装. 现在企业的开发中往往不会使用传统的JS进行开发，通常都会使用JS框架进行开发. JS的常用的框架:
JQuery,ExtJS,DWR,Prototype... JQ的使用: 学习JQuery的语法. 【JQuery的入门】 引入Jquery的js文件. JQuery的入口函数: // 传统的JS的方式：页面加载的事件只能执行一次. /*window.onload = function(){ alert("aaa"); } window.onload = function(){ alert("bbb"); }*/ // JQuery的方式：相当于页面加载的事件,可以执行多次.效率比window.onload要高. // window.onload 等页面加载完成后执行该方法. // $(function(){}):等页面的DOM树绘制完成后进行执行. // $相当于JQuery $(function(){ alert("aaa"); }); $(function(){ alert("bbb"); }); 【JS对象和JQ对象的转换】 window.onload = function(){ // 传统JS方式： var d1 = document.getElementById("d1"); // JS对象的属性和方法: // d1.innerHTML = "JS对象的属性"; // d1.html("aaaaaa"); // 将JS对象转成JQ的对象. $(d1).html("JS对象转成JQ对象"); } $(function(){ var $d1 = $("#d1"); // $d1.html("JQ对象的属性"); // 转成JS的对象:
esayUI 前端开发：企业中java工程师，大多不擅于HTML+CSS 网页布局设计，门户网站（由前端工程师设计），企业内部应用软件（java工程师，选择前端UI框架ExtJS 、Flex 、Easy UI ） ---------------------- Easy UI 学习成本非常低 easyui 最新版本1.3.4，bos开发使用1.3.2版本 ExtJS 2.x 免费，3.x 开始收费 Easy ui 1.2.3版本开始收费 问题：为什么你不用ExtJS ? easy ui 学习成本低，很容易在项目中集成使用，ExtJS 学习成本高昂 EasyUI+tutorial.CHM 官方demo例子 jQuery_EasyUI.doc demo例子 EasyUI-API+1.3.2.chm 中文api jquery.EasyUI-1.3.1+API.chm 英文api jquery-easyui-1.3.2.zip 框架开发包 目录结构分析 demo 示例 locale 国际化信息文件（默认英文提示信息）
plugins 框架功能js文件 src 源码 themes 主题样式 自带5套主题，icons 图标文件 easyloader.js 核心加载器（加载plugins 功能js） jquery-1.8.0.min.js jquery开发js文件 jquery.easyui.min.js easy ui 框架功能js合集 jquery.easyui.min.js == easyloader.js + plugins/* 1.如何在页面中使用easy ui ？ 引入四个文件 2、学习使用easy ui 布局功能 layout 布局控件使用 将body、div 分成东西南北中，五个部分
//jquery easyui主要的js 列表展示数据 代码如下:
| 编号 | 卡名 | 密码常见WEB安全漏洞及整改建议常见WEB安全漏洞及整改建议 1. HTML表单没有CSRF保护 1.1 问题描述： CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。 CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账……造成的问题包括：个人隐私泄露以及财产安全。 1.2 整改建议： CSRF的防御可以从服务端和客户端两方面着手，防御效果是从服务端着手效果比较好，现在一般的CSRF防御也都在服务端进行。有以下三种方法： (1).Cookie Hashing(所有表单都包含同一个伪随机值)： (2).验证码 (3).One-Time Tokens(不同的表单包含一个不同的伪随机值) 1.3 案例： 1.服务端进行CSRF防御 服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。 1.3.1 Cookie Hashing(所有表单都包含同一个伪随机值)： 这可能是最简单的解决方案了，因为攻击者不能获得第三方的Cookie(理论上)，所以表单中的数据也就构造失败. //构造加密的Cookie信息 $value = “DefenseSCRF”; setcookie(”cookie”, $value, time()+3600); ?> 在表单里增加Hash值，以认证这确实是用户发送的请求。 $hash = md5($_COOKIE['cookie']); ?> ”> 然后在服务器端进行Hash值验证 if(isset($_POST['check'])) { $hash = md5($_COOKIE['cookie']); if($_POST['check'] == $hash) { doJob(); } else { jquery如何进行表单验证样例JQuery笔记-表单验证大全 jquery.validate.js 是 jquery 旗下的一个验证插件，借助 jquery 的优势，我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。 举个例子，有这么一个表单： view plaincopy to clipboardprint? |
|---|