JQuery

百度静态资源库：http://cdn.code.baidu.com/      常用插件连接如bootstrap等

1.JQuery:   导库文件：jquery-3.1.1.min.js
   优点：1.对js做了封装，屏蔽浏览器之间的差异
              2.书写简便，写的更少，做的更多
              3.对ajax做了封装
   页面中优先执行jquery(比onload先执行),并且不会被覆盖
   页面加载完执行：
     a.$(function(){ alert("jqqq")  }; );
     b.$(document).ready(function(){ alert("jquery03"); });

2.js与jquery获取元素区别
   var jsGet=document.getElementById("uname").value;
   var jqGet=$("#uname").val();  
   var divText=$("#uname").text();           //jq获取div文本
   var divText=document.getElementById("uname").innerText;   //js获取div文本
   var divHtml=$("#uname").html();          //jq获取html             
   var divHtml=document.getElementById("uname").innerHTML;      //js获取html 
   $("#uname").html("<h3>文本</h3>");    
   document.getElementById("uname").innerHTML="<h4>文本</h4>"; 

   var html01=document.getElementById("sss").attributes["id"].value;  
   var html02=$("#sss").attr("id");  
   $("#uname").attr("id");        //获取id属性
   $("#uname").attr("id","div02");   //设置id属性，div02      

3.JQ转JS:  转成JS后可以调用JS的方法和属性
   1.[0]下标获取
         var tojs=$("#uname")[0];
         alert(tojs.value);
   2.get方法获取
         var tojs02=$("#uname").get(0);
         alert(tojs02.value);
 JS转JQ：可以使用JQ的方法和属性
    1.var tojq=$(document.getElementById("unameId"));

4.选择器：css中的选择基本都可以使用
    //选择id
     $("#id");  
    //类选择            
     $(".class").css("background-color","red");     //修改样式
    //元素选择
     $("div").css("background-color","red");
    //全部选择
     $("*").css("background-color","red");
    //组合选择 
    $("#mid,h2").css("background-color","aqua");    //选取id为mid和h2
    //包含选择
    var mcontain=$("#mid h2").css("background-color","aqua");   //选取mid的h2
   //子包含
   $("#mid>h2").css("background-color","aqua");    //选取mid的h2
   //选择下一个同级元素（元素类型要相同）
   $("#mid+div").css("background-color","aqua");    
 //选择当前元素下所有同级元素
 $("#mid~div").css("background-color","aqua");

5.修改样式属性：
  a)对象.css("样式"，"样式的值");
     $(".class").css("background-color","red"); 
  b)对象.addClass("mclass");
    $(".class").addClass("myclass");
     .myclass{
          width:100px;
     }
    $(".class").removeClass("myclass other");     //移除myclass 和other样式
    $(".class").toggleClass("myclass");           //切换样式

6.操作dom节点：
  //添加节点 
    var old=$("#oid");
    var var01= $("<li title='pingguo'>苹果</li>");
    old.append(var01);
  //移除节点
     old.remove();              //移除全部        
  //移除子节点
     old.empty()         
  //复制节点
     $("#old  li").click(function(){
          $(this).clone().appendTo(old);      //复制追加到old节点之下
     });
  //替换
      $("#appleId").replaceWith("<li>orange</li>");

7.事件绑定：
  //单个事件绑定 
      $(function(){
        $("#mid02").bind("click",function(){
            $("#mid02").css("color","red");
        });
    });
  $("#mid02").show();     //显示元素
   //多个事件绑定
$(function(){
        $("#mid02").bind("click",function(){
            $("#mid02").css("color","red");
        }).bind("mouseenter",alertInfo=function(){
            alert("aaaa");
        });
    });
//取消绑定
function ubindss(){
      $("#mid02").unbind("mouseenter",alertInfo);       //动态取消绑定alertInfo
  }  

8.动画效果：
   $("#div01").show(3000); //3秒显示  
   $("#div01").hide(3000);  //3秒隐藏
   $("#div01").slideDown();  //从上到下3秒显示
   $("#div01").slideUp();    //从下到上3秒显示
   $("#div01").fadeIn();    //淡入,慢慢加载进来
   $("#div01").fadeOut(); //淡出

