3   操作元素—属性 CSS 和 文档处理 


  • 3.1 属性操作

$("p").text()    $("p").html()   $(":checkbox").val()

$(".test").attr("alex")   $(".test").attr("alex","sb")

$(".test").attr("checked","checked")  $(":checkbox").removeAttr("checked")

$(".test").prop("checked",true)

$(".test").addClass("hide")


  • 3.1.1、html text val 

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>

    <script>

        // html([val|fn])
        $('p').html();
        $("p").html("Hello <b>world</b>!");
        $("p").html(function(n){
        return "这个 p 元素的 index 是：" + n;
        });

        // text（）  text([val|fn]) 取得所有匹配元素的内容。
         $('p').text();
        $("p").text("Hello world!");
        $("p").text(function(n){
            return "这个 p 元素的 index 是：" + n;
            });
        // val([val|fn|arr])
        $("input").val();
        $("input").val("hello world!");
        $('input:text.items').val(function() {
          return this.value + ' ' + this.className;
        });

    </script>
</body>
</html>

html text val


  • 3.1.2、属性
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>

    <script>

        // html([val|fn])
        $('p').html();
        $("p").html("Hello <b>world</b>!");
        $("p").html(function(n){
        return "这个 p 元素的 index 是：" + n;
        });

        // text（）  text([val|fn]) 取得所有匹配元素的内容。
         $('p').text();
        $("p").text("Hello world!");
        $("p").text(function(n){
            return "这个 p 元素的 index 是：" + n;
            });
        // val([val|fn|arr])
        $("input").val();
        $("input").val("hello world!");
        $('input:text.items').val(function() {
          return this.value + ' ' + this.className;
        });

    </script>
</body>
</html>



  • 3.1.3、class css 类

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>
<strong>jQuery 代码:</strong>
<script>

    // addClass(class|fn) addClass 为每个匹配的元素添加指定的类名。
    $("p").addClass("selected");
    $("p").addClass("selected1 selected2");

    $('ul li:last').addClass(function() {
      return 'item-' + $(this).index();
    });

    // removeClass([class|fn])
    $("p").removeClass("selected"); //从匹配的元素中删除 'selected' 类

    //删除匹配元素的所有类
    $("p").removeClass();
    //删除最后一个元素上与前面重复的class
    $('li:last').removeClass(function() {
        return $(this).prev().attr('class');
    });

    //toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。

    //根据父元素来设置class属性
    $('div.foo').toggleClass(function() {
          if ($(this).parent().is('.bar') {
            return 'happy';
          } else {
            return 'sad';
          }
        });

    //每点击三下加上一次 'highlight' 类
  var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });

</script>
</body>
</html>



3.2、 CSS操作
        3.2.1(样式)   css("{color:'red',backgroud:'blue'}") 
        3.2.2(位置)   offset()    position()  scrollTop()  scrollLeft()    
        3.2.3(尺寸)   height()  width()  
        
  • 例子详见【滚动菜单-案例】  滚动菜单 【点击链接】


3.3 文档处理

       内部插入  $("#c1").append("<b>hello</b>")     $("p").appendTo("div")
                      prepend()    prependTo()

       外部插入  before()  insertBefore()  after insertAfter()
                       replaceWith()   remove()  empty()  clone()



3 、操作元素 (属性 CSS 和 文档处理)的更多相关文章

  1. mongodb对数组元素及内嵌文档进行增删改查操作(转)

    from:https://my.oschina.net/132722/blog/168274 比如我有一个user类,他包含一个标签属性,这个标签是一个数组,数组里面的元素是内嵌文档,格式如下: &l ...

  2. MongoDB对数组元素及内嵌文档进行增删改查操作

    比如我有一个user类,他包含一个标签属性,这个标签是一个数组,数组里面的元素是内嵌文档,格式如下: {    "_id" : "195861",    &qu ...

  3. css参考文档； 官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

    css参考文档        http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...

  4. css标准文档流

    css标准文档流 所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性 空 ...

  5. [中文版] 可视化 CSS References 文档

    本文分享了我将可视化 CSS References 文档翻译成中文版的介绍,翻译工作还在陆续进行中,供学习 CSS 参考. 1. 可视化 CSS References 文档介绍 许多 CSS 的文档都 ...

  6. css脱离文档流

    作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  7. 使用jQuery操作元素属性

    在jQuery中,提供了attr函数来操作元素属性,具体如下: 函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr(" ...

  8. 003——VUE操作元素属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. vue.js操作元素属性

    vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...

随机推荐

  1. Java程序员职业规划

    Java 程序员职业规划 无论你是学习了 Java 即将进入企业工作,还是已经踏入了工作岗位的程序员.但是面对层出不穷的新技术,激增的就业压力,不断分化的开发角色,再加上 IT 发展的不明确,做出职业 ...

  2. VC++第三方库配置-OpenSpirit 4.2.0 二次开发

    在VS中右击项目,点击属性 1.配置属性--常规--输出目录:Windows\VS2010\debug\ 2.配置属性--常规--中间目录:Windows\VS2010\debug\ 3.配置属性-- ...

  3. Python2 与 Python3 区别

    print 用法不同:在 Python2 中,print 用法为 print "Hello World"在 Python3 中,print 用法为 print("Hell ...

  4. js中字符串支持正则表达式的方法

    设一个字符串var myName = "fangming";则支持正则表达式的方法有:split(分割),replace(替换),search(查找),match(元素参数的数组) ...

  5. jquery获取父级元素、子级元素、兄弟元素的方法

    jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...

  6. VMware创建虚拟机教程详解及问题解决

    关于VMware Workstation Pro虚拟机创建教程,本教程主要详细描述使用软件VMware Workstation Pro建虚拟系统过程中步骤详解,以及个人安装时所出现部分问题的解决方案. ...

  7. Eclipse版GoogleI/O2014开源项目

    https://github.com/google/iosched谷歌原版是Gradle工程,用Eclipse开发的导入不了,所以搞了一个Elicpse工程,依赖的jar.库比较多,也比较难找... ...

  8. C# 计算当前时间距离今晚00:00:00还有多少分多少秒

    .net 计算当前时间距离今晚00:00:00还有多少分多少秒 string dateDiff = null;//获取当前时间 DateTime DateTime1 = DateTime.Now; / ...

  9. ELK平台介绍

    在搜索ELK资料的时候,发现这篇文章比较好,于是摘抄一小段: 以下内容来自:http://baidu.blog.51cto.com/71938/1676798 日志主要包括系统日志.应用程序日志和安全 ...

  10. 【BZOJ2768】[JLOI2010]冠军调查/【BZOJ1934】[Shoi2007]Vote 善意的投票 最小割

    [BZOJ2768][JLOI2010]冠军调查 Description 一年一度的欧洲足球冠军联赛已经进入了淘汰赛阶段.随着卫冕冠军巴萨罗那的淘汰,英超劲旅切尔西成为了头号热门.新浪体育最近在吉林教 ...