jQuery针对各类元素操作基础教程


Posted in Javascript onAugust 29, 2014

本文实例讲述了jQuery针对元素的操作,包括基础操作、选择要操作的元素及处理DOM元素等。对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'])如果单选框或复选框与数组中的元素匹配,则选中状态

相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

Javascript 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
延时重复执行函数 lLoopRun.js
May 08 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
js中开关变量使用实例
Feb 24 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
jQuery事件用法实例汇总
Aug 29 #Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 #Javascript
jQuery动画特效实例教程
Aug 29 #Javascript
jQuery实用函数用法总结
Aug 29 #Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 #Javascript
原生javascript实现的分页插件pagenav
Aug 28 #Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 #Javascript
You might like
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
jQuery实现的背景动态变化导航菜单效果
2015/08/24 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
金融专业应届生求职信
2013/11/02 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书