zoukankan      html  css  js  c++  java
  • jq节点操作

    //1.创建节点

    var aDiv = $('<div></div>');

    aDiv.html('你爸');

    aDiv.css('background','red');

     

    //2.插入节点

    //2.1 把aDiv拼接到.footer

    //$('.footer').append(aDiv);

    //aDiv.appendTo($('.footer'));

    //2.2 prepend

    //把aDiv放在.footer前面

    //$('.footer').prepend(aDiv);

    //aDiv.prependTo($('.footer'));

    //2.3 after

    //把aDiv放在.nav后面

    //$('.nav').after(aDiv);

    //aDiv.afterTo($('.nav'));

    //在所有的li后面 都插入一个aDiv

    //$('li').after(aDiv);

    //2.4 before

    //把aDiv放在.nav前面

    //$('.nav').before(aDiv);

    //把aDiv放在#wrap前面

    //aDiv.insertBefore($('#wrap'));

     

    //3.设置属性

    // $('#wrap').attr('title','小龙女');

    // $('img').attr({

    // title:'杨过',

    // class:'小龙女',

    // src:'尹志平',

    // alt:'古墓派'

    // });

     

     

    //4.获取属性

    //$('#wrap').attr('title');

     

    //5.css() 设置或者返回匹配元素的样式属性

    //设置

    // $('.nav').css({

    // height:'100px',

    // background:'red',

    // border:'1px solid #ccc'

    // })

    //获取.nav的背景颜色

    //console.log($('.nav').css('background'));

     

     

    //6.height() 设置或返回匹配元素的高度 

    //知识获取或者设置盒模型的height

    //$('.nav').height();//返回数值

    //$('.nav').css('height');//返回数值+px

     

    //7.width 同height

     

     

    //8.offset()返回第一个匹配元素相对于文档的位置

    //console.log($('.footer').offset());

     

    //9.offsetParent()返回最近的定位祖先元素

    //console.log($('#list').offsetParent());

     

    //10.position()返回第一个匹配元素相对于父元素的位置

    //console.log($('li').position());

     

    //11.scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移

    //12.scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移

    // setTimeout(function(){

    // console.log($('#wrap').scrollTop());

    // },2000)

    //设置滑动初始位置

    $('#wrap').scrollTop(100);

  • 相关阅读:
    viso图插入Word中大片空白解决办法
    面向对象设计模式中的单例模式和工厂模式
    面向对象知识整理
    require和include的区别及自动加载的定义
    面向对象的三大特性及定义
    重写和重载的区别 (部分内容转自竹木人)
    面向对象的基本概念
    PHP json_encode( ) 函数介绍
    js页面跳转常用的几种方式
    js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]
  • 原文地址:https://www.cnblogs.com/ninetyfive/p/6027510.html
Copyright © 2011-2022 走看看