JQuery笔记三 :获取内容和属性【蓝鸥HTML5出品】
2016-12-29 09:35
357 查看
JQuery笔记二 :动画效果【蓝鸥HTML5出品】
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易
text() - 设置或返回所选元素的文本内容 (不包括 HTML 标记)
val() - 设置或返回表单元素value字段的值
// 获取div元素中的所有内容 $('div').html();
// 获取div元素中的文本内容,排除标签 $('div').text();
// 获取input元素的value属性值 $('input').val();
// 获取a标签的href属性值 $('a').attr('href');
只有参数的区别而已。
// 修改标签内容 $('div').html('我是一个div哦');
// 修改标签内容 $('div').text('我是最大的标题');
// 修改value属性 $('input').val('你说我是什么就是什么');
回调函数有两个参数:1.被选元素列表中当前元素的下标 2.以及原始值
然后以函数新值返回您希望使用的字符串。
$('p').text(function (i, oldValue) { // i: 代表当前类型元素的下标 // oldValue: 代表原始值 // 想要显示的内容通过返回值设置 return "当前元素下标: " + i + " 原始值:" + oldValue + " 我是新值"; });
// 通过 attr() 函数修改一个属性 (注意中间用逗号分隔)
$('a').attr('href', 'https://www.baidu.com');
// 通过 attr() 函数修改多个属性 (使用 大括号 进行包裹,属性与值通过 冒号 分隔,属性之间通过 逗号 分隔) $('a').attr({ 'href': 'http://www.lidaze.com', 'title': '微信小程序' });
回调函数有两个参数:1.被选元素列表中当前元素的下标 2.以及原始值
然后函数新值返回您希望使用的字符串。
$('a').attr('href', function (i, oldValue) { // i: 代表当前类型元素的下标 // oldValue: 代表原始值 // 想要设置的内容通过返回值设置 return i + " " + oldValue + "新值"; });
添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$('a').append("拼接上的内容"); $('ol').append("<li>新的一条数据</li>");
$('ol').prepend('<li>插入到第一条数据的位置</li>');
var li1 = "
1
"; var li2 = "
2
"; var li3 = "
3
";
// append() 函数同时接受多个参数 $('ul').append(li1, li2, li3);
// prepend() 函数同时接受多个参数 $('ul').prepend(li1, li2, li3);
var p1 = "
empty() - 从被选元素中删除子元素
// 移除当前元素 $('li').remove();
4000
方法删除被选元素的子元素。
// 移除ul元素的全部子元素 $('ul').empty();
// 删除所有class=italic的p标签 $("p").remove(".italic");
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
CSS代码: .bgColor { background-color: blue; } .font { background-color: red; }
JQuery代码: $('li').addClass('bgColor'); $('ul').addClass('font');
// 同时添加多个样式 (选择器名称中间以空格进行分隔) $('li').addClass("bgColor font");;
// 移除li标签的样式 $('li').removeClass('bgColor');
// 既有添加,也有移除 $('input').click(function () { $('li').toggleClass('blue'); });
注意:属性名backgroundColor和background-color写法都是可以的
尺寸
通过 jQuery,很容易处理元素和浏览器窗口的尺寸。
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)
$('div').width();
$('div').height();
innerHeight() 方法返回元素的高度(包括内边距)
$('div').innerWidth();
$('div').innerHeight();
outerHeight() 方法返回元素的高度(包括内边距和边框)
$('div').outerWidth();
$('div).outerHeight();
【HTML5教程】微信小程序全方位深度解析CSDN学院观看地址:http://edu.csdn.NET/lecturer/992
JQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易
捕获
获得内容 - text()、html() 以及 val()
html() - 设置或返回所选元素的内容(包括 HTML 标记)text() - 设置或返回所选元素的文本内容 (不包括 HTML 标记)
val() - 设置或返回表单元素value字段的值
// 获取div元素中的所有内容 $('div').html();
// 获取div元素中的文本内容,排除标签 $('div').text();
// 获取input元素的value属性值 $('input').val();
获取属性 - attr()
// 获取input标签的value属性值 $('input').attr('value');// 获取a标签的href属性值 $('a').attr('href');
设置内容和属性
设置内容 - text()、html() 以及 val()
获取内容和设置内容使用的函数是相同的。只有参数的区别而已。
// 修改标签内容 $('div').html('我是一个div哦');
// 修改标签内容 $('div').text('我是最大的标题');
// 修改value属性 $('input').val('你说我是什么就是什么');
text()、html() 以及 val() 的回调函数
text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:1.被选元素列表中当前元素的下标 2.以及原始值
然后以函数新值返回您希望使用的字符串。
$('p').text(function (i, oldValue) { // i: 代表当前类型元素的下标 // oldValue: 代表原始值 // 想要显示的内容通过返回值设置 return "当前元素下标: " + i + " 原始值:" + oldValue + " 我是新值"; });
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。// 通过 attr() 函数修改一个属性 (注意中间用逗号分隔)
$('a').attr('href', 'https://www.baidu.com');
// 通过 attr() 函数修改多个属性 (使用 大括号 进行包裹,属性与值通过 冒号 分隔,属性之间通过 逗号 分隔) $('a').attr({ 'href': 'http://www.lidaze.com', 'title': '微信小程序' });
attr() 的回调函数
jQuery 方法 attr(),也提供回调函数。回调函数有两个参数:1.被选元素列表中当前元素的下标 2.以及原始值
然后函数新值返回您希望使用的字符串。
$('a').attr('href', function (i, oldValue) { // i: 代表当前类型元素的下标 // oldValue: 代表原始值 // 想要设置的内容通过返回值设置 return i + " " + oldValue + "新值"; });
添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
append() 拼接到最后
jQuery append() 方法在被选元素的结尾插入内容。$('a').append("拼接上的内容"); $('ol').append("<li>新的一条数据</li>");
prepend() 插入到最前
jQuery prepend() 方法在被选元素的开头插入内容。$('ol').prepend('<li>插入到第一条数据的位置</li>');
通过 append() 和 prepend() 方法添加若干新元素
append() 和 prepend() 方法能够通过参数接收无限数量的新元素var li1 = "
1
"; var li2 = "
2
"; var li3 = "
3
";
// append() 函数同时接受多个参数 $('ul').append(li1, li2, li3);
// prepend() 函数同时接受多个参数 $('ul').prepend(li1, li2, li3);
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容 jQuery before() 方法在被选元素之前插入内容 // 在ul标签之前添加内容 $('ul').before("在之前"); // 在标签之后添加内容 $('ul').after("在之后");jQuery after() 方法在被选元素之后插入内容 jQuery before() 方法在被选元素之前插入内容 // 在ul标签之前添加内容 $('ul').before("在之前"); // 在标签之后添加内容 $('ul').after("在之后");
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素var p1 = "
after() 和 before() 方法能够通过参数接收无限数量的新元素 var p1 = "喜欢的运动"; var p2 = "喜欢的食物"; // 在之前同时拼接多个 $('ul').before(p1, p2); // 在之后同时拼接多个 $('ul').after(p1, p2);
删除元素
remove() - 删除被选元素(及其子元素)empty() - 从被选元素中删除子元素
jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。// 移除当前元素 $('li').remove();
jQuery empty() 方法
jQuery empty()4000
方法删除被选元素的子元素。
// 移除ul元素的全部子元素 $('ul').empty();
过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。// 删除所有class=italic的p标签 $("p").remove(".italic");
获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
addClass() 方法
向元素添加 class 属性CSS代码: .bgColor { background-color: blue; } .font { background-color: red; }
JQuery代码: $('li').addClass('bgColor'); $('ul').addClass('font');
// 同时添加多个样式 (选择器名称中间以空格进行分隔) $('li').addClass("bgColor font");;
removeClass() 方法
从元素中删除指定的 class 属性// 移除li标签的样式 $('li').removeClass('bgColor');
toggleClass() 方法
对被选元素进行添加/删除类的切换操作// 既有添加,也有移除 $('input').click(function () { $('li').toggleClass('blue'); });
css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。返回 CSS 属性
// 获取li元素的backgroundColor属性的值 $('li').css('backgroundColor')设置 CSS 属性值
// 设置p元素的background属性值 $('li').css('backgroundColor', 'red'); $('li').css('background-color', 'cyan');注意:属性名backgroundColor和background-color写法都是可以的
同时设置多个 CSS 属性值
// 参数使用大括号进行包裹 // 属性名称和值之间使用 冒号 分隔 // 属性之间使用 逗号 分隔 $("p").css({ "background-color": "yellow", "font-size": "200%" });尺寸
通过 jQuery,很容易处理元素和浏览器窗口的尺寸。
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery 尺寸
width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)
$('div').width();
$('div').height();
innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度(包括内边距)innerHeight() 方法返回元素的高度(包括内边距)
$('div').innerWidth();
$('div').innerHeight();
outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度(包括内边距和边框)outerHeight() 方法返回元素的高度(包括内边距和边框)
$('div').outerWidth();
$('div).outerHeight();
相关文章推荐
- JQuery笔记四 :遍历获取内容【蓝鸥HTML5出品】
- JQuery笔记一 :选择器和事件【蓝鸥HTML5出品】
- JQuery笔记二 :动画效果【蓝鸥HTML5出品】
- JQuery笔记一 :选择器和事件【蓝鸥HTML5出品】
- jQuery 练习[二]: 获取对象(3) - 根据属性、内容匹配, 还有表单元素匹配
- jQuery 基础 : 获取对象 根据属性、内容匹配, 还有表单元素匹配
- jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
- jQuery - 获取内容和属性
- jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
- jQuery获取选中内容及设置元素属性的方法
- jQuery - 设置获取内容和属性
- jQuery学习笔记三:获取内容(text、html、val)
- jQuery获取选中内容及设置元素属性的方法
- JQUERY操作html--获取和设置内容、属性、回调函数
- jQuery 基础 : 获取对象 根据属性、内容匹配, 还有表单元素匹配(转)
- jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
- jQuery获取属性里含有某一内容的方式
- JavaScript(19)jQuery HTML 获取和设置内容和属性
- jQuery - 获取内容和属性
- jQuery学习之获取和设置内容以及属性