jQuery总结
1.jQuery是一个Javascript函数库，对JavaScript进行封装，使其变得更加简洁。引入jQuery的方法：1.在官网下载jQuery库，2.从网页中载入jQuery。基础语法：$(selector).action(),$定义jQuery，selector：查询你和查找HTML元素，action()执行对元素的操作，jQuery的函数及操作，可以在官网的API中查看
2.jQuery选择器和事件
Jquery选择器，官网从API中可以看到函数、事件、选择器
$(document).ready(function () {//用于声明文档是否加载完成
元素选择器
$("button").click(function () //通过调用button的点击事件
{
$("p").text("p元素被修改了");//调用p元素，通过text来修改p元素的内容
})
id选择器,类选择器同理
$("button").click(function () {
$("#pid").text("我只修改p2元素");
})
})
Jquery事件常用方法
$(document).ready(function () //用于声明文档是否加载完成
{
$("button").click(function (){//点击事件
$(this).hide();//调用本身让文字消失
});
$("button").dblclick(function () {//鼠标双击事件
$(this).hide();
})
$("button").mouseenter(function () {//鼠标移动事件，当鼠标移动到按钮上，文字取消
$(this).hide();
})
$("button").mouseleave(function () {//鼠标移开事件，当鼠标移开时，按钮消失
$(this).hide();
})
});
绑定事件与解除绑定事件bind(),unbind()
$(document).ready(function (){
$("#clickMeBtn").click(function () {//常用事件
alert("hello");
});
$("#clickMeBtn").bind("click",clickHandler1)//绑定事件，可以使用on来代替bind
$("#clickMeBtn").bind("click",clickHandler2)//绑定事件
$("#clickMeBtn").unbind("click",clickHandler2)//解除绑定事件，都要解除只用写个click可以用off代替它，
});
function clickHandler1() {
console.log("hello")
}
function clickHandler2() {
console.log("hello2")
}
事件目标与冒泡
$(document).ready(function () {
$("body").bind("click",bodyHandler)//给body做一个监听事件，也就是绑定事件，点击其内容可获得
$("div").bind("click",divHandler);//给div加上监听事件，点击div可获得
});
function bodyHandler(event) {
conlog(event);//不是所有浏览器都支持console
}
function divHandler(event) {
conlog(event);
// event.stopPropagation();//阻止父级事件冒泡
event.stopImmediatePropagation();//阻止所有事件冒泡
}
function conlog(event) {//可以通过函数调用console来完成修改，比较容易，console一出错可以通过此注销
console.log(event);
}
自定义事件
$(document).ready(function () {
$("#clickMeBtn").click(function () {//常用事件,也可叫监听事件
var e = jQuery.Event("MyEvent");//创建对象e通过jQuery.Event创建自己的事件
$("#clickMeBtn").trigger(e);//trigger触发被选元素的指定事件类型
});
$("#clickMeBtn").bind("MyEvent",function (event) {//通过调用按钮，创建绑定事件，指定自定义事件MyEvent的方法
console.log(event);
})
});3.jQuery HTML
HTML：
HTML捕获
这是p标签这是a标签
HTML的设置
hello world
hello world
开始是百度后面是极客
hello word
hello word
HTML的添加
hello world
hello world
HTML删除
hello
hello world
hello
JQ：
单纯的HTML捕获，将内容显示到想要显示的地方
$(document).ready(function () {
$("#btn1").click(function () {//通过点击按钮来触发事件
alert($("#pid").text());//通过text获取p元素的内容，他不会显示子标签，只显示其中的内容
});
$("#btn1").click(function () {//通过点击按钮来触发事件
alert($("#pid").html());//通过html获取p元素的内容，他会其内的子显示标签
});
$("#btn1").click(function () {//通过点击按钮来触发事件
alert($("#it").val());//大多用于input元素通过val()方法返回或设置被选元素的值
});
$("#btn2").click(function () {//通过点击按钮来触发事件
alert($("#aid").attr("href"));//通过attr()获取元素集中第一个元素的属性值
});
});
HTML设置
$(document).ready(function () {
$("#btn1").click(function () {
$("#pid1").text("极客学院");//通过text修改其内容
});
$("#btn2").click(function () {
$("#pid2").html("极客学院");//通过html修改其内容,可以元素加一个标签
});
$("#btn3").click(function () {
$("#i3").val("极客学院");//通过val()可以修改input输入域的内容
});
$("#btn4").click(function () {
// $("#aid").attr("href","http://www.jikexueyuan.com");//通过attr()可以修改元素中属性的值，修改一个属性
$("#aid").attr({
"href":"http://www.jikexueyuan.com",
"title":"hello"
});//修改多个属性
});
$("#btn5").click(function () {
$("#pid5").text(function (i,ot) {
return "old:"+ ot + " new:这是新的内容" +(i)
});//通过text(function(i,0t){})回调的方式，i相当于元素的下标，一般默认为0，ot：当前要修改的内容，可以不停的添加
});
$("#btn6").click(function () {
$("#pi6").hide("#pid6",function () {
alert("隐藏")
});//通过hide("#pid"function(){})回调的方式，先隐藏内容再弹出对话框
});
});
HTML添加元素和内容,
添加内容的方法：
prepend/append：在被选中元素之前/之后插入内容不换行
before/after：在被选中元素之前/之后插入内容，要换行
$(document).ready(function () {
$("#btn1").click(function () {
$("#pid1").append("插入内容");//在所选元素之后插入内容
});
$("#btn1").click(function () {
$("#pid1").prepend("插入内容");//在所选元素之前插入内容
});
$("#btn2").click(function () {
$("#pid2").before("插入内容");//在所选元素之前插入内容,要换行
});
$("#btn2").click(function () {
$("#pid2").after("插入内容");//在所选元素之后插入内容，要换行
});
});
添加元素的方法：HTML、JSDOM、Jquery
function appendText() {
var text1 = "iwen
";//在HTML中添加
var text2 = $("").text("ime");//在Jquery中添加
var text3 = document.createElement("p");//在JSDOM中添加
text3.innerHTML = "bob";
$("body").append(text1,text2,text3);//追加标签不用加引号
}
删除元素,常用的删除方法remove:移除. empty:空的
$(document).ready(function () {
$("#btn1").click(function () {
$("#div").remove();//全部删除
$("#div").empty();//删除里面的子元素
})
})
4.jQuery的效果
HTML：
Jquery效果，隐藏与显示
hello
Jquery效果淡入淡出
display: none;在此是让他的展示效果为隐藏，好实现淡出效果
Jquery效果滑动
出现
隐藏
出现/隐藏
hello world
Jquery效果,回调
hello world hello world hello world hello world
JQ：
Jquery效果隐藏与显示
$(Document).ready(function () {
$("#hide").click(function () {
$("p").hide(1000);//隐藏，hide中的数值为毫秒，为隐藏所用的时间
});
$("#show").click(function () {
$("p").show(1000);//显示，hide中的数值为毫秒，为显示所用的时间
});
$("#toggle").click(function () {
$("p").toggle(1000);//隐藏及显示为一个按钮，toggle中的数值为毫秒，为功能所用的时间
});
});
Jquery效果淡入淡出
$(document).ready(function () {
$("#in").on("click",function () {
$("#div1").fadeIn(1000);//淡出到不透明所花费的时间
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").on("click",function () {
$("#div1").fadeOut(1000);//淡入到透明所花费的时间
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").on("click",function () {
$("#div1").fadeToggle(1000);//淡入淡出集为一体相当于开关
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
$("#to").on("click",function () {
$("#div1").fadeTo(1000,1);//fadeTo()设置它的透明度，第一个参数为实现时间，第二个为透明效果0完全透明，1完全不透明
$("#div2").fadeTo(1000,0.7);
$("#div3").fadeTo(1000,0);
});
});
Jquery效果，滑动
$(document).ready(function () {
$("#flipShow").click(function () {
$("#content").slideDown(1000);//用向下滑动动作显示匹配的元素,时间为1000毫秒
});
$("#flipHide").click(function () {
$("#content").slideUp(1000);//用向上滑动动作隐藏匹配的元素
});
$("#flipToggle").click(function () {
$("#content").slideToggle(1000);//用滑动动作显示或隐藏匹配的元素
});
});
Jquery效果,回调
$(document).ready(function () {
$("#btn").click(function () {
// $("p").hide(1000,function () {
// alert("动画结束,窗口弹出,这个方法被称为回调 ")
// });//将p元素隐藏
$("p").css("color","red").slideUp(1000).slideDown(1000);//同时设置p的多个动画,css设置其样式,先隐藏再出现
});
});
5.jQueryAJAX很重要，指异步操作，及在网页中执行一个操作网页不会跳转，后面给出详细方法
6.jQuery的扩展：
扩展文件：
$.myjq = function () {
alert("hello");//直接通过$.myjq = function () {}创建函数来实现拓展
}//方式1
$.fn.myjq = function () {
$(this).text("hello");
}//方式2源文件：
// $(document).ready(function () {
// // $.myjq();//直接调用所申明的函数
// $("div").myjq();//通过div调用
// })
//noConflict方法因为可能文件中有其他函数占用了$符号，使用noConflict代替掉美元符号让美元符号不代表jQury
$.noConflict();//解除$，让他不在是jQuery的缩写
jQuery(document).ready(function () {
jQuery("#btn").on("click",function () {
jQuery("div").text("替换效果")
});
})7.jQuery Css
JQ的CSS
$(document).ready(function () {
// $("div").css({
// width: "100px",height: "100px",backgroundColor: "#00ff00"
// });//通过JQ更改css的样式
$("div").addClass("style1")//通过引入css文件增加样式，在代码中更改能让他变为动态的
//$("div").removeClass("style1")//移除样式
$("div").click(function () {
$(this).toggleClass("style");//相当于开关来回切换
})
});
//JQ的CSS盒子
$(document).ready(function () {
// alert($("div").height())//通过height()方法得到元素的高度
// alert($("div").innerHeight());//得到元素高度+内边距
// alert($("div").outerHeight());//不传参数包含内边距，元素本身，边框
alert($("div").outerHeight(true));//传参数true包含内边距，外边距，元素本身，边框
});8.jQuery遍历
HTML，CSS
JQ向上及向下遍历
JQ同级遍历
P
H2
H3
H4
H5
H6
JQ过滤
div1
div2
div3
JQ向上级向下遍历
#div{
width: 400px;
height: 400px;
border: 3px solid red;
}
#div1{
width: 300px;
height: 300px;
margin-top: 10px;
margin-left: 10px;
border:3px solid red;
}
p{
width: 200px;
height: 200px;
margin-top: 10px;
margin-left: 10px;
border:3px solid red;
}
JQ同级遍历
.div2 *{
display: block;
padding: 5px;
margin: 15px;
border: 3px solid red;
}JQ：
JQ遍历之向下遍历，方法children()，find()
$(document).ready(function () {
// $("#div").children("#div1").css({border:"3px solid blue"})//children可以写参数，也可以不写参数，只能改变儿子辈
$("#div").find("p").css({border:"3px solid blue"})//find必写参数，可以向下传递到任何辈分
})
JQ遍历之向上遍历，方法parent(),parents(),parentsUntil()
$(document).ready(function () {
// $("a").parent().css({border:"3px solid blue"})//只能指向一层向上遍历，只能找到父级
// $("a").parents().css({border:"3px solid blue"})//全部的向下遍历，所有的都能找到
$("a").parentsUntil("#div").css({border:"3px solid blue"})//他是一个区间，能将两元素之间的遍历
})
JQ同级遍历，siblings(),next(),nextAll(),nextUntil(),prev(),prevAll(),prevUntil()
$(document).ready(function () {
$("h4").siblings().css({border:"3px solid blue"});//不指定参数把同级除它以外的全部修改颜色，指定参数，只修改同级指定的元素
$("h4").next("h5").css({border:"3px solid blue"});//只能指定它的下一个元素
$("h4").nextAll("h5").css({border:"3px solid blue"});//它下面的所有元素都被修改
$("p").nextUntil("h6").css({border:"3px solid blue"});//只能从上到下，在两个元素之间的会变化
同理prev是从下到上，next从上到下
// });
JQ遍历之过滤，方法first(),last(),eq(),filter(),not()
$(document).ready(function () {
$("div p").first().css("background-color","red");//first()寻找同样元素中的第一个
$("div p").last().css("background-color","red");//last()寻找同样元素的最后一个
$("div p").eq(0).css("background-color","red");//eq()返回当前元素指定的索引id，从0开始,0为第一个元素
$("div p").filter("p").css("background-color","red");//filter()指定一个标准，满足就改变颜色，不满足不改变
$("div p").not(".p1").css("background-color","red");//not()在相同元素中指定一个标准，满足就不改变颜色，其他改变颜色
})
9.jQuery菜单的实现
HTML，CSS
ul,li{
list-style-type: none;
}
ul{
padding: 0px;/*去掉ul中的缩进，低版本的ie中可能还不行，要加上margin*/
margin: 0px;
}
.main,.main1{
background-image: url("menu_img/3.png");
width: 100px;
background-repeat: repeat-x;
}
li{
background-color: gray; /*主菜单的背景图片的设置会覆盖li标签给它设置的背景颜色*/
}
a{
text-decoration: none;
padding-left: 20px;
display: block;
width: 80px;
padding-top: 3px;
}
.main a,.main1 a{
color: white;
background-image: url("menu_img/1.jpg");
background-repeat: no-repeat;
background-position: 3px center;
}
.main li a,.main li a{
color: black;
background-image: none;
}
.main ul,.main1 ul{
display: none;
}
.main1{
float:left;
margin-right: 1px;
}JQ：
// 垂直菜单实现
$(document).ready(function () {
$(".main>a").click(function () {
// 做出现隐藏效果，第一种方法
var ulNode = $(this).next("ul");//找到当前函数的下一个元素“ul”，将其存储在ulNode中
// if(ulNode.css("display")=="none")//如果ul的排列隐藏了为空
// {
// ulNode.css("display","block");//通过点击让他显示
// }else{
// ulNode.css("display","none");//不为空，通过点击让他为空隐藏
// }
// JQ中的简单方法，show(),hide()，toggle();数字，slow，fast，normal可以控制变化的时间
// ulNode.show();//显示
// ulNode.hide();//隐藏
// ulNode.toggle(1000);//相当于开关显示隐藏一体
// 滑动
// ulNode.slideDown();//下移
// ulNode.slideUp();//上移
ulNode.slideToggle();//相当于开关为一体
})
changeImg($(this));
})
//水平菜单栏
$(document).ready(function () {
$(".main1").hover(function () {
$(this).children("ul").slideToggle();//调用本身函数，通过children找到子函数"ul"设置效果
changeImg($(this));
});
});
function changeImg(mainImg) //为了改变点击时下拉菜单的图标
{
if(mainImg){
if(mainImg.css("background-image").indexOf("menu_img/1.jpg")>=0)//indexOf()指定字符串在另一个字符串的位置找到返回1，没找到返回0
{
mainImg.css("background-image","url('menu_img/2.jpg')");
}else{
mainImg.css("background-image","url('menu_img/1.jpg')");
}
}
}