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

jQuery --- 秒味

2024-07-02 09:56:49   224人阅读

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组件的使用都是类似的。  调用一个封装好的函数即可！（可能还需要引入其规定的样式）

 

 

 

 

 

 

 

 


联系
我们