JQuery学习

JQuery基础学习

1. 语法： 

    $(document).ready(function(){
    文档加载后运行
    --- jQuery functions go here ----
    
    });
    //1 事件：
    $(this).clickf(function(){});
    $(document).ready(function)
    $(selector).dblclick(function)
    $(selector).focus(function)
    
    $(this).hide()
    $(selector).show(speed,callback);//可控制速度
    $(selector).toggle(speed,callback);
    
    //2 选择器
    $('p.info')
    
    $('[href='#']')//带有href 属性，且值为#的全部元素
    $("[href!='#']")
    $("[href!='.jpg']")//以'.jpg'结尾的全部元素
    
   // 3 修改css的样式
    $("p").css("background-color","red");
    
    //4 解决命名冲突
    $.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍在运行！");
      });
    });
    
   // 5 动画：淡入淡出
    fadeIn()
    fadeOut()
    fadeToggle()
    fadeTo("slow",0.15)//控制效果
    
   // 6 动画：滑动
   slideDown()
    slideUp()
    slideToggle()
    
   // 7 动画：animate()
    $(selector).animate({params},speed,callback);
    $("div").animate({left:'250px'},'300');
    height:'toggle'
    height:'+=150px',//相对位置
    
    //如需对位置进行操做，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
    
   // 8 动画中止:stop
    $(selector).stop(stopAll,goToEnd);
    $("#panel").stop();
    $("#panel").stop(false,false);
    
   // 9 动画：连接
    jQuery - Chaining
    
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);

2. html 获取

 

/*1 获取内容*/
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

关于增删元素

//        1 attr属性值

$("#w3s").attr("href")
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
 $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
 $("#w3s").attr("href", function(i,origValue){//含回调函数
    return origValue + "/jquery";
  });

//        2 text()参数及回调函数
$("#w3s").text('new test');

 $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });

//        3 添加元素
append() - 在被选元素的结尾插入内容  成为子节点
prepend() - 在被选元素的开头插入内容
after() - 在被选元素以后插入内容         成为兄弟节点
before() - 在被选元素以前插入内容
------------------------------------------------------
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);         // 追加新元素

//        4 删除元素
remove(".italic") - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素   

 

1. 关于CSS操做

   //        1 添加class
   $("h1,h2,p").addClass("blue");
   
   //        2 移除class
   $("h1,h2,p").removeClass("blue");
   
   //        3  toggleClass() 方法
   $("h1,h2,p").toggleClass("blue");
   
   //        4 CSS()
   $("p").css("background-color");//样式值
   css("propertyname","value");
   $("p").css({"background-color":"yellow","font-size":"200%"});
   
   //        5 css尺寸方法
   
   width()
   height()
   innerWidth()
   innerHeight()
   outerWidth()
   outerHeight()

    

2. jQuery遍历

 　　

• parent()
• parents()
• parentsUntil()

---

 

• children()
• find()

$("div").children("p.1");

　　水平遍历

• siblings()  全部同胞元素
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

---

 

　　元素过滤

first(), last() 和 eq()   filter() 和 not() 

---

 

1. AJAX加载

   //        1 jQuery load() 方法
   $(selector).load(URL,data,callback);
   必需的 URL 参数规定您但愿加载的 URL。
   可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
   可选的 callback 参数是 load() 方法完成后所执行的函数名称
   
   $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
       if(statusTxt=="success")
         alert("外部内容加载成功！");
       if(statusTxt=="error")
         alert("Error: "+xhr.status+": "+xhr.statusText);
     });
   
   <%
   response.write("This is some text from an external ASP file.")
   %>
   
   //        2 get()
   $.get(URL,callback);
   $("button").click(function(){
     $.get("demo_test.asp",function(data,status){
       alert("Data: " + data + "\nStatus: " + status);
     });
   });
   
   //        3 post()
   $.post(URL,data,callback);
   $("button").click(function(){
     $.post("demo_test_post.asp",
     {
       name:"Donald Duck",
       city:"Duckburg"
     },
     function(data,status){
       alert("Data: " + data + "\nStatus: " + status);
     });
   });
   
   <%
   dim fname,city
   fname=Request.Form("name")
   city=Request.Form("city")
   Response.Write("Dear " & fname & ". ")
   Response.Write("Hope you live well in " & city & ".")
   %>