jQuery操作----总结

jQuery 设计思想是将原始的 dom 对象封装成一个 jQuery 对象，通过调用 jQuery 对象的方
法来实现对原始的 dom 对象的操作。这样设计的目的是：是为了更好地兼容不同的浏览器,
简化代码

jQuery编程步骤：

1、<script type="text/javascript" src="js/jquery-1.4.3.js">

2、使用jQuery提供的选择器找到节点,一般情况下， jQuery会将找到的节点封装成jQuery对象

3、调用 jQuery 对象提供的方法

jQuery 对象与 dom 对象之间的转换
a. dom 对象转换成 jQuery 对象：使用 var $obj = $(dom 对象);
b. jQuery 对象转换成 dom 对象：使用 var obj = $obj.get(0)或者 var obj = $obj.get()[0]

jQuery 选择器
jQuery 选择器模仿 css 选择器的语法，其作用是，查找符合选择器要求的节点。
a. 基本选择器
 #id
 .class
 element
 selector1,select2..selectn
 *
b. 层次选择器
 select1 select2
 select1>select2
 select1+select2
 select1~select2
c. 过滤选择器
1) 基本过滤选择器
 :first

 :last
 :not(selector)
 :even
 :odd
 :eq(index)
 :gt(index)
 :lt(index)
2) 内容过滤选择器
 :contains(text)
 :empty
 :has(selector)
 :parent
3) 可见性过滤选择器
 :hidden
 :visible
4) 属性过滤选择器
 [attribute]
 [attribute=value]
 [attribute!=value]
5) 子元素过滤选择器
 :nth-child(index/even/odd)
6) 表单对象属性过滤选择器
 :enabled
 :disabled
 :checked
 :selected
d. 表单选择器
 :input
 :text
 :pasword
 :radio
 :checkbox
 :submit
 :image
 :reset
 :button
 :file
 :hidden

e. select 选择器

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script>
      function f2(){
        //将原始的dom对象封装成一个jQuery对象
       var obj = $('#a1');
       //因为不再是原始的dom对象，所以不能使用dom对象提供的属性或方法了。
           要使用jQuery对象提供的方法戒者属性。
       alert(obj.html());
      }

     //演示：利用jQuery改变样式
     function f4(){
        $('#d1').css('font-size','60px').css('font-style','italic');
     }

//演示：dom 对象和 JQuery 对象的相互转换

       //dom对象转换成jQuery对象
       function f1(){
          var obj = document.getElementById('a1');
          var $obj = $(obj);
          alert($obj.html());
       }
       //jQuery对象转换成dom对象
       function f2(){
          var $obj = $('#a1');
          var obj = $obj.get(0);或var obj = $obj.get()[0];
          alert(obj.innerHTML);
       }

//演示：select 选择器

      //将找到节点的字体变大
      function f1(){
          $('.s1').css('font-size','40px');--- .class选择器s1对象

          $('p.s1').css('font-size','40px');---元素选择器p+ .class选择器s1对象
          $('div').css('font-size','40px');--- 元素选择器div对象
          $('#d1,p.s1').css('font-size','40px');---id选择器d1对象和元素选择器p+ .class选择器s1对象

$(' * ').css('font-size','40px');---所有
}

    </script>
</head>
<body style="font-size:30px;">
    <a id="a1" href="javascript:;" onclick="f2();">hello jquery</a>

<div id="d1">jquery 是什么?</div>

<div id="d1">hello1</div>

    <div class="s1">hello2</div>
    <div class="s1">hello3</div>
    <p class="s1">hello4</p>

jQuery dom 操作

1) 查询
利用选择器查找到节点：
 text() 输出或设置节点之间的文本,text 方法相当于 dom 节点的 innerText 属性
 html()输出或设置节点之间的 html 内容,html 方法相当于 dom 节点的 innerHTML 属性。
 attr()输出或设置节点的属性值。
 val()下拉列表,可以使用 val()获得值
2) 创建
 $(html);
3) 插入节点
 append()向每个匹配的元素内部追加内容
 prepend() 向每个匹配的元素内部前置内容
 after() 在每个匹配的元素之后插入内容
 before()在每个匹配的元素之前插入内容
4) 删除节点
 remove()
 remove(selector)
 empty() 清空节点

5) 复制节点
 clone() 复制（不复制行为）
 clone(true): 使复制的节点也具有行为
6) 属性操作
 attr(''); 读取属性
 设置：attr('','')
 戒者一次设置多个 attr({"":"","":""});
 删除：removeAttr('')
