• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > JQuery学习记录(二):基础DOM与CSS操作

    JQuery学习记录(二):基础DOM与CSS操作

    作者: 分类:JS应用 点击: 62 次
    wordpress CMS主题:ssmay主题

      上一节我们介绍了jquery的常规选择器,本节我们再来近探讨一下jquery基础DOM操作和CSS操作。如果掌握并熟练运用jquery基础DOM与CSS操作,我们可以让我们网站的页面更加丰富多彩。

      一、jquery设置元素及内容

      获取 html 内容

      $('#box').html();

      获取文本内容,会自动清理html标签

      $('#box').text();

      设置 html 内容

      $('#box').html('<em>www.li.cc</em>');

      设置文本内容,会自动转义html标签

      $('#box').text('<em>www.li.cc</em>');

      获取表单内容

      $('input').val();

      设置表单内容

      $('input').val('www.li.cc');

      二、jquery对元素属性操作

      获取属性的属性值

      $('div').attr('title');

      设置属性及属性值

      $('div').attr('title', '我是域名');

      删除指定的属性

      $('div').removeAttr('title');

      通过匿名函数返回属性值

      $('div').attr('title', function () { return '我是域名';});

      可以接受两个参数

      $('div').attr('title', function (index, value) {
      return value + (index+1) + ',我是域名';
      });

      三、jquery对元素CSS样式操作

      获取元素行内 CSS 样式的颜色

      $('div').css('color');

      设置元素行内 CSS 样式颜色为红色

      $('div').css('color', 'red');

      得到多个 CSS 样式的数组对象,逐个遍历出来

      方法1:

      var box = $('div').css(['color', 'height', 'width']);
      for (var i in box) {
      alert(i + ':' + box[i]);
      }

      方法2:

      var box = $('div').css(['color', 'height', 'width']);
      $.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
      alert(attr + ':' + value);
      });

      设置多个样式,可以传递多个 CSS 样式的键值对

      $('div').css({
      'background-color' : '#ccc',
      'color' : 'red',
      'font-size' : '20px'
      })

      设置某个元素的 CSS 样式的值, 但这个值需要计算我们可以传递一个匿名函数。

      $('div').css('width', function (index, value) {
      return (parseInt(value) - 500) + 'px';
      });

      添加多个 CSS 类

      $('div').addClass('red bg');

      删除多个 CSS 类

      $('div').removeClass('red bg');

      判断样式 red存在

      $('div').hasClass('red')

      检查类,不存在则添加,存在则删除(切换)

      $('div').toggleClass('red');

      实现样式 1 和样式 2之间的切换

      $('div').click(function () {
      $(this).toggleClass(function () {
      if ($(this).hasClass('red')) {
      $(this).removeClass('red');
      return 'green';
      } else {
      $(this).removeClass('green');
      return 'red';
      }
      });
      });

      四、jquery框架的css方法

      获取元素的长度

      $('div').width();

      获取某个元素的长度

      $('div').height();

      设置元素长度(默认加 px)

      $('div').width(500);

      通过匿名函数设置某个元素的长度

      $('div').width(function (index, value) {
      return value - 500;
      });

      元素宽度,包含内边距padding

      innerWidth()

      元素高度,包含内边距padding

      innerHeight()

      元素宽度,包含边框和内边距

      outerWidth()

      元素高度,包含边框和内边距

      outerHeight()

      元素宽度,含边框和内边距、外边距

      outerWidth(ture)

      元素高度,含边框和内边距、外边距

      outerHeight(true)

      获取元素相对于视口的偏移位置

      $('strong').offset().left;

      获取元素相对于父元素的偏移位置

      $('strong').position().left;

      获取垂直滚动条的值

      $(window).scrollTop();

      设置垂直滚动条的值

      $(window).scrollTop(300);

      获取水平滚动条的值

      scrollLeft()

      设置水平滚动条的值

      scrollLeft(value)

    文章作者:ssmay
    本文地址:http://wanlimm.com/77201807286254.html
    本文时间:2018-07-28 06:57:30
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.