9.左边移动到右边
   $(function(){
            $("#btnRight").bind("click",function(){
                var toR=$("#sel002");
                $("#sel001 option:selected").appendTo(toR);      //选项被选中
           });
        });  

10. jquery底层原理
      jquery底层是一个闭包(匿名自调用函数)
      格式：  
               （function(形参){
                           alert(形参);  
                  }）（实参）;
                （function(num){
                           alert(num);
                  }）(123);
          为什么使用$作为开头：window.jQuery=window.$=JQuery;
         
11.$(this)和this关键字在Jquery区别
// this其实是一个Html 元素。能调用元素属性，例如this.id,this.value。
// $this 只是个变量名，加$是为说明其是个jquery对象。$(this)能调用jquery的方法，例如click(), keyup()。
// 而$(this)是个转换，将this表示的dom对象转为jquery对象，这样就可以使用jquery提供的方法操作。

题目：
$(function(){
                var x = $(".c :hidden").length;
                var y= $(".c:hidden").length;
                alert(x+"--"+y);                          //4  3
            });  
<div class="c">
            <div style="display:none;">a</div>
            <div style="display:none;">b</div>
            <div style="display:none;">c</div>
            <div class="c" style="display:none;">d</div>
</div>
        <div class="c" style="display:none;">e</div>
        <div class="c" style="display:none;">f</div>  

















1.选择器进行选择元素:
$(document).ready(function(){
  $("p").click(function(){            $("p")//取得所有<p>元素
    $(this).hide(1000,function(){   //将每个<p>元素都隐藏
             alert("aaaa");                 //在执行完hide后，会调用alert所在的函数  hide(1000，要回调的方法名)
      });                       
 });
});
$(selector).hide(speed,callback); //隐藏元素     speed取值：slow、fast或毫秒
$(selector).show(speed,callback);   //显示元素 （用法类似hide）
$("p").toggle();                                    //切换，隐藏与显示（用法类似hide）
2..$(this).hide()    //隐藏当前元素                    $(".test")    //隐藏所有class="test"的元素
   $("p").hide()      //隐藏所有p元素                  $("#test")    //隐藏所有id为test的元素
   $("p.intro")         //选择所有class为intro的p元素  
   $("p#demo")       //选择所有id为demo的p元素
   $("p").css("background-color","red")   //将所有p元素的背景颜色改为red
   $("ul li:first")       //每个<ul>的第一个<li>元素
   $( "tr:first" ) //取tr中的第一个元素

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

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

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

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


$(document).ready(function(){                        //ready() 防止文档完全加载之前运行jQuery代码
  $("#tmp").click(function(){                             // $("#tmp")获取id为tmp的控件，进行点击事件
    $(".test").hide();                                           // $(".test")对所有class为test的元素进行隐藏
 });
});

3.使用$.noConflict()在冲突时，使用jQuery名称来代替$
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在运行！");
  });
});
var jq=$.noConflict();           //创建jQuery引用，并存入变量供后续使用
jq(document).ready(function(){....});

4.注意：
  • 把所有 jQuery 代码置于事件处理函数中
  • 把所有事件处理函数置于文档就绪事件处理器中
  • 把 jQuery 代码置于单独的 .js 文件中
  • 如果存在名称冲突，则重命名 jQuery 库
常见的jQuery事件：
  1.$(document).ready(function);        //将函数绑定到文档的就绪事件
  2.$(selector).click(function);            //触发或将函数绑定到单击事件
  3.$(selector).dblclick(function);            //双击事件
  4.$(selector).focus(function);                //获取焦点事件
  5.$(selector).mouseover(function)       //鼠标悬停事件

$(document).ready(function(){
  $(".ex .hide").click(function(){            // $(".ex .hide")  ex和 .hide之间要有空格隔开，防止浏览器识别失败
     $(this).parents(".ex").hide("slow");
 });
});

5.淡入淡出：
  <div style="display:none;">   //不显示div
  $("#div1").fadeIn("slow");       //类似hide方法
  $("#div1").fadeOut("slow");
  fadeToggle()                    //淡入与淡出来回切换
  fadeTo()                        //淡入淡出到一定程度
  $(selector).fadeTo(speed,opacity,callback);
    $("#div1").fadeTo("slow",0.15);        //相当于淡入
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);         //相当于淡出

