js专题

Javascript学习专题

第一天

Js的语法模式：

 

相关解释：

引入方式：第一种是嵌套引入；

                    第二种是文件引入： 输出部分：

/********-****/ 输出部分：value=ip div节点的输出js部分 输出部分：ip的在div里面显示出来

第四天

Jquery的学习  js类库

 

引入方法：第一种方式文件引入；

第二种嵌入式引入：

 $(document).ready(function(){

        $("button").click(function(){

                 $("p").hide();

                   });

          });

 

 

Jq的基本语法：

基础语法是：$(selector).action()

$符号定义 jQuery

选择符（selector）HTML 元素

jQuery 的 action() 执行对元素的操作

 

例证：$(this).hide() - 隐藏当前元素，this指当前元素

$("p").hide()- 隐藏所有

$(".test").hide()- 隐藏所有 class="test"的段落

$("#test").hide()- 隐藏所有 id="test"的元素

 

基本语法;加载jq方法

$(document).ready(function(){

 --- 相关代码----

});

 //函数的相关载入类似window.onload但又有区别

 

1、Jquery选择器的各种用法

$(this) 当前元素

$("p") 所有

元素

$("input") 所有input元素

$(".intro") 所有class=“intro” 的元素

$("p.intro") 所有class="intro" 的

元素

$("#intro") id="intro" 的第一个元素

$("ul > li") ul下的所有li节点

$("ul li:first") 每个

的第一个
• 元素
  
  $("[href$='.jpg']") 所有带有以".jpg" 结尾的href 属性的属性
  
  $("div#intro .head") id="intro" 的
  元素中的所有class="head" 的元素
  
  $(li[a:contains('Register')]") 内容包含Register的元素
  
  $("input[@name=bar]") name是bar的元素
  
  $("input[@type=radio][@checked]") type是radio的元素
  
  $(“li”).not(“ul”) li下没有包含ul节点的节点元素
  
  $("span[@id]") 包含id属性的元素
  
  $("[@id=span1]") id为span1的节点元素

  2、Jquery事件器的介绍

  $(selector).click() 被选元素的点击事件
  
  $(selector).dblclick() 被选元素的双击事件
  
  $(selector).focus() 被选元素的获得焦点事件
  
  $(selector).mouseover() 被选元素的鼠标悬停事件
  
  $(selector).css(); 被选元素的CSS事件
  
  $(selector). hide(); 被选元素的隐藏事件
  
  $(selector). show('slow'); 被选元素的显示事件

   

   

   

  Jquery实现隐藏 显示的功能：

   

  $(selector).hide(speed,callback)  //隐藏

  $(selector).show(speed,callback) //显示

  Speed是速度 slow fast具体时间微秒

   

  $(document).ready(function(){
  
  $("button").click(function(){
  
  $("p").hide(1000,function(){
  
  $("p").show(1000);
  
  });
  
  });
  
  });

  
  
  $(selector).toggle(speed,callback) //切换功能

  $(selector).slideDown(speed,callback) //向下滑动，并显示遮挡

  $(selector).slideUp(speed,callback) //向上滑动，并隐藏遮挡

  $(selector). slideToggle(speed,callback)//上下滑动，实现切换

  $(selector). fadeOut(speed,callback) //变淡至空

  $(selector). fadeIn(speed,callback) //变亮至全部

  $(selector).fadeTo(speed,opacity,callback) //变淡至指定效果

  $(selector).animate({params},duration,easing,callback)//动画

  
  
  

  几个实例代码：

  定时器和清除定时

  var iTimefunction aa()
  {aaa.value += "pp";//往input里value写入pp
  iTime=setTimeout("aa()",600);//600微妙执行一次}
  function bb()
  {
  if (iTime !="")
  clearTimeout(iTime);//清除定时器
  }
  aa();
  

  
  
  

  jquery的几个实例代码：

  
  
  //引入jq文件 使用的是谷歌连接
  
  This is a heading
  This is a paragraph.
  This is another paragraph.
  This is another paragraph.
  This is a heading
  This is another paragraph.
  This is another paragraph.
  This is another paragraph.
  This is another paragraph.
  测试文本
  
  
  
  1
  2
  3
  4
  567