网站首页 > 技术文章 正文
jQuery([selector,[context]])
- selector:用来查找的字符串
- context:作为待查找的DOM元素集、文档或jQuery对象
示例:$("input:radio", document.forms[0]);
//在文档的第一个表单中,查找所有的单选按钮(即:type值为radio的input元素)
each(callback)
以每一个匹配的元素作为上下文来执行一个函数
$("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>
猜你喜欢
- 2024-10-23 「jQuery-5」 JavaScript对象和json
- 2024-10-23 超级好用的轻量级JSON处理命令jq(jsonpath js)
- 2024-10-23 $.ajax()常用方法详解(推荐)(ajax详细讲解)
- 2024-10-23 Jquery相关(jqueryui)
- 2024-10-23 jQuery知识点总结(jquery的认识)
- 2024-10-23 前端工程师面试题汇总(前端工程师面试题汇总怎么写)
- 2024-10-23 jQuery基础教程学习笔记(二)样式操作
- 2024-10-23 前端基础进阶(十三)详细图解jQuery扩展jQuery插件
- 2024-10-23 jQuery对象和DOM对象互相转换(jquery对象怎么转换dom对象)
- 2024-10-23 Help!AJAX到底怎么传多文件数组?知道的赶紧进来
- 11-27echarts图形报表的入门案例
- 11-27Echarts仿电梯运行图
- 11-27微信小程序开发之wepy 引入echarts统计图方法 亲测可用
- 11-27yarn安装echarts教程
- 11-27微信小程序使用 ECharts
- 11-274、echarts 如何画图?(必会)
- 11-27JavaScript 前端数据可视化——ECharts.js
- 11-27vue+echarts使用
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)