6.CSS注意点:
<style type="text/css">
  div.testpanel,p.testflip                //class为testpanel的div具有大括号里的样式，多个样式以逗号隔开
{
  margin:0px;                                //具体的参数值不要加双引号 " "，并且每行以 分号;结束
  padding:10px;
  text-align:center;
  background-color:#e5eecc;
  border:1px solid f1f1ff1；
}
</style>

7.滑动效果
$(selector).slideDown(speed,callback);   //speed取值可为slow fast或者具体的毫秒数，callback是在向下滑动之后执行的函数名称
$(selector).slideUp(speed,callback);    //参数跟slideDown一样
$(selector).slideToogle(speed,callback);  //元素可以向上和向下滑动

8.动画
     1.$(selector).animate({params},speed,callback);    //params为形成动画的Css属性
     2.html中元素都是静态的，无法移动，如需进行移动等操作时，应先把position设置为relative、fixed或absolute
当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right
     3.<div style="background-color：#f2f2f2;position:absolute"></div>
         $("p").animate({left:'200px'});        //向左移动200像素位置
      
     4.带参数动画
    $(document).ready(function(){
  $("#btn2").click(function(){
     $("div").animate({                //带参数的动画，right:'200'元素值用单引号括住，元素与元素之间用逗号隔开
        right:'200px',
        opacity:'1.0',
        width:'100px',                   //也可以使用 height:'+=150px'   使用相对值，不断增加像素
        height:'100px'                   //height属性值还可以为"show"、"hide" 或 "toggle"  如height:'hide'
     });
  });
});
   
     5.队列动画：animate可以改变css中的大部分属性
  $(document).ready(function(){
  $("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");
  });
});

     6.停止动画.
        $(selector).stop(stopAll,goToEnd);        //stopAll 是否清除动画队列   goToEnd  是否立即完成当前动画   两者默认false       
