您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

jQuery基础知识小结_jquery

2024/5/29 17:54:03发布19次查看
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('
');
  删除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对象集,比如可以获取元素内容
   $(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元素:
  $('
').insertafter();
  $('',{
   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('some text');
  在元素末尾dom中现有的元素:$('p').append($(a.someclassname))
  在元素开头追加:$(p).prepend()
  在元素的前面追加:$(span).before()
  在元素的后面追加:$(span)after()
  把内容追加到末尾:appendto(targets)
  把内容追加到开头:prependto(targets)
  把内容追加到元素前面:insertbefore(targets)
  把内容追加到元素后面:$('
').insertafter('p img');
 包裹元素:
  $('a.someclassname').wrap(
)
  $('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('' + $(this).attr('alt') + '');
  })
  $(p).replaceall()
关于表单元素的值:
  $('[name=radiogroup]:checked').val()获取单选按钮的值,如果没有选中一个,返回undefined
  var checkboxvalues = $('[name=checkboxgroup]:checked').map(function(){
   return $(this).val();
  }).toarray(); 获取多选框的值
对于使用$('#list').val()返回值的数组
  $('input').val(['one','two','three'])如果单选框或复选框与数组中的元素匹配,则选中状态
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product