专业编程基础技术教程

网站首页 > 基础教程 正文

jQuery文档抄录

ccvgpt 2024-11-24 12:25:40 基础教程 1 ℃


jQuery([selector,[context]])

  • selector:用来查找的字符串
  • context:作为待查找的DOM元素集、文档或jQuery对象
示例:$("input:radio", document.forms[0]);
//在文档的第一个表单中,查找所有的单选按钮(即:type值为radio的input元素)

each(callback)

以每一个匹配的元素作为上下文来执行一个函数

jQuery文档抄录

$("img").each(function(i){
   this.src = "test" + i + ".jpg";
 });
//tips :可以使用return false 来提前跳出each循环

get([index])

get() 取得所有匹配的DOM元素集合, 【index】取得第index个位置上的元素。

offset([coordinates])

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性:top和left。此方法只对可见元素有效。

scrollTop([val])

获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

function myHandler(event) {
		alert(event.data.foo);
	}
$("p").on("click", {foo: "bar"}, myHandler)

trigger(type,[data])

在每一个匹配的元素上触发某类事件。

这个函数也会导致浏览器同名的默认行为的执行。比如:如果用trigger()触发一个“submit”,则同样会导致浏览器提交表单。

$("p").click( function (event, a, b) {
  // 一个普通的点击事件时,a和b是undefined类型
  // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

triggerHandler(type, [data])

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。

这个方法的行为表现与trigger类似,但有以下三个主要区别:

* 第一,他不会触发浏览器默认事件。

* 第二,只触发jQuery对象集合中第一个元素的事件处理函数。

* 第三,这个方法的返回的是事件处理函数的返回值,而不是具有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。

//如果你对一个focus事件执行了 .triggerHandler() ,则
//浏览器默认动作将不会被触发,只会触发你绑定的动作。

$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){
  $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});

hide([speed,[easing],[fn]])

  • speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
  • easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"
  • fn:在动画完成时执行的函数,每个元素执行一次。
//用200毫秒将段落迅速隐藏,之后弹出一个对话框。
$("p").hide("fast",function(){
   alert("Animation Done.");
 });

animate(params,[speed],[easing],[fn])

用于创建自定义动画的函数。

  • params:一组包含作为动画属性和终值的样式属性和及其值的集合
  • speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
  • easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
  • fn:在动画完成时执行的函数,每个元素执行一次。
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 , "easein");
});

serialize()

序列化内容为字符串。

jQuery.param(obj,[traditional])

将表单元素数组或者对象序列化,是serialize()的核心方法。

var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));

alert(recursiveEncoded);
alert(recursiveDecoded);
//a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
//a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

var shallowEncoded = $.param(myObject, true);
var shallowDecoded = decodeURIComponent(shallowEncoded);

alert(shallowEncoded);
alert(shallowDecoded);
//a=%5Bobject+Object%5D&b=1&b=2&b=3
//a=[object+Object]&b=1&b=2&b=3

jQuery.type(obj)

检测obj的数据类型。

        
jQuery.type(true) === "boolean"         
jQuery.type(3) === "number"       
jQuery.type("test") === "string"    
jQuery.type(function(){}) === "function"      
jQuery.type([]) === "array"
jQuery.type(new Date()) === "date"       
jQuery.type(/test/) === "regexp"

百度分享

<div class="bdsharebuttonbox ">
<a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
</div>
/* 分享 */
<script>
        window._bd_share_config = {
            "common": {
                "bdText" : 'title',
                "bdComment" : '我是通用分享设置,会出现在发送给QQ好友里的描述',
                "bdPic" : "https://...../0.png",//分享的图像地址
                "bdSnsKey": {},
                "bdMini": "2",
                "bdMiniList": false,
                "bdStyle": "0",//按钮样式
                "bdSize": "36",//按钮大小
                "bdDesc":'给你的好友留一句话吧'
            },
            "share": {}
        };
        with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src =
            '<?=static_url("static/api/js/share.js")?>?cdnversion=' + ~(-new Date() / 36e5)];
    </script>

Tags:

最近发表
标签列表