码迷,mamicode.com
首页 > Web开发 > 详细

JQuery

时间:2017-04-24 00:11:36      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:透明度   ade   委派   加载   语法   slide   out   内容   防止   

JQuery
JQuery语法
* 1、JQuery("选择器").action();通过选择器调用事件函数
* 但jquery中,JQuery可以用$符号代替,用$("选择器").action();
* ①选择器,可以直接使用css选择器,选中元素
* ②.action()表示对元素执行的操作
*
* 2、文档就绪函数:防止了文档在完全加载(就绪)之前执行jquery代码
*
* $(document).ready(function(){
$("p").hide();
 
$("p").fadeIn(5000);
});
简写形式
$(function(){
$("p").hide();
 
$("p").fadeIn(5000);
})
 
【文档就绪函数&window.onload区别】
①window.onload需在网页所有内容加载完后执行
文档就绪函数,只需加载完DOM后便执行
②window.onload只能写一个,写多个只会执行最后一个
文档就绪函数,写多个也不会被覆盖
3、Jquery对象与原生DOM对象互转
①原生DOM对象转为Jquery对象:$(DOM对象);
var p1= document.getElementById("p1");
$(p1);//转换
 
* ②Jquery对象转原生DOM对象:$("#p").get(0) $("#p")[0]
* $("#p").get(0).style.color="red";
 
调用的方式和函数的不同之处
 
【事件绑定快捷方式】
*
* $("button:first").click(function(){
alert("1")
})
*/
 
/*使用on绑定事件
* $("button").on("click",function(){
console.log($(this).html());
});
*/
 
/*使用on同时绑定多个事件,绑定同一函数
* $("button").on("mouseover click",function(){
console.log($(this).html());
});
*/
 
//调用函数时,传入自定义参数
/*$("button").on("click",{name:"jianghao"},function(event){
console.log(event.date.name);
});*/
 
 
/*使用on进行多事件多函数绑定
* $("button").on({
click:function(){
console.log("click")
},
mouseover:function(){
console.log("mouseover")
}
});
*
*/
 
//使用on进行事件委派
/*>>>子元素要触发的事件委托给给某一事件处理
* 作用:默认的绑定事件只能对该绑定的元素有效,使用事件委派,可以对新元素有效
*/
 
/*$(document).on("click","button",function(){
alert(1)
})*/
 
/*$("button").on("click",function(){
var p=$("<p>123456</p>");
$("p").after(p);
});
$(document).on("click","p",function(){
alert(1)
});*/
 
/*off()取消事件绑定
*
* 1、$("p").off():取消所有事件
* 2、$("p").off("click"):取消点击事件
* 3、$("p").off("click mouseover"):取消多个事件
* 4、$(document).off("click","p"):取消事件委派
*/
 
//使用.one()绑定事件,只能执行一次
/*$("button").one("click",function(){
alert(1)
});*/
 
/*$("p").click(function(event,arg1,arg2){
alert("触发了p的点击事件"+arg1+arg2);
});
 
$("button").click(function(){
$("p").trigger("click",["haha","hehe"]);
});*/
/*---------------------------------*/
 
 
/*show()
*
* ①不传参:让隐藏的元素直接显示,不进行动画
* ②传入时间:毫秒
*
* .show()动画执行效果,修改元素的宽度,高度,opcity属性
*
* .hide():让显示效果隐藏,与show相反
*
* .slidedown():让隐藏元素显示,从上往下
* .slideup():让隐藏元素显示,从下往上
* .slideToggle():让显示隐藏,隐藏的显示
* .fadeIn():让隐藏的淡出
* .fadeOut()
* .fadeToggle():让显示的隐藏,隐藏的显示,淡入淡出
* .fadeToggle(时间,透明度,函数):多了透明度,可以指定透明度
* .animate(最终的样式属性键对值)
*/
 
/*$("p").show(5000,function(){
alert(1)
});*/
 
/*$("p").slideDown(5000,function(){
alert(1)
});*/
 
/*$("p").fadeIn(5000);*/
HTTP:超文本传输协议。
*
* URL:统一资源定位符
* 组成: 协议名://主机名(IP地址):端口号/项目资源地址?传递参数键值对#锚点
* eg: http://127.0.0.1:8080/jd/index.html?name=jianghao
*
* localhost或127.0.0.1表示本机IP
*
*/
 
/* JSON 对象
*
* 1、JSON对象是键值对的集合,键与值之间用":"分隔,多个键值对之间,用","分隔
* 2、多个JSON对象,可以放到数组中去。JSON对象和数组,可以相互嵌套;
*
* JSON的键,必须是字符串。

JQuery

标签:透明度   ade   委派   加载   语法   slide   out   内容   防止   

原文地址:http://www.cnblogs.com/zhang11424/p/6754514.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!