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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
vue router 用户登陆功能的实例代码
Apr 24 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
php错误级别的设置方法
2013/06/17 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
form表单action提交的js部分与html部分
2014/01/07 Javascript
Node.js文件操作详解
2014/08/16 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python采用getopt解析命令行输入参数实例
2014/09/30 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
python实现代码统计器
2019/09/19 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
检查接待方案
2014/02/27 职场文书
公司门卫岗位职责
2014/03/15 职场文书
中学生演讲稿
2014/04/26 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
群教个人对照检查材料
2014/08/20 职场文书