$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });
  $("#stop").click(function(){ 
    $("div").stop();                 //假设有三个动画队列a b , 无参stop()会停止当前的a,但是b继续执行
  });
  $("#stop2").click(function(){
    $("div").stop(true);          //abc动画全部停止
  });
  $("#stop3").click(function(){
    $("div").stop(true,true);   //abc动画停止，但完成最后的效果
  });
});
    
    7.链接（串式）：在一个元素上运行多条jQuery命令，一条条执行
     $(document).ready(function(){
       $("button").click(function(){
          $("#p1").css("color","red").slideUp(1000).slideDown(1000);
      });
    });

   8.获取html内容:
  • text() - 设置或返回所选元素的文本内容              $("#test1").text("hello world");//设置文本值为hello world
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值
  • attr()  //获取元素的属性                                 $("#test").attr("href")  //获取元素id为test的属性
     $("#test1").text(function(i,oldText){}    //text()回调，i为元素列表中当前元素的下标？？

    9.操作元素:
  • append() - 在被选元素的结尾插入内容，可以加很多个元素                  $("ol").append("<li>Append Item</li>");   //在ol后面追加<li>元素
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容                          $("ol").after("<li>Append Item</li>");       //在ol结束后，新起一个元素
  • before() - 在被选元素之前插入内容         

  • remove()  删除被选元素(及其子元素)
  • empty()   从被选元素中删除子元素                       //相当于清空子元素   
  •                
  • 多种形式的元素添加：
var txt1="<p>Text.</p>";              // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text.";               // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3);  
    
10.CSS:
  • addClass() - 向被选元素添加一个或多个类                 // $("h1,h2").addClass("mblue");   给h1和h2添加样式类mblue
  • removeClass() - 从被选元素删除一个或多个类           //$("h1,h2").removeClass("mblue");
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() 方法设置或返回被选元素的一个或多个样式属性
     获取元素css属性：$("#p1").css("background-color")   
     设置多个元素css属性：$("p").css({"background-color":"yellow","font-size":"200%"});

12.尺寸：

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。


13.Dom树：

  • parent()                      //返回被选元素的直接父元素  $("span").parent().css({"color":"red","border":"2px solid red"});  设置元素css属性时，记得加双引号
  • parents()                    //返回被选元素的所有祖先
  • parentsUntil()             //返回介于给定两个元素之间的祖先元素   $("span").parentsUntil("div");   求span元素到div元素之间的祖先
  • children()                    //返回直接子元素            $("div").children("p.1");//返回div子元素中类名为1的p元素
  • find()                          //查找元素                       $("div").find("*");   //查找所有元素

       siblings() 方法返回被选元素的所有同级元素。          //$("h2").siblings("p");  返回属于h2的同级元素中的所有p元素
        next() 方法返回被选元素的下一个同级元素。           //$("h2").next();      返回与h2同级的下一个元素
      nextAll() 方法返回被选元素之后的所有元素                  //$("h2").nextAll();  返回与h2同级之后的所有元素
      nextUntil() 返回介于两者之间的元素                        //$("h2").nextUntil("h6");  返回h2到h6之间的元素即(h3 h4 h5)
      prev(), prevAll() 以及 prevUntil()    //与next类似

14.过滤元素：
     first() 方法返回被选元素的首个元素。                             // $("div p").first();   返回div元素中第一个p元素，如有多个div选第一个
    last() 方法返回被选元素的最后一个元素。
    eq() 方法返回被选元素中带有指定索引号的元素。            //$("p").eq(1);  索引号从0开始，查找第二个元素
    filter()根据条件返回对应的元素                                //$("p").filter(".intro");  返回class为intro的p元素
    not() 返回与条件不匹配的元素                                //$("p").not(".intro");   返回class不是intro的p元素

15.Ajax:
   $(selector).load(URL,data,callback);            //从服务器加载数据，并把返回的数据放入被选元素
   URL 参数规定您希望加载的 URL。
   data 参数规定与请求一同发送的查询字符串键/值对集合。
   callback 参数是 load() 方法完成后所执行的函数名称。               
  //可选参数  responseTxt调用成功时的结果内容  statusTxt  调用的状态  xhr  XMLHttpRequest对象
     $("#div1").load("/example/jquery/demo_test.txt #p1");           //将/example/jquery/demo_test.txt文本中id=p1的文本加载进来

  • GET - 从指定的资源请求数据           // GET 方法可能返回缓存数据。
  • POST - 向指定的资源提交要处理的数据    //POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
     post与get适用场合:
     get:更简单，数据获取速度更快   
     post情况：
  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

$.get(URL,callback);          //例子:  $.get("/example/jquery/get.asp *",function(data,status)
$.post(URL,data,callback);    //data数据键值对
例子：$.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });

16.XmlHttpRequest对象:
  var xmlhttp=new XMLHttpRequest(); 
    方法：xmlhttp.onreadystatechange
    属性：xmlhttp.readyState==4 && xmlhttp.status==200
    xmlhttprequest将请求发送到服务器:
    open(method,url,async)      method:请求的类型（get或post） url：文件在服务器上的位置  async:true(异步)或false(同步)
    send(string)
  
  xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);   //?t=" + Math.random() 加上，可以确保不是获取缓存中的内容
xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true);    //以get方式获取数据，直接在url后加参数
xmlhttp.onreadystatechange=function()
  {
  if(xmlhttp.readyState==4 && xmlhttp.status==200)        //xmlhttp中的属性，必须加上xmlhttp
   {
    document.getElementById("test").innerHTML=xmlhttp.responseText;
  }
 }
xmlhttp.open("POST","ajax_test.asp",true);             //向服务器请求数据 xmlhttp使用open时async必须设置为true,即open第三个参数
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

通过 AJAX，JavaScript 无需等待服务器的响应，而是：

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

17.ajax响应信息：   
responseText获得字符串形式的响应数据。
responseXML获得 XML 形式的响应数据。//一般需要进行解析
if (xmlhttp.readyState==4 && xmlhttp.status==200)      //当readyState等于4时，onreadystatechange已经触发5（0-4）次
    { xmlDoc=xmlhttp.responseXML;                                //存储服务器响应的xml对象
    txt="";
    x=xmlDoc.getElementsByTagName("title");                 //根据Tag进行查找title元素
    for (i=0;i<x.length;i++){
      txt=txt + x[i].childNodes[0].nodeValue + "<br />";   //x[i].childNodes[0].nodeValue  获取第i个元素的首个节点值
      }
    document.getElementById("myDiv").innerHTML=txt;
    }

