JQuery笔记三 ：获取内容和属性【蓝鸥HTML5出品】

JQuery笔记二 ：动画效果【蓝鸥HTML5出品】

【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() 方法删除被选元素的子元素。
// 移除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();