jQuery基础知识小结

230 阅读 0 评论 152 点赞

我是靠谱客的博主儒雅唇膏，最近开发中收集的这篇文章主要介绍jQuery基础知识小结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、基础

jquery对象集：
$()：jquery对象集合

获取jquery对象集中的元素：

使用索引获取包装器中的javascript元素：var temp = $('img[alt]')[0]

使用jquery的get方法获取jquery对象集中的javascript元素：var temp = $('img[alt]').get(0)

   使用jquery的eq方法获取jquery对象集中的jquery对象元素：
    $('img[alt]').eq(0)
    $('img[alt]').first()
    $('img[alt]').last()

jquery对象集转换成javascript数组：
var arr = $('label+button').toArray()label后面所有同级button元素，转换成javascript数组

  jquery对象集的索引：
   var n = $('img').index($('img#id')[0])注意：index()参数是javascript元素
   var n = $('img').index('img#id') 等同于上一行找不到返回-1
   var n = $('img').index()img在同级元素中的索引

  向jquery对象集中添加更多的jquery对象集：
   使用逗号：$('img[alt],img[title]')
   使用add方法：$('img[alt]').add('img[title]')

对不同的jquery对象集中采取不同的方法：
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');

向jquery对象集中添加新创建的元素：
$('p').add('<div></div>');

  删除jquery对象集中的元素：
   $('img[title]').not('[title*=pu]')
   $('img').not(function(){return !$(this).hasClass('someClassname')})
   过滤jquery对象集：
    $('td').filter(function(){return this.innerHTML.match(^d+$)})过滤包含数字的td

   获取jquery对象集的子集
    $('*').slice(0,4)包含前4个元素的新的jquery对象集
    $('*').slice(4)包含前4个元素的新的jquery对象集
    $('div').has('img[alt]')

  转换jquery对象集中的元素
   var allIds = $('div').map(function(){
    return (this.id==undefined) ? null : this.id;
   }).get();通过get方法转换成javascript数组

  遍历jquery对象集中的元素
   $('img').each(function(n){
    this.alt = '这是第['+n+']张图片，图片的id是' + this.id;
   })
   $([1,2,3]).each(function(){alert(this);})

  使用元素间关系获取jquery对象集
   $(this).closest('div')比如触发的按钮在哪个div中发生
   $(this).siblings('button[title="Close"]')所有同级元素，不包含本身
   $(this).children('.someclassname')所有子节点元素，不包含重复子节点
   $(this).closest('')临近祖先元素
   $(this).contents()由元素内容组成的jquery对象集，比如可以获取<iframe>元素内容
   $(this).next('.someclassname')下一个同级元素
   $(this).nextAll()后面所有的同级元素
   $(this).nextUntil('.someclassname')后面所有的同级元素直到遇到目标元素
   $(this).offsetParent()离jquery对象集最近的父辈元素
   $(this).parent()直接父元素
   $(this).parents()所有父元素
   $(this).parrentsUntil()所有父元素，直到目标父元素
   $(this).prev()上一个同级元素
   $(this).prevAll()之前的所有同级元素
   $(this).prevTntl()之前的所有同级元素，直到目标元素

其它获取jquery对象集的方式
$(this).find(p span)

判断是否是某个jquery对象集
var hasImg = $('*').is('img');

jquery方法：
  $().hide()
  $().addClass('')
  $().html('')
  $('a').size()元素数量

  jquery选择器：
   $('p:even')
   $('tr:nth-child(1)')
   $('body > div')直接子元素
   $('a[href=$='pdf']')根据属性选择
   $(div:has(a))过滤

jquery函数：
$.trim()

jquery执行时间：
$(document).ready(function(){});
$(function(){});

创建DOM元素：
  $('<p></p>').insertAfter();
  $('<img>',{
   src: '',
   alt: '',
   title: '',
   click: function(){}
  }).css({
   cursor:'pointer',
   border:'',
   padding:'',
   backgroundColor:'white'
  }).append('');
jquery扩展：
  $.fn.disable = function(){
   return this.each(function(){
    if(this.disabled != null) this.disabled = true;
   })
  };
  $('').disable();

jquery测试元素是否存在：
if(item)(){}else{} 宽松测试
if(item != null) 推荐测试，能把null和undefined区别开

2、选择要操作的元素

根据标签名：$('a')
根据id：$('#id')
根据类名：$('.someclassname')
满足多个条件：$('a#id.someclassname') 或 $('div,span')
某个元素的所有子节点：$(p a.someclassname)
某个元素的直接子节点：$(ul.myList > li)

根据属性名：
  $(a[href^='http://']) 以...开头
  $(href$='.pdf')以...结尾
  $(form[method])包含method属性的form
  $(intput[type='text'])
  $(intput[name!=''])
  $(href*='some')包含

某元素后的第一个元素：$(E+F)匹配的是F，F是E后面的第一个元素

某元素后的某一个元素：$(E~F)匹配的是F，F是E后面的某一个元素