18.readyState
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  • 0: 请求未初始化
  • 1: 服务器连接已建立
  • 2: 请求已接收
  • 3: 请求处理中
  • 4: 请求已完成，且响应已就绪
status

200: "OK"                 xmlhttp.status;  状态码    xmlhttp.responseText; 服务器应答文本

404: 未找到页面         xmlhttp.statusText;  状态文本  

xmlhttp.getResponseHeader('Last-Modified')    获取最后修改的应答报文   

<form action="" style="margin-top:15px;"> 
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>     //showCustomer显示客户信息，自定义方法
<option value="BAIDU ">BAIDU, Inc</option>                     //value="APPLE"服务端根据value显示对应的数据
</select>
</form>
xmlhttp.open("GET","/ajax/getcustomer.asp?q="+str,true);          //附加额外的参数，传给服务器

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        txt = "<table border='1'><tr><th>Title</th><th>Artist</th></tr>";         //border='1'   已有双引号时，内部只能用单引号
        x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");    //获取tagName为CD的元素作为xml对象
        for (i = 0; i < x.length; i++) {
            txt = txt + "<tr>";
            xx = x[i].getElementsByTagName("TITLE"); {                                       //取title元素对象
                try {
                    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";               //取title元素对象中的首个子元素值
                } catch(er) {
                    txt = txt + "<td> </td>";
                }
            }
            txt = txt + "</tr>";
        }
        txt = txt + "</table>";
        document.getElementById('txtCDInfo').innerHTML = txt;
    }
}

18.Json: 
  •  JavaScript 对象表示法
  • JSON 是轻量级的文本数据交换格式
  • JSON 独立于语言 *
  • JSON 具有自我描述性，更易理解
json字符串：指的是符合json格式要求的js字符串。例如：var jsonStr = "{StudentID:'100',Name:'tmac',Hometown:'usa'}";
json对象：指符合json格式要求的js对象。例如：var jsonObj = { StudentID: "100", Name: "tmac", Hometown: "usa" };
语法：
  • 数据在名称/值对中
  • 数据由逗号分隔
  • 花括号保存对象
  • 方括号保存数组
var mjson={
"employees": [
{ "firstName":"Bill" , "lastName":"Gates" },
{ "firstName":"George" , "lastName":"Bush" },
{ "firstName":"Thomas" , "lastName":"Carter" }
 ]
}             使用：var obj = eval ("(" + mjson+ ")");         取元素：obj.employees[0].firstName->Bill
var mtest=[{"fname":"kkk","fage":"12'}];         //使用：mtest[0].fname-->kkk
var test='{em:['+                                        //换行用'+'来隔开 ，开头'{}'单引号括住
'{"fname":"kkk","lname":"qqq"},'+
'{"fage":"22","lage":"11"}]}';
var tmp=eval('('+test+')');
document.getElementById("fname").innerHTML=tmp.em[0].fname 
document.getElementById("lname").innerHTML=tmp.em[0].lname; 

<select id="pid" onchange="gradeChange()"> 
    <option grade="1" value="a">选项一</a> 
    <option grade="2" value="b">选项二</a> 
</select> 
<script type="text/javascript"> 
       function gradeChange(){ 
        var objS = document.getElementById("pid"); 
        var grade = objS.options[objS.selectedIndex].grade;    //options是发生事件的select对象数组，objS.selectedIndex是当前选中的option
        alert(grade); 
       } 
</script> 

  • 如果把 options.length 属性设置为 0,Select 对象中所有选项都会被清除。
  • 如果 options.length 属性的值比当前值小，出现在数组尾部的元素就会被丢弃。
  • 如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。
  • 可以通过构造函数 Option() 来创建一个新的 option 对象（需要设置 options.length 属性）。











posted on 2018-03-06 17:59  xiaojiayu0011  阅读(208)  评论(0)    收藏  举报

导航