jquery 1.4参考手册学习笔记

Posted 2020-08-15

动画函数：

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括号中可以写数组，用在check和select上，相当于设置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 + ‘)‘);

  });

});

 

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

 

 

本文出自 “小叙前端” 博客，请务必保留此出处http://beileixinqing.blog.51cto.com/7540036/1863081