jQuery基础知识小结


Posted in Javascript onDecember 22, 2014

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'])如果单选框或复选框与数组中的元素匹配,则选中状态

Javascript 相关文章推荐
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
jQuery异步获取json数据方法汇总
Dec 22 #Javascript
jQuery的观察者模式详解
Dec 22 #Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 #Javascript
sails框架的学习指南
Dec 22 #Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 #Javascript
javascript动态创建及删除元素的方法
Dec 22 #Javascript
了不起的node.js读书笔记之例程分析
Dec 22 #Javascript
You might like
smarty的保留变量问题
2008/10/23 PHP
php模板中出现空行解决方法
2011/03/08 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
Destoon实现多表查询示例
2014/08/21 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
js里的prototype使用示例
2010/11/19 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
自我评价200字分享
2013/12/17 职场文书
便利店投资创业计划书
2014/02/08 职场文书
旅游文化节策划方案
2014/06/06 职场文书
未中标通知书
2015/04/17 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android