11.21-11.24 jQuery基础
来源:互联网 发布:为知笔记企业版 编辑:程序博客网 时间:2024/05/16 15:05
jQuery 中的Dom操作
查找节点和创建节点
1.查找节点
1.查找元素节点
查找元素节点非常简单,用 jQuery 择器即可完成。
var $li = $('ul li:eq(1)'); var li_txt = $li.text(); alert(li_txt);
2.查找属性节点
利用选择器查找到需要的元素之后,就可以使用attr()方法来获取它的各种属性值。
var $para = $('p'); var p_text = $para.attr('title'); alert(p_text);
2.创建节点
1.创建元素节点
使用 jQuery 的工厂函数$()来完成创建,然后使用append()方法插入文档中。
var $li_1 = $('<li>1</li>'); var $li_2 = $('<li>2</li>'); $('ul').append($li_1); $('ul').append($li_2);
2.创建属性节点
创建属性节点也是直接在创建元素时一起创建。
var $li_1 = $('<li title="香蕉">香蕉</li>'); var $li_2 = $('<li title="雪梨">雪梨</li>'); $('ul').append($li_1); $('ul').append($li_2);
插入节点和删除节点
1.插入节点的方法
var $li_1 = $("<li title='香蕉'>香蕉</li>"); var $li_2 = $("<li title='雪梨'>雪梨</li>"); var $li_3 = $("<li title='其他'>其他</li>"); var $parent = $('ul'); $parent.append($li_1); $parent.prepend($li_2); var $two_li = $('ul li:eq(1)'); $li_3.insertAfter($two_li);
2.删除节点
jQuery提供了三种方法删除节点:remove(),detach(),empty()。
1.remove()方法
remove()方法的返回值是被删除节点的引用。
var $li = $('ul li:eq(1)').remove();//删掉第二个$li.append('ul');
remove()
方法还可以通过传递参数来选择性的删除元素。
$('ul li').remove('li[title!=菠萝]');
2.detach()方法
同样是从DOM中去掉所有匹配的元素,但不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。
$('ul li').click(function(){ alert($(this).html()); }); var $li = $('ul li:eq(1)').detach(); $li.appendTo('ul');//绑定事件还在
3.empty()方法
严格来讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中所有后代节点。
var $li = $('ul').empty();
复制节点和替换节点
1.复制节点
可以使用clone()方法完成,赋值节点后,被复制得新元素并不具备任何行为。
在clone()方法中传递一个参数true,复制元素的同时复制元素中所有绑定事件。
$('ul li').click(function(){ $(this).clone(true).appendTo('ul'); });
2.替换节点
替换节点可以使用replaceWith()和replaceAll()。
relpaceWith()是将所有匹配的元素都替换成指定的HTML或者DOM元素。
$('p').replaceWith('<strong>你最不喜欢的水果是?</strong>'); $('<strong>你最不喜欢的水果是?</strong>').replaceAll('p');
包裹节点和属性操作
1.包裹节点
可以用wrap()
方法将某个节点用其他标记包裹起来。
$('strong').wrap('<b></b>');
1.wrapAll()方法
该方法会将所有匹配的元素用一个元素来包裹。
$('strong').wrapAll('<b></b>');
2.wrapInner()方法
该方法将每一个匹配的子元素(包括文本节点)用其他结构化的标记包裹起来。
$('strong').wrapInner('<b></b>');
2.属性操作
1.获取属性和设置属性
在jQuery中,用attr()
方法获取和设置元素属性,removeAttr()
方法来删除元素属性。
如果要获取
元素的属性title,那么只需要在attr()
方法中传入属性名。
var $para = $("p"); var p_txt = $para.attr('title'); console.log(p_txt);
如果要设置
元素的属性值,也使用同一个方法。
$('p').attr('title','your title'); //设置多个属性 $('p').attr({'title':'your title','name':'aaa'});
2.删除属性
删除属性可以用removeAttr()
方法来完成。
$('p').removeAttr('name');
样式操作
1.获取和设置样式
我们一般在用 class 属性添加样式,因此可以用attr()
方法来完成。
$("p").attr("class")$("p").attr("class","high");
2.追加样式
jQuery 提供了addClass()
方法来追加样式。
$("p").addClass("another");
3.移除样式
相对应的,使用removeClass()
方法来删除 class 的某个值,他的作用是从匹配的的元素中删除全部或指定的 class 。
//删除所有样式$("p").removeClass();//删除指定样式$("p").removeClass("high");
4.切换样式
jQuery 提供了toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。
$("p").toggleClass("another");
5.判断是否含有某个样式 hasClass()
可以用来判断元素中是否含有某个 class 。
$("p").hasClass("another");
本节所有代码:
jqueryDomStyle.html$(function(){ //获取样式 $("input:eq(0)").click(function(){ alert( $("p").attr("class") ); }); //设置样式 $("input:eq(1)").click(function(){ $("p").attr("class","high"); }); //追加样式 $("input:eq(2)").click(function(){ $("p").addClass("another"); }); //删除全部样式 $("input:eq(3)").click(function(){ $("p").removeClass(); }); //删除指定样式 $("input:eq(4)").click(function(){ $("p").removeClass("high"); }); //重复切换样式 $("input:eq(5)").click(function(){ $("p").toggleClass("another"); }); //判断元素是否含有某样式 $("input:eq(6)").click(function(){ alert( $("p").hasClass("another") ) alert( $("p").is(".another") ) }); });
设置和获取HTML、文本和值
1.html()方法
此方法类似于javascript中的innerHTML属性,可以用来读取和设置元素中的HTML内容。
<p title="请选择你最喜欢的水果"><strong>你喜欢的水果是?</strong></p> $p_html = $('p').html(); lg($p_html); $('p').html('<strong>你最喜欢的水果是???</strong>');
2.text()方法
text()方法类似于javascript中的innerText属性,可以用来读取或设置元素中的文本内容。
<p title="请选择你最喜欢的水果"><strong>你喜欢的水果是?</strong></p> var p_text = $('p').text(); lg(p_text); $('p').text('你最不喜欢的水果是?');
3.val()方法
此方法类似于javascript中的value属性,可以用来设置和获取元素的值。
无论元素是文本框,下拉列表还是单选框,都可以返回元素的值。如果元素为多选,则返回一个包含所有选择的值的数组。
jqueryVal.html
<input type="text" id="address" value="请输入邮箱地址"/>$("#address").focus(function(){ // 地址框获得鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==this.defaultValue){ $(this).val(""); // 如果符合条件,则清空文本框内容 } });
遍历节点
1.children方法
用于去的匹配的子元素集合。
children()
方法只考虑子元素而不考虑后代元素。
$lis = $('ul').children(); lg($lis); var len = $lis.length; for(var i=0;i<len;i++){ lg($lis[i].innerHTML); }
2.next()方法
用于取得匹配元素后面紧邻的同辈元素。
var $p1 = $('p').next(); lg($p1);
3.prev()方法
用于取得匹配元素前面紧邻的元素。
var $li = $('li').prev(); lg($li);
4.siblings()方法
用于取得所有同辈元素。
var $ul = $('p').siblings(); lg($ul);
5.closet()方法
该方法用于取得最近的匹配元素。首先检查当前元素是否匹配,匹配直接返回元素本身。否则逐级向上查找。
var $ul = $('li').closest('ul'); lg($ul);
parent()
和parents()
parent()
方法获得集合中每个元素的父级元素。 parents()
方法集合中每个匹配元素的祖先元素。
var $ul = $('a').parents(); lg($ul);
CSS操作
可以直接利用css()
方法获取和设置元素的样式属性。
$('p').css('color'); $('p').css('color','red');
如果值是数字,将会被自动转化为像素值。
在css()
方法中,如果属性带有‘-’符号,如font-size,如果设置这些属性的时候不带引号,那么需要使用驼峰命名法。
事件绑定
1.bind()方法
结构:bind(事件类型,回调函数);
<input type="button" value="点我">$('input[type=button]').bind('click',function(){ lg('hello world'); });
2.on()方法 on()
方法结构和使用与bind()
没有任何区别。
新版本的jQuery里面都是使用on()方法,bind()方法已经不再使用了。
<input type="button" value="点我">$('input[type=button]').bind('click',function(){ lg('hello world'); });
3.阻止冒泡
使用事件对象 event 的方法stopPropagation()
;
$('input[type=button],div,body,html').on('click',function(event){ lg('click'); event.stopPropagation(); });
4.绑定多个事件 on()
方法中可以使用类似JSON结构进行处理。
$('input[type=button]').on({ hover:function(){ $(this).css('color','red'); }, mouseout:function(){ $(this).css('color','#fff'); }, click:function(){ alert('aaa'); } });
5.事件解绑
使用unbind()
方法解绑事件
$('input[type=button]').on('click',function(){ lg('click'); $(this).unbind('click'); });
jQuery动画
1. show() 方法和 hide() 方法
调用hide()
方法会将元素的display样式改为’ none ‘。 show()
方法将元素的display样式设置为先前的显示状态。 show()
方法和hide()
方法的参数可以指定毫秒值,缓慢的隐藏和展示。
$('p').toggle(function(){ $(this).hide(2000); },function(){ $(this).show(2000); })
2.fadeIn()和fadeOut()方法 fadeIn()
和fadeOut()
方法只改变元素的不透明度。
fadeOut()
方法会在指定的一段时间内降低元素的不透明度,直到元素完全消失(display:none)。
$('p').toggle(function(){ $(this).fadeOut(); },function(){ $(this).fadeIn(); })
3.slideUp()方法和slideDown()方法 slideUp()
方法和slideDown()
方法只会改变元素的高度。
如果一个元素的 display 属性值为’none’,调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()
方法正好相反,元素将由下到上缩短隐藏。
$('p').toggle(function(){ $(this).slideUp(); },function(){ $(this).slideDown(); })
jQuery中任何动画效果,都可以指定3种速度参数。slow,normal和fast,使用时记得加上引号。
4.animate()方法
可以使用animate()方法来自定义动画。
结构:animate(params,speed,callback)
$('#panel').click(function(){ lg('click'); $(this).animate({left:'+=500px'}, 3000); }); //多重动画 $('#panel').click(function(){ lg('click'); $(this).animate({left:'+=500px',top:'+=500px'}, 30000); });
- 11.21-11.24 jQuery基础
- JQuery基础
- jquery基础
- jquery基础
- jQuery基础
- jquery基础
- jquery基础
- jquery 基础
- jquery基础
- jQuery基础
- jquery 基础
- Jquery 基础
- jquery基础
- jquery基础
- jQuery基础
- jquery基础
- jquery基础
- jquery 基础
- 你为什么想打产品经理?
- 在Ubuntu/Linux环境下安装JDK和JRE
- 重磅译制 | 视频更新:牛津大学xDeepMind自然语言处理课程 第4讲(下)RNN语言建模
- 处方药能不能做精准营销?制药商的数据应用探索
- 从HoloLens到AI辅助结核病治疗,17年AI在医疗领域几个最重要的应用突破
- 11.21-11.24 jQuery基础
- Word 2016公式输入新技巧
- JDK下载与安装教程
- 1042. 字符统计(20)--Python
- Linux学习之基础知识——Linux文件系统简介
- 数字图像处理matlab版第四章
- 朴素贝叶斯分类:拉普拉斯修正
- 什么是理论?什么是实践?
- 急需一份pycharm2017.2.4的 license server的注册码,源码失效啦