jquery的Dom操作

查找元素（选择器已实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设置节点的css样式等。

操作元素的属性：

方法

说明

举例

attr（属性的名称）

活动指定的属性‘操作CheckBox时，

选中返回checked，没有选中返回undefined

attr("checked")

attr("name")

prop(属性名称)

获取具有true和false两个属性的属性值

prop("checked")

属性的分类

1.获取属性

固有属性：元素本身就有的属性（id name class style）：无论attr、prop都能拿到

返回值是Boolean的属性：checked selected disabled：

  • 未被定义attr ---undefined prop----false
  • 定义的attr ---checked prop----true

自定义的属性

  • attr可获取
  • prop不可获取

2.设置属性

类型

固有属性

返回值是Boolean的属性

自定义属性

attr

$("#aa").attr("value","1")

$("#aa").attr("checked","chedked")

$("#aa").attr("uname","admin")

prop

$("#aa")prop("value","1")

$("#aa")prop("checked","true")

/

3.移除属性

removeAttr("属性名")

总结：属性是Boolean用prop方法checked、selected、disabled,其余用attr方法

操作元素的样式

<div id="con" class="blue large">测试<div>

方法

说明

代码例子

attr("calss")

获取class属性的值，即样式名称

$("#con").attr("class")

attr("class","样式名")

修改class属性的值，修改样式(原本的样式会被覆盖)

$("#con").attr("green")

addClass("样式名")

添加样式名称原来的基础上添加样式，如果出现相同新的样式以后定义的样式为准

$("#con").addClass("pink")<粉色大战绿色>

css()

css({"具体的样式名":"样式值","...":"",.......})

添加具体的样式添加行内样式

