JQuery学习笔记（1）

一，JQuery有哪些特性：

  JQuery是一个javascript的函数库，这个库可以完成以下功能：

 HTML元素选取HTML元素操作CSS操作HTML事件函数JQueryScript特效和动画HTML DOM遍历和修改AJAXUtilities

二，JQuery的一些语法

$(this).hide() 隐藏当前的HTML元素

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

$(".test").hide() 隐藏class="test"的元素

$("p").hide() 隐藏所有<p>元素

可以得到其基础语法为：$(selector).action()

三，文档就绪函数：$(document).ready(function(){

          .......

 })

是为了防止文档在完全加载之前运行JQuery代码

四，JQuery元素选择器

      JQuery使用CSS选择器来选取HTML元素

     $("p") 选取<p>元素

     $("p.intro")选取所有class="intro"的<p>元素

     $("p#intro")选取所有id="intro"的<p>元素

五，JQuery属性选择器

     JQuery使用Xpath表达式来选择带有给定属性的元素

     $("[href]")选取所有带有href属性的元素

     $("[href='#']")选取所有带有href值等于"#"的元素

    $("[href！='#']")选取所有带有href值不等于"#"的元素

    $("[href='.jpg']")选取所有href值以".jpg"  结尾的元素

六，JQuery CSS选择器

     $("p").css("background-color","red");  选中一个CSS标签，并改变其中的CSS样式

七，JQuery事件

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

           $("p").hide();

 }) 当按钮的点击事件被触发时会调用hide()函数

通用的函数表达式为：$(selector).hide(speed,callback);  $(selector).show(speed,callback); 

speed参数规定隐藏／显示的速度，取值可以是：slow,fast或者毫秒；callback参数是隐藏或显示完成后所执行的函数名称

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

      $("p").toggle();  这个函数 可以切换hide()和show()

 })

八，JQuery的淡入、淡出方法：fadeIn，fadeOut，fadeToggle，fadeTo

      $(selector).fadeIn(speed,callback);

     $(selector).fadeOut(speed,callback);

     $(selector).fadeToggle(speed,callback);

     $(selector).fadeTo(speed,opacity,callback);  opacity表示允许渐变为给定的不透明度，值介于0到1之间

九，JQuery的滑动效果 slideDown，slideUp，slideToggle

     $(selector).slideDown(speed,callback);  向下滑动收起

     $(selector).slideUp(speed,callback);  向上滑动收起

     $(selector).slideToggle(speed,callback);   切换上述两种功能

十，JQuery的动画效果

     $(selector).animate({params},speed,callback);

    params参数必需，这个形成动画的CSS属性(就是这个参数里也是CSS语句，改变了之前的CSS样式)；speed参数规定效果的时长（slow,fast,毫秒）；callback参数是动画完成后所执行函数的名称

举例：$("button").click(function(){

     $("div").animate({left:'250px'});

})

默认所有的HTML元素都有一个静态的位置，且无法移动，如果需要对位置进行操作，记得首先把元素的CSS position属性设置为relative,fixed,或者absolute

十一，JQuery stop()

     $(selector).stop(stopAll,goToEnd); stopAll规定是否清除动画队列，默认是false，即仅停止活动的画面，允许任何排入队列的动画向后执行；goToEnd 参数规定是否立即完成当前动画

十二，JQuery chaining

      该技术允许我们在相同的元素上运行多条JQuery命令，一条接着另一条

      $("#p1").css("color","red")

          .slideUp(2000)

          .slideDown(2000);

十三，JQuery获取并操作HTML元素和属性

         DOM = Document Object Model(文档对象模型)

获得HTML的内容 text();html();val()    

       text（） 设置或返回所选元素的文本内容

       html（） 设置或返回所选元素的内容（包括HTML标记）

       val()    设置或返回表单字段的值

获得属性  attr()

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

          alert($("#w3s").attr("href"));

})       

十四，JQuery设置内容和属性

在text();html();val()的括号中可以带所设置的新的内容的参数（支持回掉函数）：

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

          $("#test1").text("hello world!");  hello worl即新设置的内容

})     

设置属性：

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

  $("#w3s").attr("href","http://www.w3cschool.com.cn/jquery"); 这里把w3s的href属性修改为http://www.w3cschool.com.cn/jquery

})     

attr也可以设置多个属性（支持回调函数）：

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

  $("#w3s").attr({

       "href":"http://www.w3cschool.com.cn/jquery",

        "title":"W3Shool jQuery Tutorial"

  });

})     

十五，JQuery添加新的HTML内容

append(); 在被选元素的结尾插入元素

prepend();在被选元素的开头插入内容

after(); 在被选元素之后插入内容

function appendText() { var txt1="<p>Text.</p>"; // 以 HTML 创建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 }

通过after()和befer()方法添加若干新元素

function afterText() { var txt1="<b>I </b>"; // 以 HTML 创建新元素 var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素 var txt3=document.createElement("big"); // 通过 DOM 创建新元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素 }