jQuery常用语法

   一、选择器

   1、基本选择器

    $('#id值')               根据id值选择标签       

    $('.class值')          根据class值选择标签

    $('标签名')            根据标签的名字选择标签

    $('*')                      选择所有的标签

    $('#id值,.class值,标签名')  根据多种条件选择标签，满足其中之一即可，多个条件以逗号分隔

 

    2、层级选择器

    $('#id值 .class值')  查找满足第一个条件的标签下的所有满足第二个条件的下级标签

    $('#id值>.class值')  查找满足第一个条件的标签下的所有满足第二个条件的子标签

    $('#id值+.class值')  查找满足第一个条件的标签后毗邻的满足第二个条件的兄弟标签

    $('#id值~.class值')  查找满足第一个条件的标签后面所有满足第二个条件的兄弟标签

 

    3、基本筛选器（在找到标签对象前使用）

    $('#id值:first')   查找满足条件的第一个标签

    $('#id值:last')   查找满足条件的最后一个标签

    $('#id值:not(class值)')  在满足条件的标签中排除指定条件的一些标签

    $('#id值:even')  在满足条件的标签中取出索引为偶数的标签

    $('#id值:odd')  在满足条件的标签中取出索引为奇数的标签

    $('#id值:eq(index)')  在满足条件的标签中取出索引等于指定索引的标签

    $('#id值:gt(index)')   在满足条件的标签中取出索引大于指定索引的标签

    $('#id值:lt(index)')  在满足条件的标签中取出索引小于指定索引的标签

    $('#id值:focus')   查找满足条件的标签中获得焦点的标签

 

    4、内容

    $('#id值:contains(text)')  在满足条件的标签中取出含有指定文本的标签

    $('#id值:empty') 在满足条件的标签中取出文本为空的标签

    $('#id值:has(class)')  在满足条件的标签中取出含有指定标签的标签

    $('#id值:parent')  在满足条件的标签中取出含有子标签的标签

 

    5、可见性

    $('#id值:hidden')  在满足条件的标签中取出被隐藏的标签

    $('#id值:visible')   在满足条件的标签中取出显示的标签

 

    6、属性

    $(#id值[属性名])  在满足条件的标签中取出含有指定属性的标签

    $('#id值[属性名=”属性值“]')   在满足条件的标签中取出指定属性名等于指定属性值的标签

    

    7、子元素

    $('#id值:first-child')  查找满足条件的标签中作为其他标签的第一个子标签的标签

    $('#id值:last-child')  查找满足条件的标签中作为其他标签的最后一个子标签的标签

 

    8、表单

    $(':input')  查找input标签

    $('input:text') 查找type=text的input标签

    $('input:password') 查找type=password的input标签

    $('input:radio') 查找type=radio的input标签

    $('input:checkbox') 查找type=checkbox的input标签

    $('input:submit') 查找type=submit的input标签

    $('input:image') 查找type=image的input标签

    $('input:reset') 查找type=reset的input标签

    $('input:button') 查找type=button的input标签

    $('input:file') 查找type=file的input标签

 

    9、表单对象属性

    $('input:enabled') 查找含有enabled属性的input标签

    $('input:disabled') 查找含有disabled属性的input标签

    $('input:checked') 查找含有checked属性的input标签

    $('input:selected) 查找t含有selected属性的input标签

 

   二、筛选（在找到标签对象后使用）

   1、过滤

    $().first()             

    $().last()

    $().eq(index|-index)

    $().hasClass(class值)

    $().has()

    $().not()

    $().slice(start,end)    在满足条件的标签中取出指定索引范围的标签，end可以不写

 

    2、查找

    $().children()

    $().find()

    $().next()

    $().nextAll()

    $().nextUntil()

    $().parent()

    $().parents()  加选择器可以取出指定的上级标签，找多层上级标签时推荐使用

    $().parentsUntil()  parentUntil中的标签无法取到

    $().prev()

    $().prevall()

    $().prevUntil()

    $().siblings()

 

  

    三、属性

    1、属性

    $().attr('属性名','属性值')    一般用于操作属性值不是布尔值的属性，只有属性名即获取对应属性的属性值

    $().removeAttr()

    $().prop()   作用与attr相同，一般用于操作属性值为布尔值的属性

    $(),removeProp

 

    2、CSS类

    $().addClass(class值)

    $().removeClass(class值)

    $().toggleClass(class值)    当标签中有这个类就移除，没有就添加

 

    3、HTML代码/文本/值

    $().html()       作用与DOM的inner HTML相同

    $().text()       作用与DOM的innerText相同

    $().val()        取对应标签的value属性值

 

    四、CSS

    1、样式

    $.().css('样式名'，‘样式值’)    设置单个样式的值，只写样式名表示获取该样式的值

    $().css(['样式1','样式2'，。。。。])  获取多个样式的值

    $().css({'样式1':'值1',‘样式2’:'值2',...})   设置多个样式的值

 

    2、位置

    $().offset()   获取相对于HTML标签的位置

    $().position()  获取相对于最近的已定位上级标签的位置

    $().scrollTop()  窗口向上移动指定像素的距离

    $().scrollLeft()  窗口向左移动指定像素的距离

 

    3、尺寸

   $().height() 标签内容的高度
   $().width()
   $().innerHeight() 标签padding和内容本身的高度
   $().innerWidth()
   $().outerHeight() 标签在innerHeight基础上加上boder的高度
   $().outerWidth()

 

    五、文档处理

    1、内部插入

    $().append()   将append中的字符串添加到标签对象的内容尾部，如果是标签字符串则添加一个相应的标签，如果是已存在的标签则会移动

    $().appendTo()  将标签对象添加到appendTo中的标签内容的尾部

    $().prevpend()  将prevpend中的内容添加到标签对象内容的首部

    $().prevpendTo()  将标签对象添加到prevpendTo中的标签内容的首部

 

    2、外部插入

    $().after()  将after中的内容添加到标签对象的尾部

    $().insertAfter()  将标签对象添加到insertAfter中的内容尾部，如果标签对象是已存在的则会移动

    $().before()  将before中的内容添加到标签对象的前面

    $().insertBefore()  将标签对象添加到insertBefore中内容的前面

 

     3、包裹

     $().wrap()   用wrap中的内容包裹标签对象

     $().unwrap()  去除标签对象的包裹

     $().wrapAll()  标签对象组都被wrapAll中的内容包裹

     $().wrapInner()  用wrapInner中的内容将标签的内容包裹

 

     4、替换

     $().replaceWith()  用replaceWith的内容替换标签对象

     $().replaceAll()  用标签对象替换replaceAll中的内容

 

     5、删除

     $().empty()   将标签对象的内容清除

     $().remove()  将标签对象清除

     $().detach()  将标签对象清除，一般用变量保存，可以保留绑定的事件

 

     6、复制

     $().clone()  复制标签对象的全部内容，传入true后可以复制事件

 

     六、效果

     1、基本

     $().show()  将标签对象显示出来

     $().hide()  将标签对象隐藏

     $().toggle() 反转显示与隐藏的效果

 

     2、滑动

     $().slideDown()  滑动展开

     $().slideUp()  滑动收起

     $().slideToggle() 反转滑动展开与滑动收起的效果

 

      3、淡入淡出

      $().fadeIn(时间，函数)   淡入

      $().fadeOut(时间，函数)  淡出

      $().fadeTo(时间，透明度，函数)  淡出到指定透明度

      $().fadeToggle(时间，函数)   淡入淡出

 

      4、自定义

      $().animate({要改变的样式:样式值，。。。。。},时间，函数)  自定义渐变的样式

 

     七、事件

     1、页面载入

     $().ready()   指定标签或对象加载完之后执行ready中的函数

     2、事件处理

     $().on('事件','选择器字符串',function () {})  给标签对象绑定事件，如果传入选择器字符串就相当于事件委派  

     3、常用事件

     $().blur([[data],fn])       失去焦点事件
     $().change([[data],fn])   被选中内容改变事件
     $().click([[data],fn])      单击事件
     $().dblclick([[data],fn])   双击事件
     $().focus([[data],fn])    获取焦点事件
     $().scroll([[data],fn])    滚动事件
     $().submit([[data],fn])   提交事件

     

      八、工具

     1、数组和对象操作

     $.each(可循环对象,function () {})

     2、测试操作

     $.caontains(c,c)   测试第一个参数中是否包含第二个参数

     3、字符串操作

     $.trim()

   

     九、核心

     1、jQuery对象访问

     $().each(function () {})

     $().length()

     2、数据缓存

     $().data(k,v)

     $().removeData(k)

   

     十、jQuery插件编写

     $.extend({'':function () {}}) jquery扩展
     $.fn.extend ({'':function () {}}) jquery对象扩展,函数中使用this可以获取调用该自定义方法的jQuery对象

     (function (jq) {扩展方法})(jQuery)   在jQuery扩展中写私有函数

     

     十一、其他

     $().modal()    控制模态框显示与隐藏，传入true显示，false隐藏