$(“#con").css({"font-size":"40px","font-family":"楷体“})

removeClass(class)

移除样式的名称

$("#con").removeClass("large")

在ie浏览器中要获取边框要输入准确的边框

border-top-width

css()

获取样式：

获取多个div的样式只能得到第一个对应的样式
$('div').css('width')

设置样式：

行内样式，设置单样式

$('div0').css("width","100px");
$('div0').css("height",100);

设置多样式

$('div').css({
    width:300,
    'height':'300px',
    'background-color':'green'
})

添加类：

addClass()

$('#div).addClass('类名1 类名2')

移除类:

removeClass()

$('#div).removeClass('类名1 类名2')
  $('#div).removeClass()//移除所有的类

判断类：

hasClass()判断某个元素是否有某个类。有返回true

$('#hasClass).click(function(){
    $('#div1').hasClass('fontSize');
})

切换类：

$('#toggleClass').click(function(){
    //判断一个元素有某个类就移除这个类，如果元素没有这个类就添加这个类
    $('#div').toggleClass('fontSize')
    
})

获得元素的宽高

width()

height()

1.不带参数是获取

2.代参数是设置

  • 设置或者获取高度和宽度是不包括内边距和边框外边距的
$('#img1').width();
$('#img1').height(300);

innerWidth()

innerHeight()

获取宽高加了padding（内边距）

outerWidth()

outerHeight()

获取宽高包括内边距和边框（padding和margin）

outerWidth（true）

outerHeight(true)

获得元素的宽高包括内边距、边框、外边距

页面可视区的宽高

$(window).width();
$(widow).height();

案例

Tab栏切换
$(function(){
    $('.tab>.tab-item').mouseenter(function(){
        $(this).addClass('active').siblings('li').removeClass('active');
        //获取当前的索引
        var idx = $(this).index();
        
        $('.prodects>.main).eq(idx).addClass('active').siblings('div').removeClass('selected');
    })
})

操作元素的内容

<div id="con" class="blue large">测试<div>
    <input type ="text" value="oop" id="a"/>

方法

说明

代码

html()非表单元素

获取元素的html内容

$("#con").html()

html("html,内容")非表单元素

设定元素的html的内容

$("#con").html("

上海

")

text()非表单元素

设定元素的文本内容，不包含html

$("#con").text()

text("text,内容")

设置元素的文本内容，不包含html

$("#con").text("上海")

va()表单元素

获取元素的value的值

$("#a").val()

val("值")表单元素

设定元素的value值

$("#a").val("牛逼")

text()

获取文本：获取所有后代的文本

修改文本：如果文本有标签也不会解析，包含了多个dom元素的jQuery对象会把所有的dom元素都会设置上。

隐式迭代

表单元素：

文本框(text)、密码框(password)、单选按钮(radio)、复选框(checkbox)、隐藏域(hidden)、文本域(textarea)、下拉框(select)

非标单元素：

div、span、h1-h6、tr、td、table、li、p

创建元素

  • 原生的js创建节点的方式
document.write();
innerHTML
documnet.craeteElement()

jquery的方法：

能创建元素但是只存在内存中，如果要显示在页面上，要追加节点

$("元素内容");
var ss = $("<p>测试</p>");
$('#div1').append(ss);

html（）：----识别html标签

1.不给参数就获取到了元素的所有内容

2.设置参数就会把原来的内容会覆盖

$(function(){
   $('#div').html() 
});

添加元素

<div id="a">
	<p>小鲜肉</p>
</div>
var span="<span>小奶狗</span>"

方法

说明

代码

prepend(content)

在被选择元素的内部的开头插入元素的内容，被追加的content参数，可以是字符、html元素标记最前面

$("#a").prepend("span")

$(content).prependTo(selector)

把content元素或内容加入到selector元素的开头最前面

$("#span").prependTo("#a")

append（content）

在被选择元素的内部的结尾插入元素或内容，被最加的Content的参数，可以是字符、HTML、元素的标记最后面

$("#a").append("span")

$(content).appendTo(selector)

把content元素或内容插入selector元素内，默认在尾部最后面

$("#span").appendTo("#a")

before（）

在元素前插入指定的元素或内容：$(selsctor).before(content)同级

$("#a").before("span")

after()

在元素后插入指定的元素和内容：$(selsctor).after(content))同级

$("#a").after("span")

注：

  • 不存在追加元素到指定位置
    存在会将原来元素直接剪切设置到指定位置

删除元素

<div id="a">
	内容
</div>

方法

说明

代码

remove（）

删除所选元素或指定的子元素，包括整个标签和内部内容一起删

$("#a").remove()//自杀

empty（）

清空所选元素的内容

$("#a").empty()//清空元素

遍历元素

each（）

$(selector).each(function(index,element))

参数function为遍历的回调函数

index为遍历元素的序列号，从0开始

element是当前的元素，此时是Dom元素

<span class="green">我</span>
<span class="green">我</span>
<span class="green">我</span>
<span class="green">我</span>
$(".green").each(function(index,element){
    console.log(index);
    console.log(element);
    console.log(this);
    console.log($(this));
})

克隆

clone();

只存在内存中，如果要添加要追加

无论是true还是false都会克隆后代节点

但是true是会把事件也会克隆到对应的克隆对象，默认不给参数是false

$(function(){
   #('buttion1').click(function(){
       var cc=$('#div1').clone();
       $('#body').append(cc);
   }) ;
});

案例

表格生成案例
$(function(){
//模拟数据
    var data=[{
        name:"传智博客"，
        url："1",
        type:"IT培训机构"
    },
    {
        name:"传智博客"，
        url："1",
        type:"IT培训机构"
    },
    {
        name:"传智博客"，
        url："1",
        type:"IT培训机构"
    },]
   $('#button1').click(function(){
       //1.html(),他是会覆盖的要一次性的做
      var list=[];
      for(var i=0;i<data.length;i++){
          list.push("<tr>");
          //生成td
          for（var key in data[i]){
              list.push("<td>");
              list.push(data[i][key]);
              list.push("</td>");
          }
          list.push("</tr>");
      }
      //把他变成字符串
      $('#div').html(list.join(""));
   }) ;
});
$(function(){
//模拟数据
    var data=[{
        name:"传智博客"，
        url："1",
        type:"IT培训机构"
    },
    {
        name:"传智博客"，
        url："1",
        type:"IT培训机构"
    },
    {
        name:"传智博客"，
        url："1",
        type:"IT培训机构"
    },]
   $('#button1').click(function(){
       //2.$()
       for(var i=0;i<data.length;i++){
           var str=$('<tr><td>'+data[i]["name"]+'</td><td>'+data[i]["url"]+'</td><td>'+data[i]["type"]+'</td></tr>');
                  $('#div1').append(str);
       }
   }) ;
});
城市选择案例
$(function(){
    //全部移动
    $('#buttion').click(function(){
   		$('#src-city>option').appendTo($('#a1')) ;    
    });
    //选中的到右边
    $('buttion1').click(function(){
       $('#src-city>option:selectd').appendTo('#al'); 
    });
});
表格删除案例
$(function(){
//清空全部
   $('#buttion1').click(function(){
       $('#tbody').empty();
   }); 
   //删除对应的行
   $('tbody .get').click(function(){
       $(this).parent().parent().remove();
   });
});
美女图片例子
$(function(){
    $('#image-a').click(function(){
        var src1 =$(this).attr('href');
        var title1=$(this).attr('title');
        $('#image-xia').attr('src',asc1);
        $('#text1').text(title);
        //阻止a标签的跳转
        return false；
    }) ;
});
表格的全选反选
$(function(){
   $('#kuang').click(function(){
       var checked = $('#checked1').prop('checked');
       $('#li input').prop('checked',checked);

       
   }) ;
          //下面的多选的点击事件
          $('#li input').click(function(){
             //判断是否都选中
             var all =$('#li input').length
             var all-checked=$('#li input:checked');
             if(all==all-checked){
                 $('#upchecked').prop('checked','true');
             }else{
                       $('#upchecked').prop('checked','false');
             }
          });
    
    //优化
    $('#upchecked').prop('checked',all==all-checked);
});