j2ee学习笔记之前端（js、jQuery、html、html5、webService、ajax、css）—— 一直会补充
2015-09-12 20:48
1066 查看
//javascript 2015-07-31
这是我在做项目和学习过程中对前端相关知识的记录和总结，我会一直对此文档进行完善和补充，敬请关注。
match:
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
isNaN:
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
注意：
- 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。或者同时存在于两个部分中。
- 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。
现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
- JavaScript 会在页面 《加载时》 向 HTML 的 <body> 写文本
- 通常的做法是把函数放入 <head> 部分中，或者放在页面底部。
这样就可以把它们安置到同一处位置，不会干扰页面的内容。
- 变量声明之后，该变量是空的（它没有值）。
提示：
一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
dody中的javascript函数：
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
-提示：我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。
提示：外部脚本不能包含 <script> 标签。
注意：
-javaScript对大小写敏感
-JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性
-您可以在 《文本字符串》 中使用 反斜杠 对代码行进行换行
-JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。
而对于传统编程来说，会在执行前对所有代码进行编译。
声明语句：
1-声明也可横跨多行：
var name="Gates",
age=56,
job="CEO";
2-在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
在执行过以下语句后，变量 carname 的值将是 undefined：
var carname;
3-如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;
javaScript中的对象：
-在 JavaScript 中，对象是数据（变量），拥有属性和方法。
例子：字符串为例
var txt="Hello"; 其实已经创建一个javascript字符串对象
属性：
length
方法：
txt.indexOf()
txt.replace();
txt.search();
javaScript中几乎所有事物都是对象：
字符串、数字、数组、日期、（函数 也是对象）、自定义的对象（new Object()）等等
自定义对象：
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
提示：
在面向对象的语言中，使用 camel-case（驼峰） 标记法的函数是很常见的--》someMethod（）
JavaScript 变量的生存期：
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
给尚未声明的变量赋值，就是全局变量：
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
JavaScript库（框架）：
JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。
为了应对这些调整，许多的 JavaScript (helper) 库应运而生。
这些 JavaScript 库常被称为 JavaScript 框架。
我们将了解到一些广受欢迎的 JavaScript 框架：
•jQuery
•Prototype
•MooTools
javaScript正则表达式：
//ECMAScript语法
//jquery2015-08-11
jQuery简介：
jQuery 是目前最受欢迎的 JavaScript 框架。
它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
jQuery 同时提供 companion UI（用户界面）和插件。
Jquery选择器：
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color","red");
更多实例：（可参考jQuery选择器参考手册）http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$(this) 当前 HTML 元素
* 选择器选取文档中的每个单独的元素，包括 html、head 和 body。
$(*);
提示：
根据实践，某些浏览器使用 * 的处理速度缓慢。
$(".intro.demo") 所有class="intro"且class="demo"的元素
:first
$("p:first") 第一个 <p> 元素
:last $("p:last")
最后一个 <p> 元素
:even $("tr:even")
所有偶数 <tr> 元素
:odd $("tr:odd")
所有奇数 <tr> 元素
Jquery动画：
提示：可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，
必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
实例
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
实例
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用队列功能（连续执行自定义的动画）
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，
jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
实例 1
隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
jQuery与Ajax：
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示：
如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。
注意：
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
javaScript和jquery的命名空间：
Xpath表达式（是什么）：
//Web Services
//ajax
//html5
//css
//html
这是我在做项目和学习过程中对前端相关知识的记录和总结，我会一直对此文档进行完善和补充，敬请关注。
match:
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="/i/eg_bulboff.gif";
}
isNaN:
if(x==""||isNaN(x))
{
alert("Not Numeric");
}
注意：
- 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。或者同时存在于两个部分中。
- 那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。
现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
- JavaScript 会在页面 《加载时》 向 HTML 的 <body> 写文本
- 通常的做法是把函数放入 <head> 部分中，或者放在页面底部。
这样就可以把它们安置到同一处位置，不会干扰页面的内容。
- 变量声明之后，该变量是空的（它没有值）。
提示：
一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
dody中的javascript函数：
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>
-提示：我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。
提示：外部脚本不能包含 <script> 标签。
注意：
-javaScript对大小写敏感
-JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性
-您可以在 《文本字符串》 中使用 反斜杠 对代码行进行换行
-JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。
而对于传统编程来说，会在执行前对所有代码进行编译。
声明语句：
1-声明也可横跨多行：
var name="Gates",
age=56,
job="CEO";
2-在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。
在执行过以下语句后，变量 carname 的值将是 undefined：
var carname;
3-如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;
javaScript中的对象：
-在 JavaScript 中，对象是数据（变量），拥有属性和方法。
例子：字符串为例
var txt="Hello"; 其实已经创建一个javascript字符串对象
属性：
length
方法：
txt.indexOf()
txt.replace();
txt.search();
javaScript中几乎所有事物都是对象：
字符串、数字、数组、日期、（函数 也是对象）、自定义的对象（new Object()）等等
自定义对象：
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
提示：
在面向对象的语言中，使用 camel-case（驼峰） 标记法的函数是很常见的--》someMethod（）
JavaScript 变量的生存期：
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
给尚未声明的变量赋值，就是全局变量：
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
JavaScript库（框架）：
JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。
为了应对这些调整，许多的 JavaScript (helper) 库应运而生。
这些 JavaScript 库常被称为 JavaScript 框架。
我们将了解到一些广受欢迎的 JavaScript 框架：
•jQuery
•Prototype
•MooTools
javaScript正则表达式：
//ECMAScript语法
//jquery2015-08-11
jQuery简介：
jQuery 是目前最受欢迎的 JavaScript 框架。
它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。
jQuery 同时提供 companion UI（用户界面）和插件。
Jquery选择器：
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color","red");
更多实例：（可参考jQuery选择器参考手册）http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$(this) 当前 HTML 元素
* 选择器选取文档中的每个单独的元素，包括 html、head 和 body。
$(*);
提示：
根据实践，某些浏览器使用 * 的处理速度缓慢。
$(".intro.demo") 所有class="intro"且class="demo"的元素
:first
$("p:first") 第一个 <p> 元素
:last $("p:last")
最后一个 <p> 元素
:even $("tr:even")
所有偶数 <tr> 元素
:odd $("tr:odd")
所有奇数 <tr> 元素
Jquery动画：
提示：可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，
必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
实例
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
实例
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用队列功能（连续执行自定义的动画）
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，
jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
实例 1
隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
jQuery与Ajax：
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示：
如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。
注意：
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
javaScript和jquery的命名空间：
Xpath表达式（是什么）：
//Web Services
//ajax
//html5
//css
//html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript学习笔记8-jQuery基本过滤选择器深度解析
- jQuery常用Event-API
- jQuery 中 attr() 和 prop() 方法的区别
- jQuery使用ajax跨域获取数据
- jQuery常用Method-API
- jQuery中的九类选择器
- jQuery判断checkbox是否选中
- 【转】js/jquery中刷新iframe方法(兼容主流)
- jquery treeview（树状菜单） 插件参数说明
- 利用jquery each方法遍历<span>内容
- jquery validation验证身份证号、护照、电话号码、email
- jQuery二级联动动态列表
- Jquery中的$().each,$.each的区别
- jQuery实现select多选框左右添加，包括双击事件
- PHP相关文件操作函数和jquery.Form文件上传
- jquery base64 加密解密 request 文本字段传输
- jQuery的deferred对象详解
- jquery实现最简单的滑动菜单效果代码
- jQuery实现自动切换播放的经典滑动门效果
- JQuery中的bind、delegate、on、live方法的区别及简单介绍