jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素
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') 等同于上一行 找不到返回-1var 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()获取单选按钮的值,如果没有选中一个,返回undefinedvar checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){return $(this).val();}).toArray(); 获取多选框的值对于<select id="list" multiple="multiple">使用$('#list').val()返回值的数组$('input').val(['one','two','three'])如果单选框或复选框与数组中的元素匹配,则选中状态
参考资料:jQuery实战(第二版)
jQuery碎语系列包括:
jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素
jQuery碎语(2) 事件
jQuery碎语(3) 动画特效
jQuery碎语(4) 实用函数
jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素的更多相关文章
- Jquery each() 如何操作动态添加的DOM元素
JQ each页面上的DOM元素的时候,如果有一部分的DOM是ajax异步加载的,那么each可能遍历不到元素,异步请求数据的同时不会影响后面的代码执行,今天就遇到这个问题了, 解决方案是讲ajax改 ...
- 笔记:javascript操作iframe内的DOM元素,及调用iframe内的方法
iframe相当于一个嵌入在网页内的浏览器,它与当前网页是隔离的. 但有时我们也需要在当前网页操作iframe内的元素或操作iframe内的javascript方法. 在网页内操作DOM元素,是使用d ...
- jQuery 如何先创建、再修改、后添加DOM元素
例如顺序执行[创建]-> [修改]-> [添加]三个动作. 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行. 首先创建一个p元素, ...
- jQuery碎语(4) 实用函数
6.实用函数 ● 修剪字符串 $('#id').val($.trim($('#someid').val())) ● 遍历集合 可能这样写: var anArray = ['one','two']; f ...
- jQuery碎语(3) 动画特效
5.动画特效 ● 自制折叠内容块 内容块如下 <div class="module"> <div class="caption"> &l ...
- jQuery碎语(2) 事件
4.事件 ● 通过方法名给元素绑定事件: $('li').click(function(event){}) ● 通过bind方法给元素绑定事件: $('li') .bind('click',funct ...
- jquery学习笔记(二):DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性 语法:attr(name) 参数name表示属性的名称 2.设置元素的属性 单个属性设置语法:attr(key,val ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
随机推荐
- C/C++之static
C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. 1.面向过程设计中的st ...
- Docker容器跨主机通信之:直接路由方式
一.Docker网络基本原理 直观上看,要实现网络通信,机器需要至少一个网络接口(物理接口或虚拟接口)与外界相通,并可以收发数据包:此外,如果不同子网之间要进行通信,需要额外的路由机制. Docker ...
- 30 最小的k个数
输入n个整数,找出其最小的k个数,例如输入4,5,1,6,2,7,3,8,最小的4个数为1,2,3,4 解法一:快排思想,会改变原数组 O(n) 注意是vector<int>& ...
- CodeIgniter2.0中sqlserver驱动返回受影响行数问题解决
最近使用CI写项目时遇到的问题,当使用sqlserve链接操作时 修改和删除返回的受影响行数不对 解决办法如下: 找到ci框架目录中include\database\drivers\sqlsrv\sq ...
- 【LOJ】#2040. 「SHOI2015」零件组装机
题解 我写的应该有bug但是我懒得改了 就是最后一次合并的n要么是0点边集的最后一条边,要么是0点边集最后两条边的差,我们分别拎出来判断一下哪个可行(也许两个都可行,但是我不想多做修改了--) 然后递 ...
- 【51nod】1149 Pi的递推式
题解 我们把这个函数的递归形式画成一张图,会发现答案是到每个出度为0的点的路径的方案数 这个可以用组合数算 记录一下P[i]为i减几次PI减到4以内 如果P[i + 1] > P[i],那么转向 ...
- LoadRunner对不同协议的选择
LoadRunner对不同协议的选择 大家常用的是Loadrunner测试web(Http/Html),但其实协议多种多样.在B/S结构的网站多种业务的特点需要选择不同的协议,协议如何选择呢,寻找了相 ...
- thinkphp中常用的模板变量
在thinkphp中的模板要加载静态文件如css,js等文件时要经常用到模板常量. 假如项目放在/web/shop中,则如下所示对应常量的输出值: 1 2 3 4 5 6 7 8 9 // 不含域名 ...
- [CodeForces 893D] Credit Card 贪心
题意: Recenlty Luba有一张信用卡,一开始金额为0,每天早上可以充值任意数量的钱,但有限制,卡里的钱不能超过D.到了晚上,银行会对信用卡进行一次操作,操作有三种: 1.a[i]>0, ...
- linux 添加samba账户
1.adduser kilen 添加linux账户 2.cd /etc/samba/ 当前目录下修改smb.conf 文件 ,一般情况下是只读文件,需要修改权下 (用root用户) chmod 7 ...