网站前端技术学习 笔记



自己在编程过程中的总结和注意事项,参考了部分网络知识和W3cSchool上的内容。其中包含javascript、jquery、

写的不够完全,随后我会在完善

//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" οnclick="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表达式(是什么):



部分内容,还没有总结,随后奉献。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

快乐升升

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值