jquery 1.4参考手册学习笔记

简介:

动画函数:

stop()函数,其中括号内参数若写,格式为 stop({clearQueue :true,gotoEnd:true})

 

动画开关:显示隐藏

<button id="go">Go</button>

<p>Hello</p><p style="display: none">Hello Again</p>

 var flip = 0;

  $("button").click(function () {

      $("p").toggle( flip++ % 2 == 0 );

  });  

flip++ % 2 == 0 ,判断flip是为奇数或偶数

flip+1能被2整除,则为真,即flip为奇数则为真,偶数

后加加有滞后的特点,后加加之后还是原来的值,前加加之后立刻变为加后的值,所以首先设为0,后加加后依然为0,整除2可以除尽,则为true,即为show,所以首先显示隐藏的元素,然后再一起隐藏、一起显示。如果不加这个开关,直接写toggle(),则为两个p元素交替显示与隐藏,而不能同时显示与隐藏。

根据switch参数切换元素的可见状态(ture为可见,false为隐藏)。

如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。

 

jquery自定义插件

//    默认选中所有和默认不选中所有

    jQuery.fn.extend({

        check:function(){//这里的this指代jquery对象,所以也是类数组,可以遍历,可以取长度

            return this.each(function(){this.checked=true;});

        },

        uncheck:function(){

            return this.each(function(){this.checked=false;})

        }

    });

    $("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

 

    jQuery.extend({

        min:function(a,b){return a<b?a:b},

})

 

jQuery.fn.extend({

      test:function(){

//使用this   指代jquery对象

this.each(function(){

alert(this.value);//使用this-指代DOM对象

})

}

        }

    });

 

val(array)

val括号中可以写数组,用在checkselect上,相当于设置select,单选框和复选框的默认选中的值,而不是显示的value文字

<select id="single">

  <option>Single</option>

  <option>Single2</option>

</select>

<select id="multiple" multiple="multiple">

  <option selected="selected">Multiple</option>

  <option>Multiple2</option>

  <option selected="selected">Multiple3</option>

</select><br/>

<input type="checkbox" value="check1"/> check1

<input type="checkbox" value="check2"/> check2

<input type="radio" value="radio1"/> radio1

<input type="radio" value="radio2"/> radio2

 

$("#single").val("Single2");

$("#multiple").val(["Multiple2", "Multiple3"]);

$("input").val(["check2", "radio1"]);

 

prepend(content)

<p>I would like to say: </p>

<p>I would like to say: </p>

<b>Hello</b>

<b>Good Bye</b>

$("p").prepend( $(".foo")[0] );

结果:

<p><b>Hello</b>I would like to say: </p>

<p><b>Hello</b>I would like to say: </p>

<b>Good Bye</b>

 

css({属性名:“属性值”})

属性值如果有小杠作为连接符,则不写,第二个单词开头字母大写或者这个属性使用引号也可以!

$("p").css({ "margin-left": "10px", "background-color": "blue" });

大括号里只要有一个地方错的,则所有的都不能正常显示

css(name,value)

eg:$(p).css(background-color,red);

$(p).css(backgroundColor,red);

前面的属性名必须加双引号,其中的属性可以驼峰可以加小杠,涉及到px数值的,加引号,里面必须写单位,不加引号,直接写数字就可以。

 

offset(坐标)

不是获取偏移,是设置偏移,设置某个元素的相对于document对象的位置(relative

position() 获取匹配元素相对父元素的偏移

事件对象

fn这个参数的回调函数还可以接受一个参数。当这个函数被调用时,一个JavaScript事件对象会作为一个参数传进来。

这个事件对象通常是没有必要且可以省略的参数,因为当这个事件处理函数绑定的时候就能够明确知道他在触发的时候应该做些什么,通常就已经可以获得充分的信息了。然而在有些时候,在事件初始化的时候需要获取更多关于用户环境的信息。可以参考完整的关于事件对象的内容。

在事件处理函数内返回false就等价于执行事件对象上的.preventDefault().stopPropagation()

可以像这样在事件处理函数内使用事件对象:

 

$(document).ready(function() {

  $('#foo').bind('click', function(event) {

    alert('The mouse cursor is at ('

      + event.pageX + ', ' + event.pageY + ')');

  });

});

 

注意,这个参数添加到了一个匿名函数上。这个代码可以让用户在点击IDfoo的元素时,报告鼠标点击时相对于页面的坐标。

 

本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1863081,如需转载请自行联系原作者

相关文章
|
3月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
58 13
|
6月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
39 0
|
6月前
|
JavaScript 前端开发 Windows
jQuery权威指南学习笔记
jQuery权威指南学习笔记
|
移动开发 JavaScript 前端开发
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
[HTML CSS JS ES6 JS WebAPI JQuery]学习笔记目录
|
JavaScript 前端开发 Java
HTML+CSS+JS 学习笔记(四)———jQuery
HTML+CSS+JS 学习笔记(四)———jQuery
|
JavaScript 前端开发 索引
JavaScript学习笔记(五) jQuery
JavaScript学习笔记(五) jQuery
86 0
|
Web App开发 JavaScript 前端开发
jQuery学习笔记——jQuery基础
什么是jQuery?jQuery是一个快速、简洁的JavaScript库,其设计宗旨是“write less,do more”,倡导用更少的代码,做更多的事情。通过这段时间的学习,我感觉jQuery是一个“语法糖”,就像是包在糖果外面的包装,让js看起来更好看。
|
JavaScript 前端开发 API
jquery学习笔记
1.jquery是一个框架,是javasript框架。 2.jquery能做什么? *取得页面中元素,遍历DOM(document object model文档对象模型)树,jquery为了准确的获取需要检查活操纵的文档元素,提供了可靠而富有效率的选择符机制。
88 0
|
Web App开发 JSON JavaScript
html+css+js+jQuery学习笔记(二)
html+css+js+jQuery学习笔记
178 0
html+css+js+jQuery学习笔记(二)
|
前端开发 测试技术
html+css+js+jQuery学习笔记(一)
html+css+js+jQuery学习笔记
125 0
html+css+js+jQuery学习笔记(一)