jquery践行

jquery的優勢

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

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

引用jquery

和调用一个外部js文件一样,

jquery基本方式

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

jquery還有許多方法

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

举个例子



  
  
  
    

//可以用这种方式获取在线的jquery文件,但还是用本地的文件好,毕竟有时候国外的网是连不上的

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 = $("*");

你可能感兴趣的:(jquery践行)