jQuery --- 秒味

来源：互联网发布：软件开发工程师金融编辑：程序博客网时间：2024/04/25 18:57

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() // 设置宽度值和获得宽度值

元素的移形换位：

直接移动该元素

- $('div').insertAfter($('p')); // 将div元素移动到p元素之后。
- $('div').appendTo($('p'));

移动其他元素

- $('p').after($('div')) ; //与前面效果相同

区别：操作的元素不同。（当使用链式结构，在移动元素的同时，为元素增加样式，增加的元素不同！）

例如： $('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="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//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组件的使用都是类似的。调用一个封装好的函数即可！（可能还需要引入其规定的样式）

0 0