jQuery基础(2)
一、jQuery的属性操作
jQuery的属性操作分为四部分:
html标签属性操作:是对html文档中的标签属性进行读取,设置和移除操作。比如attr()、removeAttr();
DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp();
类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass();
值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val();
1、attr()、removeAttr()
a、attr()
// 获取属性值:attr()的参数为一个字符串时,是获取该属性对应的属性值
var id = $('div').attr('id');
console.log(id); // 打印div的id属性值 // 设置属性值
// 1.设置一个属性,设置div的class为box
$('div').attr('class','box');
// 2.设置多个属性,参数为对象,键值对存储
$('div').attr({title:'haha',class:'happy'});
b、removeAttr()
// 删除单个属性
$('#box').removeAttr('name');
$('#box').removeAttr('class'); // 删除多个属性
$('#box').removeAttr('name class');
2、prop()、removeProp()
a、prop()
返回属性的值:$(selector).prop(property)
设置单个属性和值:$(selector).prop(property,value)
设置多个属性和值:$(selector).prop({property:value, property:value,...})
b、removeProp()
removeProp()方法用来删除由prop()方法设置的属性集。
语法:$(selector).removeProp(property);
注意: 不要使用此方法来删除原生的属性(property)。
总结:什么时候用attr(),什么时候用prop()?
只有true和false两种属性值时用prop(),其他则使用attr()。
3、addClass()、removeClass()、toggleClass()
a、addClass()
为匹配的元素添加指定的类名,如下:
$('div').addClass("box"); // 追加一个类名,原有类名不变
为匹配的元素添加多个类名,如下:
$('div').addClass("box box2"); // 追加多个类名,用空格隔开
b、removeClass()
为匹配的元素删除一个或多个指定的类名,如下:
$('div').removeClass('box'); // 删除类名box,也可以删除多个类名,类名用空格隔开
移除全部的类,如下:
$('div').removeClass();
应用:可以通过添加/删除类名,来实现元素的显示/隐藏。
c、toggleClass()
如果指定类名存在(不存在)就删除(添加),如下:
$('div').toggleClass(‘active’);
4、html()、text()、val();
获取值:
html() // 获取选中标签元素中所有的内容(包括标签)
text() // 获取匹配元素中包含的文本内容(不包括标签)
val() // 用于表单控件中获取value值,比如input、textarea、select等
设置值:
// 设置该元素的所有内容,会替换掉,标签中原来的内容(标签会被渲染)
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
// 设置该元素所有的文本内容(标签不会被渲染)
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
// 设置表单控件中的value值
$('input').val('设置的值');
总结:无参数是获取值,有参数是设置值。
二、jQuery的样式操作
1、获取,例如:
$('#box').css('color'); // 取得id为box的元素的color样式属性的值
2、设置,例如:
a、设置一个样式,例如:
$('#box').css('color','red'); // 设置id为box的元素的color值为red
b、设置多个样式,例如:
$('#box').css({'color':'red', 'font-size':'16px', 'background':'#ddd'});
三、jQuery的文档操作
之前js中我们学习了js的DOM操作,也就是所谓的增删改查DOM操作。通过js的DOM的操作,我们能发现,大量的繁琐代码才能实现我们想要的效果。那么jQuery的文档操作的API为我们提供了便利的方法来操作文档。
1、插入操作
a、父元素.append(子元素)、子元素.appendTo(父元素),例如:
var oLi = document.createElement('li');
oLi.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>'); // string
$('ul').append(oLi); // js对象
$('ul').append($('#app')); // jQuery对象,此jQuery对象从原位置移走 // 将新的子元素添加到父元素,并为这个子元素添加类名active
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active') ;
总结:上述两种方法都能为父元素在后边添加一个新的子元素,要添加的元素可以是string,element(js对象),jQuery对象,并且如果追加的是jQuery对象,那么这个jQuery对象将从原位置上消失,也就是说,从原位置移动了所选的父元素中。
b、父元素.prepend(子元素)、子元素.prependTo(父元素)
$('ul').prepend('<li>我是第一个</li>');
$('<li>我也是第一个</li>').prependTo('ul');
总结:上述两种方法都能为父元素在前边添加一个新的子元素,要添加的元素可以是string,element(js对象),jQuery对象,并且如果添加的是jQuery对象,那么这个jQuery对象将从原位置上消失,也就是说,从原位置移动了所选的父元素中。
c、元素.after(要插入的兄弟元素)、要插入的兄弟元素.insertAfter(元素)
$('ul').after('<h4>我是一个h4标题</h4>');
$('<h5>我是一个h5标题</h5>').insertAfter('ul');
总结:上述两种方法都能在元素后边插入一个新的兄弟元素,要插入的元素可以是string,element(js对象),jQuery对象,并且如果插入的是jQuery对象,那么这个jQuery对象将从原位置上消失,也就是说,从原位置移动了所选元素的后边。
d、兄弟元素.before(要插入的兄弟元素)、要插入的兄弟元素.insertBefore(兄弟元素)
$('ul').before('<h3>我是一个h3标题</h3>');
$('<h2>我是一个h2标题</h2>').insertBefore('ul');
总结:上述两种方法都能在元素前边插入一个新的兄弟元素,要插入的元素可以是string,element(js对象),jQuery对象,并且如果插入的是jQuery对象,那么这个jQuery对象将从原位置上消失,也就是说,从原位置移动了所选元素的前边。
2、删除操作
a、$(selector).remove(); 例如:
$('ul').remove(); // 删除节点后,事件也会删除
b、$(selector).detach(); 例如:
var $btn = $('button').detach()
// 此时按钮能追加到ul中
$('ul').append($btn) // 删除节点后,事件会保留
c、$(selector).empty(); 例如:
// 清空选中元素中的所有后代节点
$('ul').empty() // 清空掉ul中的子元素,保留ul
3、修改操作
a、$(selector).replaceWith(content);
解释:将所有匹配的元素替换成指定的string、js对象、jquery对象。例如:
// 将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
// 将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));
b、$('<p>哈哈哈</p>')replaceAll('h2');
解释:替换所有,将所有的h2标签替换成p标签。例如:
$('<br/><hr/><button>按钮</button>').replaceAll('h4');
4、克隆操作
$(selector).clone();
解释:克隆匹配的DOM元素,例如:
$('button').click(function(){
// 1.clone():克隆匹配的DOM元素
// 2.clone(true):克隆元素以及其所有的事件处理并且选中这些克隆的副本
// (简言之,副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
jQuery基础(2)的更多相关文章
- jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- 【jQuery基础学习】09 jQuery与前端(这章很水)
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- 8、网页制作Dreamweaver(jQuery基础:安装、语法)
在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...
- jquery 基础汇总---导图篇
最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- BP神经网络的数学常识
输入数据X1-Xn. 输入层和隐层之间的权Wji 隐层的输入数据为:∑iwjixi 隐层的输出数据为:yj = f(∑iwjixi).其中f(x)= 隐层的输入数据为:∑jwkjyj 隐层的输出数据为 ...
- atcoder题目合集(持续更新中)
Choosing Points 数学 Integers on a Tree 构造 Leftmost Ball 计数dp+组合数学 Painting Graphs with AtCoDeer tarja ...
- 2018.11.01 bzoj4872: [Shoi2017]分手是祝愿(期望dp)
传送门 一道不错的题. 考虑n==kn==kn==k的时候怎么做. 显然应该从nnn到111如果灯是开着的就把它关掉这样是最优的. 不然如果乱关的话会互相影响肯定不如这种优. 于是就可以定义状态f[i ...
- android 应用商店
下面更多 http://wiki.youmi.net/Wiki/PromotionChannelIDs 小米 http://market.xiaomi.com/dev安智市场 http://dev.a ...
- Educational Codeforces Round 51 F. The Shortest Statement(lca+最短路)
https://codeforces.com/contest/1051/problem/F 题意 给一个带权联通无向图,n个点,m条边,q个询问,询问两点之间的最短路 其中 m-n<=20,1& ...
- 2.2.10数据类型String的常量池特性
在JVM中具有String常量池缓存的功能 package com.cky.test; /** * Created by edison on 2017/12/8. */ public class Te ...
- 模块import,from ..import...
首次导入模块发生3件事 1.创建一个模块的名称空间 2.执行文件spam.py,将执行过程中产生的名字都放到模块的名称空间中 3.在当前执行文件中直接拿到一个名字,该名字就是执行模块中相对应的名字 f ...
- JVM、JRE,JDK
JVM解释class Java虚拟机,解释编译后的class文件给系统..java代码编译成 .class机器指令,就能在JVM运行了,直接到硬件执行,实现了跨平台,只要操作系统安装了JVM, ...
- 浮点型转整数型进行计算 - 移动GIS设备硬件的原因
在ArcGIS9.1之前桌面版ArcGIS都是采用整数存储的,是为了效率,将浮点型转为整数型存储,但9.2之后随着硬件的提升,浮点型的效率已经得到提高了,所以不再转换.但移动GIS设备还是要转整数型. ...
- day17(tomcat的安装,HTTP)
Tomcat Tomcat是个小型服务器,由apache组织编写,转为发布java程序而写. 安装步骤: 官网:http://tomcat.apache.org/ 下载地址:http://tomcat ...