2017.11.21笔记
来源:互联网 发布:装修网络推广 编辑:程序博客网 时间:2024/06/03 21:55
查找节点和创建节点
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()方法来删除元素属性。如果要获取<p>元素的属性title,那么只需要在attr()方法中传入属性名。
var $para = $("p"); var p_txt = $para.attr('title'); console.log(p_txt);如果要设置<p>元素的属性值,也使用同一个方法。
$('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(""); // 如果符合条件,则清空文本框内容} });
阅读全文
0 0
- 2017.11.21笔记
- 2017.11.21笔记
- caffe学习笔记21-VggNet论文笔记
- 2017.11.1笔记
- 2017.11.02笔记
- 2017.11.2笔记
- 2017.11.3笔记
- 2017.11.3笔记
- 2017.11.6笔记
- 2017.11.6工作日笔记
- 2017.11.6笔记
- 2017.11.7笔记
- 2017.11.8笔记
- 2017.11.8笔记
- 2017.11.09 matlab笔记
- 2017.11.9笔记
- 2017.11.9笔记
- 2017.11.10笔记
- @ResponseBody、@RequestBody区别
- Linux 服务器之间如何进行文件目录共享NFS(网络文件系统)
- 深入理解WindowManagerService
- List的遍历
- double转string出现科学技术法问题
- 2017.11.21笔记
- 一文读懂工业物联网如何助力工业4.0
- 机器学习(4)强化学习のQ-Learning
- java基础
- 关于android刷机包OTA包
- Idea 一键格式化代碼: Ctrl+Alt+L
- 依赖注入简单案例
- android 4.4 电池电量显示分析(低电量提醒与电池图标)Java 层
- python基础-__init__引入继承、super、继承顺序