7) 样式操作
 attr("class","") 获取和设置
 addClass('') 追加
 removeClass('') 移除或 removeClass('s1 s2') 或 removeClass() 会删除所有样式
 toggleClass() 切换样式：
 hasClass('') 是否有某个样式
 css('') 读取设置 css('','')戒者 css({'':'','':''})//设置多个样式
8) 遍历节点
 children() 只考虑子元素，丌考虑其它后代元素。
 next()
 prev()
 siblings(): 兄弟节点
 find(selector)

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>

<style>

           .s1{
                 color:red;
            }
            .s2{
                 font-style:italic;
            }
</style>
    <script>

演示：打印，设置属性/属性值
function f2(){

alert($('#d1').html());---html()输出标记中所有内容

alert($('#d1').text());---text()输出标记中的文本内容

alert($('#d1').html('hello,tom'));---用 html()改变页面内容
alert($('#d1').attr('id'));---attr()输出节点的属性值，本例值为d1

$('#d1').attr('style' , 'font-size:40px;color:red;'); ---attr()设置节点的属性值

$('#d1').attr({'style':'font-size:60px;','class':'s1'}); ---attr()设置节点的属性值

alert($(':text').val());---使用 val()获得表单文本框的值

$(':text').val('马云');---val()设置值

alert($('#s1').val());---使用 val()获得下拉列表被选项的值
}

演示：增加节点

function f2(){

var $obj = $('<li>item4</li>');
$('#u1').append($obj);---标准形式

简化形式：

$('#u1').append('<li>item4</li>');---向元素u1内部追加元素

              $('#u1').prepend('<li>item4</li>');---向元素u1内部前置元素
              $('#u1').after('<div>hello jquery</div>');---向元素u1外部追加元素
              $('#u1').before('<div>hello jquery</div>');---向元素u1外部前置元素

$('#u1 li').remove('#i2');---删除节点

$('#u1 li :eq(1)').remove();---删除节点(#u1 li：层次选择器，:eq(1)：过滤选择器)

$('#u1 li :eq(1)').empty();---empty()清空节点中的内容

演示：初始化自动加载函数：当整个html文件解析完毕生成dom树之后执行内部的代码

$(function(){

$('#u1 li:eq(2)').click(function(){ alert('doaction...'); }); ---绑定click事件
$('#b1').click(function(){

                       var $obj = $('#u1 li:eq(2)').clone(true);---clone()复制节点不复制行为；clone(true):复制节点和行为
                       $('#u1').append($obj);
                 });
          });

演示：样式操作

          $(function(){
                $('#b1').click(function(){
                      $('#d1').attr('class','s1');---添加样式
                      $('#d1').addClass('s2');---添加样式
                      $('#d1').removeClass('s1');---删除样式
                      $('#d1').toggleClass('s1');
                      alert($('#d1').hasClass('s1'));---判断是否有指定样式

                     $('#d1').css({'font-style':'italic','font-size':'60px'});---设置样式
                });
            });

演示：遍历节点

           $(function(){
                $('#b1').click(function(){
                    $('#d1').children().css('color','red');---所有子节点

$('#d1').next().css('color','red');---下一个节点

$('#d1').siblings().css('color','red');---下一个节点

});

}

        }
    </script>
</head>
<body style="font-size:30px;">
    <a id="a1" href="javascript:;" onclick="f2();">hello jquery</a>

<div id="d1">jquery 是什么?</div>

</select>

</body>
</html>

事件处理

1) 事件绑订

      bind(type,fn)
2) 绑订方式的简写形式
      click(function(){
      });
3) 合成事件
 hover(enter,leave) : 模拟光标悬停事件
 toggle(fn1,fn2...)：模拟鼠标连续单击事件
4) 事件冒泡
 获得事件对象
          //e 不再是原始的事件对象，而是 jQuery封装之后的事件对象。
          click(function(e){
          });
 停止冒泡
          event.stopPropagation()
 停止默认行为
          event.preventDefault()
5) 事件对象的属性
 event.type:获得事件类型
 event.target:获得事件源,返回的是原始的 dom 节点

.selected{ background-color:yellow; }
</style>

     $(function(){
          正式写法
          $('#b1').bind('click',function(){
                $('#d1').css('font-size','60px');
          });

         简化为
         $('#b1').click(function(){
                $('#d1').css('font-size','60px');
         });
     });

演示：合成事件

$(function(){
$('#d1').hover(---hover(enter,leave) : 模拟光标悬停事件

//当光标进入时执行 this代表当前绑订事件的那个dom节点

function(){ $(this).css('background-color','#ff88ee'); },

//当光标移出时执行

function(){ $(this).css('background-color','#fff8dc');}

);
$('#a1').toggle(---toggle(fn1,fn2...)：模拟鼠标连续单击事件

function(){

$(this).after("<div id='tips'></div>");

$('#tips').html('无它，唯勤奋尔');
},

function(){ $('#tips').remove();}

);
});

