1.简介及语法

认识jQuery
1.jQuery:
jQuery库可以通过一行简单的标记被添加到网页中.
2.什么事jQuery:
jQuery是一个JavaScript函数库.
3.jQuery库包含的功能:
HTML元素选区
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX

Utilities

引入jQuery
1.网页中添加jQuery
1):从jquery.com下载jQuery库
2):从CDN中载入jQuery,从如Google中加载jQuery
a):百度和新浪的服务器存有jQuery
例如:http://libs.baidu.com/jquery/1.9.0/jquery.js
b):谷歌和微软
国内用不了
2:版本介绍:
V1.11.1:1.x支持IE6+
V2.1.1 :2.x支持IE9+ api想通
3. jquery.com

jQuery语法
1.jQuery语法:
基础语法:$(selector).action()
美元符号定义jQuery
选择符(selector)"查询"和"查找"HTML元素
jQuery的action()执行对元素的操作
例如:
$(this).hide() - 隐藏当前操作
$("p").hide() - 隐藏所有段落

需要引入jquery-2.1.3.min.js

   <script src="../../jquery-2.1.3.min.js"></script><!--  自己写的必须在jquery下面,因为从上向下引入--><script src="app.js"></script>
</head>
<body><p>hello1</p><p>hello2</p><p>hello3</p><p>hello4</p>
</body>

$(document).ready(function () {
//    alert("文档加载完毕");$("p").click(function () {$(this).hide();})
})

2.选择器和事件

选择器:http://api.jquery.com/category/selectors/

<p class="pclass">p1</p>
<p id="pid">p2</p>
<button>按钮</button>

$(document).ready(function () {//文档加载完成$("button").click(function () {
//       $("p").text("元素选择器");
//       $("#pid").text("ID选择器");$(".pclass").text("类选择器");});
});

jQuery事件
1.jQuery事件:
常用事件方法
绑定事件
解除绑定事件
事件的目标
时间的冒泡
自定义事件

<button id="bt1">单击隐藏</button>
<button id="bt2">双击隐藏</button>
<button id="bt3">鼠标移上去隐藏</button>
<button id="bt4">鼠标移开隐藏</button>

