jquery（二：jquery的DOM操作）

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);
});