演示：事件冒泡

     $(function(){
          $('#a1').click(function(e){
                 alert('你点击了一个链接');
                 e.stopPropagation();--- e.stopPropagation()方法阻止事件冒泡
          });
         $('#d1').click(function(e){
                alert('你点击了一个div');
         });
         $('a.s1').click(function(e){
               var obj = e.target;---e.target 是事件对象属性，可以获得事件源
               alert(obj.innerHTML);
        });
      });

演示：鼠标事件

    $(function(){
         $('ul li').mouseover(function(){---当鼠标移动到元素上时样式发生改变，鼠标移出后样式还原
               $(this).addClass('selected').siblings().removeClass('selected');
         });
    });

</script>

<body style="font-size:30px;">
<div id="d1">hello jquery</div>
<input id="b1" type="button" value="Click" onclick="f1();"/>

       <div id="d1">   <a href="javascript:;" id="a1">Click</a> </div>
       <a href="javascript:;" class="s1">Click2</a><br/>
       <a href="javascript:;" class="s1">Click3</a>

动画

1) show(): 显示
       hide(): 隐藏
       show("slow"/"normal"/"fast"/100) 可以带参数
       hide("slow"/"normal"/"fast"/100) 可以带参数
2) fadeIn()
     fadeOut(): 改变不透明度
3) slideUp():
     slideDown(): 改变元素的高度
4) 以上凼数可以在执行完动画之后，再执行一个回调凼数。
     show('slow',function(){
          //写上劢画执行之后要执行的操作。
     })
5) 自定义动画
animate(params,speed,[callback])

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
   #d1{
       width:250px;
       height:80px;
       background-color:#fff8dc;
       display:none;
   }
   #d2{
      width:100px;
      height:100px;
      background-color:red;
   }
   #d3{
      width:100px;
      height:100px;
      background-color:blue;
      opacity:0.2;
      display:none;
   }
</style>
<script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
<script type="text/javascript">

     演示：动画显示/隐藏、边框改变、透明度改变
    $(function(){
           $('#a1').toggle(

                 function(){
                      $('#d1').show('slow');---快速显示(不加参数的方法 show()和 hide()表示正常显示和隐藏)
                      $('#d1').slideDown('slow');---慢速减小元素的高度
                 },

function(){
$('#d1').hide('slow');---慢速消失

$('#d1').slideUp('slow');---慢速增大元素的高度
}

);
$('#d2').toggle(

fadeIn()&&fadeOut()改变不透明度

function(){
$('#d3').fadeIn('slow');

               function(){
                    $('#d3').fadeIn('slow',function(){ alert('我出来了');});---带回调函数
               },

function(){ $('#d3').fadeOut();}

);
});

演示：自定义动画

   $(function(){
          $('#b1').click(function(){
               $('#d1').animate({'left':'300px','top':'100px'},3000);
               $('#d1').animate({'top':'400'},2000).h ide('slow');
    });
</script>
</head>
<body style="font-size:30px;">
<a href="javascript:;" id="a1">如何才能学好java</a><br/>
<div id="d1">首先要好好培养兴趣</div>
<div id="d2"></div>
<div id="d3"></div>

jquery 操作类数组

$(选择器)操作返回的如果是一个数组，可以使用如下方法来操作：
1) each(fn(i)) 循环遍历每一个元素,this 代表被迭代的 dom 对象，$(this)代表被迭代
的 jQuery 对象。
2) eq(index) 返回 index+1 位置处的 jquery 对象
3) index(obj) 返回下标，其中 obj 可以是 dom 对象戒者 jQuery 对象。
4) length 属性个数
5) get() 返回 dom 对象组成的数组

6) get(index) 返回 index+1 处的 dom 对象

     演示：数组操作
    $(function(){
        $('#b1').click(function(){
            var $obj = $('#u1 li');
            alert($obj.length);---打印出类数组 ul（类似数组）的长度

            $obj.each(function(index){---遍历数组元素，为它们加上不同的样式
               if(index == 0){
                  $(this).css('color','red');
               }else{
                 $(this).css('color','yellow');
               }
           });

          $obj.eq(1).css('color','red');---指定元素的样式改变
          var $o1 = $obj.eq(1);
          var index = $obj.index($o1);---输出元素的下标
          alert(index);
          var obj = $obj.get(0);---get() 返回 dom 对象组成的数组
          alert(obj.innerHTML);
       });
    });
  </script>
</head>
<body style="font-size:30px;">
      <ul id="u1">

猜你喜欢