通过位置：
  $(li:first)第一个li
  $(li:last)最后一个li
  $(li:even)偶数行li
  $(li:odd)奇数行li
  $(li:eq(n))第n个元素，索引从0开始
  $(li:gt(n))第n个元素之后的元素，索引从0开始
  $(li:lt(n))第n个元素之前的元素，索引从0开始
  $(ul:first-child)列表中的第一个li
  $(ul:last-child)列表中的最后一个li
  $(ul:nth-child(n))列表中的第n个li
  $(ul:only-child)没有兄弟li的ul
  $(ul:nth-child(even))列表中的偶数行li,odd为计数行li
  $(ul:nth-child(5n+1))列表中被5除余1的li

通过过滤器：
  $(input:not(:checkbox))
  $(':not(img[src*="dog"])')
  $('img:not([src*="dog"])')
  $(div:has(span))
  $('tr:has(img[src$="pu.png"])')
  $(tr:animated)处于动画状态的tr
  $(input:button)包括type类型为button,reset,submit的Input
  $(input:checkbox)等同于$(input[type=checkbox])
  $(span:contains(food))包含文字food的span
  $(input:disabled)禁用
  $(input:enabled)启用
  $(input:file)等同于$(input[type=file])
  $(:header)h1到h6
  $(input:hidden)
  $(input:image)等同于$(input[type=image])
  $(:input)包括input, select, textarea, button元素
  $(tr:parent)
  $(input:password)等同于$(input[type=password])
  $(input:radio)等同于$(input[type=radio])
  $(input:reset)等同于$(input[type=reset])或$(button[type=reset])
  $('.clssname:selected')
  $(input:submit)等同于$(input[type=submit])或$(button[type=submit])
  $(input:text)等同于$(input[type=text])
  $(div:visible)

3、处理DOM元素

操作元素的属性：

  $('*').each(function(n){
   this.id = this.tagName + n;
  })

获取属性值：$('').attr('');

设置属性值：

  $('*').attr('title', function(index, previousValue){
   return previousValue + ' I am element ' + index + ' and my name is ' + this.id;
  }) 为一个属性设置值
  $('input').attr({
   value: '',
   title: ''
  }); 为多个属性设置值

删除属性：

$('p').removeAttr('value');
让所有链接都在新窗口中打开：
$('a[href^="http://"]').attr('target',"_blank");

避免表单多次提交：
  $("form").submit(function(){
   $(":submit", this).attr("disabled","disabled");
  })

添加类名：$('#id').addClass('')

删除类名：$('#id').removeClass('')

切换类名：$('#id').toggleClass('')存在就删除类名，不存在就添加类名

判断是否含有类名：$('p:first').hasClass('') $('p:first').is('')

以数组形式返回类名列表：
  $.fn.getClassNames = function(){
   var name = this.attr('someclsssname');
   if(name != null){
    return name.split(" ");
   }
   else
   {
    return [];
   }
  }

设置样式：
  $('div.someclassname').css(function(index, currentWidth){
   return currentWidth + 20;
  });
  $('div').css({
   cursor: 'pointer',
   border: '1px solid black',
   padding: '12px 12px 20px 20x',
   bacgroundColor: 'White'
  });

有关尺寸：
  $(div).width(500)
  $('div').height()
  $('div').innerHeight()
  $('div').innerWidth()
  $('div').outerHeight(true)
  $('div').outerWidth(false)

有关定位：
  $('p').offset()相对于文档的参照位置
  $('p').position()偏移父元素的相对位置
  $('p').scrollLeft()水平滚动条的偏移值
  $('p').scrollLeft(value)
  $('p').scrollTop()
  $('p').scrollTop(value)

有关元素内容：
  $('p').html()
  $('p').html('')
  $('p').text()
  $('p').text('')

追加内容
  在元素末尾追加一段html：$('p').append('<b>some text</b>');
  在元素末尾dom中现有的元素：$('p').append($(a.someclassname))
  在元素开头追加：$("p").prepend()
  在元素的前面追加：$("span").before()
  在元素的后面追加：$("span")after()
  把内容追加到末尾：appendTo(targets)
  把内容追加到开头：prependTo(targets)
  把内容追加到元素前面：insertBefore(targets)
  把内容追加到元素后面：$('<p></p>').insertAfter('p img');

包裹元素：
  $('a.someclassname').wrap("<div class='hello'></div>")
  $('a.someclassname').wrap($("div:first")[0])
  $('a.someclassname').wrapAll()
  $('a.someclassname').wrapInner()
  $('a.someclassname').unWrap()

删除元素：
  $('.classname').remove()删除元素，绑定到元素上的事件和数据也会被删除
  $('.classname').detach()删除元素，但保留事件和数据
  $('.classname').empty()不删除元素，但清空元素内容

复制元素：
$('img').clone().appendTo('p.someclassname')
$('ul').clone().insertBefore('#id')

替换元素：
  $('img[alt]').each(function(){
   $(this).replaceWith('<span>' + $(this).attr('alt') + '</span>');
  })
  $("p").replaceAll("<b></b>")

关于表单元素的值：
  $('[name="radioGroup"]:checked').val()获取单选按钮的值，如果没有选中一个，返回undefined
  var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){
   return $(this).val();
  }).toArray(); 获取多选框的值

对于<select id="list" multiple="multiple">使用$('#list').val()返回值的数组
$('input').val(['one','two','three'])如果单选框或复选框与数组中的元素匹配，则选中状态