$(document).ready(function () {$("#bt1").click(function () {//单击事件$(this).hide();});$("#bt2").dblclick(function () {//双击事件$(this).hide();});$("#bt3").mouseenter(function () {//鼠标移到按钮之上$(this).hide();});$("#bt4").mouseleave(function () {//鼠标移开$(this).hide();});
});

绑定、解除绑定事件
绑定 .bind() http://api.jquery.com/bind/
解除绑定 .unbind() http://api.jquery.com/unbind/
jQuery1.7后
.bind() --> .on()
.unbind() --> .off()

   <button id="clickMeBtn">按钮</button>

$(document).ready(function () {/*  $("#clickMeBtn").click(function () {//项目大时,不好alert(1);});*//*  $("#clickMeBtn").bind("click",clickHandler1);$("#clickMeBtn").bind("click",clickHandler2);
//    $("#clickMeBtn").unbind("click");//事件全部解除$("#clickMeBtn").unbind("click",clickHandler2);//事件解除1个*/$("#clickMeBtn").on("click",clickHandler1);$("#clickMeBtn").on("click",clickHandler2);
//    $("#clickMeBtn").off("click");//事件全部解除$("#clickMeBtn").off("click",clickHandler2);//事件解除1个
});function clickHandler1(e){alert("clickhandler1");
}function clickHandler2(e){alert("clickhandler2");
}

事件之事件目标与冒泡

   <div style="width: 300px;height: 300px;background-color: aqua"><ul><li>A</li><li>B</li><li>C</li><li>D</li></ul></div>

$(document).ready(function () {$("body").on("click", bodyHandler);$("div").on("click", divHandler);
});function bodyHandler(e) {alert(e);
}function divHandler(e) {alert(1)e.stopPropagation();//阻止父级事件e.stopImmediatePropagation();//阻止所有事件,除了自己
}

事件之自定义事件

    <button id="ClickMeBtn">按钮</button>

var ClickMeBtn;$(document).ready(function () {ClickMeBtn = $("#ClickMeBtn");ClickMeBtn.click(function () {var e = jQuery.Event("MyEvent");ClickMeBtn.trigger(e);});ClickMeBtn.on("MyEvent", function (e) {alert(e);})
});

3.隐藏与显示、淡入淡出、滑动、回调

1.隐藏与显示

   <p>HELLO</p><button id="hide">隐藏</button><button id="show">显示</button><br><button id="hideorshow">隐藏/显示</button><hr><script>for(var i=0;i<5;i++){$("<div>").appendTo(document.body);}$("div").click(function () {$(this).hide(2000, function () {$(this).remove();//移除当前对象});});</script>

div{background: #ffff00;width: 30px;height: 50px;margin: 2px;float: left;
}

$(document).ready(function () {$("#hide").click(function () {$("p").hide(1000);//1s动画});$("#show").on("click",showp);$("#hideorshow").on("click",hideorshow)
});function showp(){$("p").show(1000);
}function hideorshow(){$("p").toggle(1000);//   隐藏/显示切换
}

2.淡入淡出

<button id="fadein">淡入</button>
<button id="fadeout">淡出</button>
<button id="fadetoggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="div1" style="display: none; width: 80px;height: 80px;background-color: orange"></div>
<div id="div2" style="display: none;width: 80px;height: 80px;background-color: blue"></div>
<div id="div3" style="display: none;width: 80px;height: 80px;background-color: red"></div>

$(document).ready(function () {$("#fadein").on("click", function () {$("#div1").fadeIn(1000);//淡入$("#div2").fadeIn(1000);$("#div3").fadeIn(1000);})$("#fadeout").click(function () {$("#div1").fadeOut(1000);//淡出$("#div2").fadeOut(1000);$("#div3").fadeOut(1000);});$("#fadetoggle").on("click",fadetoggle);$("#fadeto").on("click", function () {$("#div1").fadeTo(1000,0);//执行时间,透明度$("#div2").fadeTo(1000,0.7);//0 完全透明$("#div3").fadeTo(1000,1);//1 完全不透明})
});function fadetoggle(){$("#div1").fadeToggle(1000);//  淡入淡出  隐藏/显示   开关$("#div2").fadeToggle(1000);$("#div3").fadeToggle(1000);
}

3.滑动

<style>#content,#flipShow,#fliphide,#flip2{padding: 5px;text-align: center;background-color: #ffff00;border: solid 1px orange;}#content{padding: 50px;display: none;}</style><body><div id="flipShow">出现</div><div id="fliphide">隐藏</div><div id="flip2">出现/隐藏</div><div id="content">HELLO HI!</div>
</body>

$(document).ready(function () {$("#flipShow").click(function () {$("#content").slideDown(1000);//划出});$("#fliphide").on("click",fh);$("#flip2").on("click", function () {$("#content").slideToggle(1000);//出现/隐藏切换});
});function fh(){$("#content").slideUp(1000);//滑动隐藏
}

4.回调

<button>按钮</button>
<p id="p1">hellow world1</p>
<p id="p2">hellow world2</p>

$(document).ready(function () {$("button").click(function () {$("#p1").hide(1000, function () {//隐藏完成后执行//     alert("回调");});//        $("#p2").css("color","red");//直接变色$("#p2").css("color", "red").slideUp(1000).slideDown(1000);});
});

4.捕获、设置、元素添加、元素删除

1.HTML-捕获

<p id="text">this is my webpage<a>a标签</a></p>
<button id="btn1">按钮</button>
<hr>
<p><input type="text" id="it" value="moia"></p>
<hr>
<p><a href="http://www.baidu.com" id="aid">百度</a></p>

$(document).ready(function () {$("#btn1").on("click", function () {//      var i = $("#text").text();//this is my webpagea标签//       var i = $("#text").html();//this is my webpage<a>a标签</a>//.html可以获取标签,.text智能获取内容//       var i = $("#it").val();//       var i = $("#aid").href;//无效var i = $("#aid").attr("href");alert(i);});
});

2.HTML-设置

<p id="p1">HELLO</p>
<button id="btn1">按钮</button>
<hr>
<p id="p2">WORLD</p>
<button id="btn2">按钮</button>
<hr>
<input type="text" id="i3" value="hehe">
<button id="btn3">按钮</button>
<hr>
<a id="aid" href="http://www.baidu.com">百度->bing</a>
<button id="btn4">按钮</button>
<hr>
<p id="p5">hello</p>
<button id="btn5">按钮</button>

$(document).ready(function () {$("#btn1").click(function () {$("#p1").text("修改成这个内容");});$("#btn2").on("click", function () {$("#p2").html("<a href='http://www.baidu.com'>.html可以加标签</a>")});$("#btn3").on("click",func3);$("#btn4").click(function () {//      $("#aid").attr("href","http://www.bing.com")//修改$("#aid").attr({"href":"http://www.bing.com","title":"hello"})//修改多个});$("#btn5").click(function () {//回调函数$("#p5").text(function (i,ot) {//当前元素下标,内容return "old:"+ot+" new:新内容"+(i);})});
});function func3(){$("#i3").val("改成这个");
}

3.HTML-添加元素

<p id="p1">hello</p>
<button id="btn1">append</button>
<button id="btn2">prepend</button>
<button id="btn3">before</button>
<button id="btn4">after</button>
<button id="btn5">按钮</button>

/*append //在被选择元素的结尾插入
prepend //在被选择元素的开头插入
before  //被选择元素之前
after //被选择元素之后*/$(document).ready(function(){$("#btn1").click(function () {$("#p1").append("append")});$("#btn2").click(function () {$("#p1").prepend("prepend");});$("#btn3").click(function () {$("#p1").before("before");});$("#btn4").click(function () {$("#p1").after("after");});$("#btn5").on("click",appendText);
});function appendText(){/*  htmljQueryjs(DOM)*/var text1 = "<p>HTML</p>"var text2 = $("<p></p>").text("jQuery");var text3 = document.createElement("p");text3.innerHTML = "DOM"$("body").append(text1,text2,text3);
};

4.HTML-删除元素

<p id="pid">hello</p>
<button id="btn1">删除</button>
<hr>
<div id="div" style="width: 200px;height: 200px;border: 1px solid #000000;background-color: #ffff00 ">
hello
<p id="p2">hello2</p>
<p>hello3</p>
</div>
<button id="remove0">remove</button>
<button id="empty0">empty</button>

//remove   empty
$(document).ready(function () {$("#btn1").click(function () {//$("#pid").remove();$("#pid").empty();});$("#remove0").click(function () {$("#div").remove();//全部删除});$("#empty0").click(function () {$("#div").empty();//只删除里面的子元素});
});

jQuery基础学习笔记(上)相关推荐

计算机网络基础学习笔记(上)
学习视频在观看学习视频前,可以先了解一下大概:互联网是如何运作的随看随记 TCP和UDP MAC和IP地址,从几个不同的角度讲的: CSDN博客知乎博客园从我的角度来看,MAC地址是区分IP ...
jQuery 基础学习笔记
1. jQuery 的执行时间: $(document).ready(function(){--- jQuery functions go here ----// 保证当文档对象加载完成后,进行元素事 ...
CreateJS基础学习笔记(上)
1.CreateJS介绍了解CreateJS 1.CreateJS: 一款HTML5游戏开发的引擎 CreateJS是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低H ...
Oracle PL/SQL语句基础学习笔记(上)
PL/SQL是ORACLE对标准数据库语言的扩展,ORACLE公司已经将PL/SQL整合到ORACLE 服务器和其他工具中了,近几年中更多的开发人员和DBA开始使用PL/SQL,本文将讲述PL/SQL ...
jQuery基础学习笔记(下)
8.jQuery的扩展与noConflict 1.jQuery扩展 <script src="../../jquery-2.1.3.min.js"></scrip ...
jQuery基础学习笔记(中)
5.CSS操作及jQuery的盒子模型 1.jQuery CSS方法 <div></div> css.css .style1{width: 100px;height: 100p ...
HTML5新特性基础学习笔记上
1.HTML5音频视频音频播放 1.Audio(音频) HTML5提供了播放音频文件的标准 2.control(控制器) control属性供添加播放,暂停和音量控件 3.标签: <audio ...
1.html5+css3基础学习笔记(上)
1 HTML简介 1.1 W3C标准伯纳斯李1994年建立万维网联盟( W3C ),W3C的出现为了制订网页开发的标准,以使同一个网页在不同的浏览器中有相同的效果.所以,我们需要制订我们编写的网页都 ...
ASP.Net MVC开发基础学习笔记（5）：区域、模板页与WebAPI初步
http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...

jQuery基础学习笔记(上)