jquery践行

2016-05-13 本文已影响148人 _士心_

jquery的優勢

成熟,大家都在用有問題baidu一下就解決了
遍歷dom還有選擇元素上面比js友好一點
消除了兼容性問題
$.ajax挺好用的
jquery ui封裝了很多我們常用的組建,
庫豐富,許多我們想要得功能的都能找到

准備工作:js js js 下載jquery這個文件，

引用jquery

和调用一个外部js文件一样，<script src=“jquery.js”></script>

jquery基本方式

$("div#myid")這就是選擇一個div元素且id為"myid"
$符號其實就是jquery的代表,表示選擇一個元素,下面會單獨說一下jquery的選擇器

jquery還有許多方法

$().ready() ==>onload()
$().click() ==>onclick()
$().ajax()
$().addClass() 為元素添加一個類名這樣就可以改變css樣式了
$().removeClass() 移除class樣式

举个例子

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p></p>
    <p></p>
    <p></p>
    <p class="duplicate"></p>
    <p class="duplicate"></p>
    <p class="duplicate"></p>
    <p></p>  
    <!--上面就是普通的html 里面有三个p标签 class设置为duplicate-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
 //可以用这种方式获取在线的jquery文件，但还是用本地的文件好，毕竟有时候国外的网是连不上的
  <script type="text/javascript" src="jquery.js"></script>

    <script>     
      $(document).ready(function(){
          // 当documnet（整个页面的dom）都加载完成（ready）后执行function()
          var paragraphs = $( "p" ); 
          
          //选择所有p标签赋值个变量paragraphs 并在控制台显示长度7
          console.log( paragraphs.length );

       
          //下面的makeArray是jquery一个挺好用的一个功能将获取的元素转换成数组这样我就可以调用array的很多函数和功能了push
pop，unshift，shift，concat。。。。

 
          paragraphs = $.makeArray( paragraphs );
          
          //同上获得class为duplicate的3个元素
          var dupes = $.makeArray($( ".duplicate" ))
 
          //把paragraphs与dupes两个数组连接 
          paragraphs = paragraphs.concat( dupes );
          
          //7+3=10
          console.log( paragraphs.length );
          
          //unique是jquery的另一个方法删除重复的数组元素
          paragraphs = $.unique( paragraphs );
       
          console.log( paragraphs.length );
             // 7
          var index = $.inArray("郭志鹏", paragraphs);
            //inArray表示在数组paragraphs里是否有“郭志鹏”这个元素。必然没有 so显示-1
          console.log(index); // returns -1
      });
    </script>
 
  </body>
</html>

jquery工具方法汇总（我就是烦以后再找所以就copy了）

字符串操作：
　　$.trim()：去除字符串左右两边的空格
数组和对象操作：
　　$.each()：遍历数组
　　　　$.each(array,function(index,value){})：array:数组变量，index:元素下标，从0开始，value:元素值
　　$.each()：遍历对象
　　　　$each(object,function(name,value){})：object:对象，name:属性名，value:属性值
　　$.grep()：数据筛选：返回一个经过筛选后的数组
　　$.map()：修改数据
　　$.inArray()：查找元素的下标
　　　　$.inArray(value,array)：value:元素值，array:查找的数组，返回元素在数组中的下标，从0开始
　　$.merge()：合并两个数组
　　　　$.merge(array1,array2)：将第二个数组加到第一个数组后面
　　$.unique()：去除重复DOM元素
　　　　$.unique(dom)：dom:DOM元素
　　selector.toArray()：合并多个DOM元素为数组，返回数组元素的 innerHTML
$.trim()移除首位的空格
$.contains()检测是否包含
测试操作：，返回boolean
　　$.isArray()：判断是否为数组对象，返回boolean
　　　　$.isArray(object)：object:被判断的对象
　　$.isFunction()：判断是否为函数，返回boolean
　　　　$.isFunction(object)：object:被判断的对象
　　$.isEmptyObject()：判断是否为空对象，返回boolean
　　　　$.isEmptyObject(object)：object：被判断的对象
　　$.isPlainObject()：判断是否为纯粹对象，返回boolean
　　　　纯粹对象：由{}或new Object()创造的对象，如“var obj = {}”或“var obj = new Object()”
　　$.contains()：判断DOM节点是否包含另一个DOM节点
　　　　$.contains(dom1,dom2)：dom1节点是否包含dom2节点
　　$.type()：输出数据类型，返回对象的数据类型
　　$.isNumeber ()：判断是否为数值类型
　　$.isWindow()：判断是否为Window对象
　　　　Window对象：表示浏览器中打开的窗口

jquery选择操作dom

jquery给我一种当初见到css一样的感觉
下面是两种写法都是个tr标签换一个class
javascript：
var tr = document.getElementByTagName("tr");
for (var i = 0; i < tr.length; i++) {
if (tr[i].class==="highlighted") {
tr[i].class = "normal"
}
}
jquery $("tr.highlighted").removeClass('highlighted').addClass("normal");
通过id 标签名称来选择
wrappedElements = $( "div" );
wrappedElements = $("ul#myList");
allElements = $("*");