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 相关文章推荐
jquery中常用的SET和GET
Jan 13 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
js获取checkbox值的方法
Jan 28 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
layui 解决form表单点击无反应的问题
Oct 25 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
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传输数据的代码
2007/11/13 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php简单的上传类分享
2016/05/15 PHP
简单实现php上传文件功能
2017/09/21 PHP
php实现映射操作实例详解
2019/10/02 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
2015/07/27 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
Python制作爬虫采集小说
2015/10/25 Python
python rsa 加密解密
2017/03/20 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
pandas.cut具体使用总结
2019/06/24 Python
python实现动态数组的示例代码
2019/07/15 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
美国领先的奢侈美容零售商:Bluemercury
2017/07/26 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
大学生职业生涯设计书
2014/01/02 职场文书
员工培训邀请函
2014/01/11 职场文书
高中数学教学反思
2014/01/30 职场文书
物流业务员岗位职责
2014/02/08 职场文书
台风停课通知
2015/04/24 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
python 三边测量定位的实现代码
2021/04/22 Python
python基础详解之if循环语句
2021/04/24 Python