jquery基础学习

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

  
  

   
       - 美元符号定义 jQuery
  
  
  
  

   
       - 选择符（selector）“查询”和“查找” HTML 元素
  
  
  
  

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

  
  
 
 
 
 

  
  ready
 
 
 
 

  
  $(document).ready(function(){
 
 
 
 

  
  --- jQuery functions go here ----
 
 
 
 

  
  });
 
 

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
 
 

  
  

   
       - 试图隐藏一个不存在的元素
  
  
  
  

   
       - 获得未完全加载的图像的大小
  
  
 
 

jQuery 元素选择器

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

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

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

jQuery 属性选择器

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

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

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

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

jQuery CSS 选择器

$("p").css("background-color","red"); 把所有 p 元素的背景颜色更改为红色：

jQuery 事件

$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

隐藏与显示

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

淡入淡出

$(selector).fadeIn(speed,callback);   //
$(selector).fadeOut(speed,callback);   //
$(selector).fadeToggle(speed,callback);  //如果元素已淡出
$(selector).fadeTo(speed,opacity,callback); //允许渐变为给定的不透明度
滑动
$(selector).slideDown(speed,callback); //向下滑动元素
$(selector).slideUp(speed,callback);  //向上滑动元素
$(selector).slideToggle(speed,callback);  // slideDown() 与 slideUp() 方法之间进行切换
动画
$(selector).animate({params},speed,callback);   //创建自定义动画
$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em', color:'red'},"slow");
});

注意：paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right

jQuery 方法链接

链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

优点：这样的话，浏览器就不必多次查找相同的元素。|

获得内容 - text()、html() 以及 val()

    - text() - 设置或返回所选元素的文本内容

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

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

获取属性  - attr()

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

设置内容  - text()、html() 以及 val()

设置属性  - attr()

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

添加新的 HTML 内容

$("p").append("Some appended text.");  //在被选元素的结尾插入内容
$("p").prepend("Some prepended text.");  //在被选元素的开头插入内容
$("img").after("Some text after");  //在被选元素之后插入内容

$("img").before("Some text before");  //在被选元素之前插入内容

  
  

   
   
        
        

         
         三种创建元素方法
        
        
        
        

         
         
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";

        
        
  
  

删除元素/内容

$("#div1").remove();  //删除被选元素及其子元素
$("p").remove(".italic");  //允许对被删元素进行过滤
$("#div1").empty();  //删除被选元素的子元素

jQuery 操作 CSS

$("h1,h2,p").addClass("blue");  //添加 class 属性

$("h1,h2,p").removeClass("blue");  //删除指定的 class 属性
$("h1,h2,p").toggleClass("blue");  //被选元素进行添加/删除类的切换操作

  
  

   
   
    
    

     
     
$("p").css("background-color");  //返回指定的 CSS 属性的值
$("p").css("background-color","yellow");  //设置指定的 CSS 属性
$("p").css({"background-color":"yellow","font-size":"200%"});  //置多个 CSS 属性
    
    
  
  

jQuery 尺寸

$("#div1").width(); $("#div1").width(500);  //设置或返回元素的宽度（不包括内边距、边框或外边距）

$("#div1").height(); $("#div1").height(500);  //返回元素的高度（不包括内边距、边框或外边距）

$("#div1").innerWidth();  //返回元素的宽度（包括内边距）

$("#div1").innerHeight();  //返回元素的高度（包括内边距）

$("#div1").outerWidth();  //返回元素的宽度（包括内边距和边框）

$("#div1").outerHeight();  //返回元素的高度（包括内边距和边框）

$("#div1").outerWidth(true);   //返回元素的宽度（包括内边距、边框和外边距）

$("#div1").outerHeight(true);  //返回元素的高度（包括内边距、边框和外边距）

jQuery 遍历

$("span").parent();   //返回被选元素的直接父元素

$("span").parents();  //返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)

$("span").parents("ul");  //使用可选参数来过滤对祖先元素的搜索

$("span").parentsUntil("div");  //返回介于两个给定元素之间的所有祖先元素

$("div").children();  //返回被选元素的所有直接子元素

$("div").find("span");  //返回被选元素的后代元素，一路向下直到最后一个后代

$("h2").siblings();  //返回被选元素的所有同胞元素

$("h2").next();  //返回被选元素的下一个同胞元素

  
  

   
   
    
    

     
     
$("h2").nextAll();  //返回被选元素的所有跟随的同胞元素
    
    
  
  

$("h2").nextUntil("h6");  //返回介于两个给定参数之间的所有跟随的同胞元素

 
 

  
  prev(), prevAll() & prevUntil()  //返回的是前面的同胞元素,类似next...
 
 
 
 

  
  
$("div p").first();  //返回被选元素的首个元素
  
  
$("div p").last();  //返回被选元素的最后一个元素
  
  
$("p").eq(0);  //返回被选元素中带有指定索引号的元素,索引号从 0 开始
  
  
$("p").filter(".intro");  //返回带有类名 "intro" 的所有 <p> 元素
  
  
$("p").not(".intro");  //返回不带有类名 "intro" 的所有 <p> 元素