首页 > 代码库 > jQuery --- 秒味

jQuery --- 秒味

jQuery设计思想:

方法函数化:

原生的:

  • -window.onload
  • -innerHTML
  • -onclick

jQuery的:

  • -$()
  • -html()
  • -click()

(使用this的时候,也要使用 $(this).包起来,再使用,调用函数等)

 

原生与JQ可以共存、但是原生与JQ不能混用。

 

改变结果集:

强大的过滤器:

  • -$(‘div‘.has(‘p‘))
  • -$(‘div‘).not(‘.myclass‘)
  • -$(‘div‘).filter(‘.myclass‘)   //class==myclass的div元素

相邻元素的查找:

链式操作:  $(‘div‘).find(‘h3‘).eq(2).html(‘hello‘);  //把div下的h3中的下坐标为2的元素的内容换成...

插件、UL组件等。

 

 

 

第二课:

取值与赋值的合体:

  • $(‘h1‘).html()  // 有无参数不同。  取值:一组中的第一个;赋值:全部赋值
  • .val()   value值
  • .attr()  // 是指属性方法: $(this).attr(‘class‘,‘active‘); //将class改为 active 。
  • .width() // 设置宽度值和获得宽度值

元素的移形换位:

  • 直接移动该元素  
  1. - $(‘div‘).insertAfter($(‘p‘)); // 将div元素移动到p元素之后。
  2. - $(‘div‘).appendTo($(‘p‘)); 
  • 移动其他元素
  1. - $(‘p‘).after($(‘div‘)) ; //与前面效果相同
  • 区别:操作的元素不同。 (当使用链式结构,在移动元素的同时,为元素增加样式,增加的元素不同!)
  1. 例如: $(‘div‘).insertAfter($(‘p‘)).css(...) 会为div加,第二种会为p加!

强大的创建:

  $(‘ul‘).append(‘<li>hello</li>‘);   //即可添加元素进去!

  

  var Li=$(‘<li>‘);

  Li.html(‘hello‘);

  $(‘ul‘).append(Li);

 

  clone : 复制节点    $(‘div‘).clone().appendTo(‘p‘);

 

工具方法:

构造函数上的方法:

- $.方法: 工具方法,原生的js也可以使用

window.onload = function(){

  var aLi = document.getElementsByTagName(‘li‘);

  $.each(aLi,function(index,elements){

    elements.innerHTML=index;

  })

}

 

原型上的方法:(感觉这个更清晰点。)

- $(‘li‘).each(function(index,elements){    // elements:代表获取的元素。

  $(elements).html(index);  //each----循环。   // 因为elements也是原生的,需要使用$()包成JQ对象。

})

 

事件操作:

独立事件:

  • -click()
  • -onmouseover()

通用事件:

  • -bind()

 

$(div).bind(click mouseover,function(){ alert(123); })

//  为元素添加事件

  • -one()
  • -unbind()  //取消事件
  • -e:event 对象
  • -pageX等
  • -阻止默认与冒泡
  • toggle内的函数循环执行 --- 应用: 第一次点击出现,第二次点击隐藏 (省略一个if判断!)
  • hover 同样:悬浮一个函数,移开一个函数!

用法:

$(div).toggle(function(){
   ... 
},function(){
   ... 
})  //函数放到了队列中,每一次触发都会执行到。 但有时不希望如此,可以使用stop来停止。
$(div).hover(function(){
   $(this).stop().animate({
      width: 300px; ....
   });
},function(){
   $(this).stop().animate({
      width: 200px,
      height: 200px
   });
})

 

运动特效:

 

常见效果:

  • -.fadeIn() //淡入
  • -.fadeOut  //淡出
  • -.slideDown()  //向下展开
  • -.slideUp()  //向上卷起

复杂效果:

  • -.animate()  // 改样式 。 ? -- 好像是通过更改更多属性来达到 更加复杂的效果。
  • -.stop()  // 停止效果。

应用:  选项卡的制作。(点击不同的1、2、3,出现不同的div。)

$(function(){

$(#div1).find(input.click(function(){

$(div1).find(input).attr(class,‘‘);
$(div1).find(input).css(display,none);

$(this).attr(class,active);
$(#div1).find(div).eq($(this).index()).css(display,block);
// 这里的index默认获得索引。
// 还可以增加淡入淡出的效果。  --- 这里就不是显示隐藏了,而是执行前面的淡入淡出的JQ效果:fadeIn()与fadeOut() ..还有一些效果。(position 需要relative)
}))

})

 

插件机制:

在JQ的源码上进行拓展,一个个做好的应用。

UI组件:

JQ官方提供的功能效果和UI样式。

UI的应用--拖拽:(简单地调用函数即可完成该效果。)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
  <script src=http://www.mamicode.com/"//code.jquery.com/jquery-1.10.2.js"></script>
  <script src=http://www.mamicode.com/"//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
    //通过引入js与ui库来实现拖拽
    $(function () {
        $(div).draggable();
    })

</script>
</head>
<body>
    <div style="width: 100px; height: 100px; background: red;"></div>
</body>
</html>

 

// 插件机制和UI组件的使用都是类似的。  调用一个封装好的函数即可!(可能还需要引入其规定的样式)