jQuery学习笔记_04day

原生js中创建节点：document.write();innerHTML;
document.createElement();设置节点存在内存中…

jQuery如何创建节点呢？

html();
跟原生js中的innerHTML相似
设置或者获取内容的

获取内容：html()方法不给参数
获取到元素的所有内容

设置内容：html()方法给参数
会把原来的内容给覆盖
如果设置的内容中包含了标签，是会把标签给解析出来的

$('#div1').html('我是设置的内容<a href="https://www.baidu.com">百度一下</a>')

$()
确实能创建元素，但是创建的元素只存在于内存中，如果要在页面上显示，就要追加…
与原生js的document.createElement()节点相似

 $('#btn').click(function(){
        var $link=$('<a href="http://news.baidu.com">我是新闻</a>');
        //console.log($link);
        //追加节点
        $('#div1').append($link);
    })

添加节点
append()
父元素.append(子元素) 作为最后一个子节点,添加到父元素
prepend()
父元素.perpend(子元素) 作为第一个元素
before()
元素A.before(元素B);//把元素B插入到元素A的前面，作为兄弟元素添加
after()
元素A.after(元素B) //把元素B插入到元素A的后面，作为兄弟元素添加
appenTo()
子元素.appendTo(父元素)；把子元素作为父元素的最后一个子元素添加

empty()清空节点

$(’#ul1’).html("");
不推荐使用，有可能会造成内存泄漏，不安全

remove()移除节点

clone()克隆节点
只存于内存中
如果要在页面上显示，就应该追加到页面上
//jQuery中克隆节点：clone()
//只存在于内存中，如果要在页面上显示，就应该追加到页面上
//clone()方法参数不管是true还是false，都是会克隆到后代节点的
//clone()方法参数是true表示会把事件一起克隆到,参数如果是false就不会克隆事件。
//不给参数，默认是false

$(function(){
        $('#div1').click(function(){
            alert('哈哈哈,我被点击了...')
        })
    $('#clone').click(function(){
      var $cloneDiv=$('#div1').clone(true);
      $cloneDiv.attr('id','div2')
    //   console.log($cloneDiv);
    $('body').append($cloneDiv);
    })
    })

val()
设置或者获取表单元素的值
原生js是通过value属性来获取或者设置表单元素的值
val()不给参数就是获取
val()方法，给参数就是设置

attr()设置属性

//设置单属性
  //$('img').attr('src','992.gif');//以前有src属性，更改这个属性
  //$('img').attr('aaa','hahah');//修改自定义属性
 //$('img').attr('bbb','bbb');//如果元素原来没有这个属性，那就是添加属性
 //设置多属性
  $('img').attr({
      src:'./img/taobao/1.jpg',
      aaa:'hahaha',
      bbb:'bbb',
     });

如果没有这个属性，获取到的值就是undefined;

removeAttr()移除属性

 //移除属性
        $('#btn3').click(function(){
            //移除单属性
            $('img').removeAttr('alt');
            //$('img').removeAttr('aaa');
            //$('img').removeAttr('bbb');

            $('img').removeAttr(alt,aaa,bbb);//移除多属性
        });

prop()
在jQuery1.6之后，对于checked，selected，disabled这类boolean类型的
属性来说,不能用attr方法，只能用prop方法

$('#btn1').click(function(){
           console.log($('#ckb1').prop('checked'));
        //如果多选框是选中状态返回一个true，如果多选框是取消选中状态那返回就是一个false
        });

//有一类属性比如：checked写在元素的身上就表示选中，没有写在元素的身上就表示没有选中
        //这一类属性用原生js操作
        // document.getElementById("btn1").οnclick=function(){
            //设置操作
            //document.getElementById("ckb1").checked=false;
           //获取操作
           //console.log(document.getElementById("ckb1").checked);
            // }

第四课…