• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery基础知识小结

jQuery基础知识小结

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jQuery,基础,小结等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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])
  $(:

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
  • jQuery基于ajax实现带动画效果无刷新柱状图投票代码
  • 商城常用滚动的焦点图效果代码简单实用
  • jQuery插件scroll实现无缝滚动效果
  • 获得所有表单值的JQuery实现代码[IE暂不支持]
  • jQuery position() 函数详解以及jQuery中position函数的应用
  • jQuery 过滤方法filter()选择具有特殊属性的元素
  • jQuery Easyui datagrid连续发送两次请求问题
  • jquery.lazyload 实现图片延迟加载jquery插件
  • 各式各样的导航条效果css3结合jquery代码实现

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 使用JS或jQuery模拟鼠标点击a标签事件代码
    • jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
    • jquery map方法使用示例
    • 基于jquery的让textarea自适应高度的插件
    • 读jQuery之一(对象的组成)
    • jquery实现自定义图片裁剪功能【推荐】
    • jquery select(列表)的操作(取值/赋值)
    • 初窥JQuery(一)jquery选择符 必备知识点
    • 2013年优秀jQuery插件整理小结
    • jQuery实现在下拉列表选择时获取json数据的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有