码迷,mamicode.com
首页 > Web开发 > 详细

jQuery操作文本,样式,属性

时间:2019-01-26 11:01:01      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:add   特定   nbsp   ack   option   ul li   jquery   不同的   jin   

操作DOM1
  为什么用jQuery
    操作DOM节点啦!
    不需要考虑浏览器兼容性问题,全部统一操作!

修改Text和HTML
  jQuery对象的text():返回节点的文本
  html():原始HTML文本

    $(‘#test-ul li[name=book]‘).text(); //
    $(‘#test-ul li[name=book]‘).html(); //

    text()不传参数:获取文本
    text()传参数:设置文本
  html()类似
    $(‘#test-ul li[name=book]‘).text(‘<span style="color: red">JavaScript</span>‘); // ‘Java & JavaScript‘
    $(‘#test-ul li[name=book]‘).html(‘JavaScript & ECMAScript‘);
jQuery对象有“批量操作”的特点
  一个jQuery对象就是一个DOM对象数组,Query对象调用方法,会作用在数组中的每个DOM节点上
  $(‘#test-ul li‘).text(‘JS‘); // 两个节点都变成了JS

修改CSS   

  css()方法将作用于DOM节点的style属性,具有最高优先级。
  css(‘name‘, ‘value‘)
  $(‘#test-css li.dy>span‘).css(‘background-color‘, ‘#ffd351‘).css(‘color‘, ‘red‘);
    注意,链式调用的原因:jQuery对象的所有方法都返回一个jQuery对象(可能是新的也可能是自身)
  jQuery对象的css()方法可以这么用:
    var div = $(‘#test-div‘);
    div.css(‘color‘); // ‘#000033‘, 获取CSS属性
    div.css(‘color‘, ‘#336699‘); // 设置CSS属性
    div.css(‘color‘, ‘‘); // 清除CSS属性

jQuery操作class
  var div = $(‘#test-div‘);
  div.hasClass(‘highlight‘); // false, class是否包含highlight
  div.addClass(‘highlight‘); // 添加highlight这个class
  div.removeClass(‘highlight‘); // 删除highlight这个class

显示和隐藏DOM
  var a = $(‘a[target=_blank]‘);
  a.hide(); // 隐藏
  a.show(); // 显示
  注意,隐藏DOM节点并未改变DOM树的结构,它只影响DOM节点的显示。这和删除DOM节点是不同的

获取DOM信息
  jQuery对象的若干方法,我们直接可以获取DOM的高宽等信息,而无需针对不同浏览器编写特定代码:

// 浏览器可视窗口大小:
  $(window).width(); // 800
  $(window).height(); // 600

// HTML文档大小:
  $(document).width(); // 800
  $(document).height(); // 3500

// 某个div的大小:
  var div = $(‘#test-div‘);
  div.width(); // 600
  div.height(); // 300
  div.width(400); // 设置CSS属性 width: 400px,是否生效要看CSS是否有效
  div.height(‘200px‘); // 设置CSS属性 height: 200px,是否生效要看CSS是否有效

attr():
  不传参数:获取属性
  传参数:设置参数
  removeAttr():删除参数

  var div = $(‘#test-div‘);
  div.attr(‘data‘); // undefined, 属性不存在
  div.attr(‘name‘); // ‘Test‘
  div.attr(‘name‘, ‘Hello‘); // div的name属性变为‘Hello‘
  div.removeAttr(‘name‘); // 删除name属性
  div.attr(‘name‘); // undefined、

    但是HTML5规定:有一种属性在DOM节点中可以没有值(单选框的“checked”),只有出现与不出现两种
  attr()和prop()对于属性checked处理有所不同:
    var radio = $(‘#test-radio‘);
    radio.attr(‘checked‘); // ‘checked‘
    radio.prop(‘checked‘); // true
      prop()返回值更合理一些。不过,用is()方法判断更好:

    radio.is(‘:checked‘); // true
      类似的属性还有selected,处理时最好用is(‘:selected‘)。

操作表单
  对于表单元素,val()
  不传参数:获取value值
  传参数:设置value值
/*
<input id="test-input" name="email" value="">
<select id="test-select" name="city">
<option value="BJ" selected>Beijing</option>
<option value="SH">Shanghai</option>
<option value="SZ">Shenzhen</option>
</select>
<textarea id="test-textarea">Hello</textarea>
*/
  var
    input = $(‘#test-input‘),
    select = $(‘#test-select‘),
    textarea = $(‘#test-textarea‘);

    input.val(); // ‘test‘
    input.val(‘abc@example.com‘); // 文本框的内容已变为abc@example.com

 

jQuery操作文本,样式,属性

标签:add   特定   nbsp   ack   option   ul li   jquery   不同的   jin   

原文地址:https://www.cnblogs.com/xuanjian-91/p/10322587.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!