JQuery优势：①代码简洁。②兼容性高。③已有大批写好的方法可直接调用。④解决一个页面不能有2个window.onload的困扰(js也能实现，只不过需要写个方法，麻烦点)
缺点：jq是页面标签加载完毕后就立即执行【无法马上获取图片的宽度高度】。而window.onload是等待标签中的src资源加载完毕后才执行。
1.jquery的入口函数
// 第一种
$(document).ready(function(){
});
// 第二种
$(function(){
});
//模拟jq解决一个页面只能加载一个onload方法
function $(dom){
return {
ready:function(func){
if(typeof(dom.onload)==="function"){
var oldfun = dom.onload;
dom.onload = function(){
oldfun();
func();
}
}else{
dom.onload = func;
}
}
}
}
//如此，如下两个方法都能执行，不会覆盖
$(window).ready(function(){
alert("调用这个方法");
});
$(window).ready(function(){
alert("调用这个方法21");
});2.JQuery选择器（部分）【包含已经学习的css选择器】
//id选择器
$("#demo")
//类选择器
$(".cc")
//标签选择器
$("div")
//并集选择器
$("div,.cc")
//通配符选择器，一般配合其他选择器一起使用
$("*")
【层级选择器】
//div下的儿子ul标签们
$("div>ul")
//div下的所有后代ul标签们，子子孙孙
$("div ul")
//紧挨着div的一个ul兄弟标签
$("div+ul")
//div后面的ul兄弟们
$("div~ul")
基本过滤选择器
//index从0开始，2代表第三个元素
$("li:eq(2)").css("font-size", "20px");
//小于【不包含】
$("li:lt(2)").css("font-size", "20px");
//大于【不包含】
$("li:gt(2)").css("font-size", "20px");
//序号为奇数的
$("li:odd").css("background", "orange");
//序号为偶数的
$("li:even").css("background", "orange");
//第一个
$("li:first")
//最后一个
$("li:last")
属性选择器
//有这个属性的就行
$("a[href]").css("font-size", "50px");
//属性等于XX的
$("a[href='www.baidu.com']").css("font-size", "50px");
//属性不等于XX的。包含没有href属性的
$("a[href!='www.sex.com']").css("font-size", "50px");
//属性以XX开头的
$("a[href^='http']").css("font-size", "50px");
//属性以XX结尾的
$("a[href$='cn']").css("font-size", "50px");
//属性值中，包含XX的
$("a[href*='sex']").css("font-size", "50px");
//属性选择可以写多个，求交集
$("a[href*='sex'][title$='jpg']").css("color", "pink");
选择器方法
$("li").eq(1).css("font-size", "40px");
$("li").parent(".ul").css("font-size", "40px");
$("li").first().css("font-size", "40px");
$("li").last().css("font-size", "40px");
$("li").siblings(".li3").css("font-size", "40px");
$("ul").find(".li3").css("font-size", "40px");3.常用方法
// 展示出来，再隐藏，再执行一个方法
$(".box").show(1000).hide(1000, function() {
alert("fku");
});
// 拉动，下拉出来，上拉隐藏
$(".box").slideDown(1000).slideUp(1000);
// 淡入淡出
$(".box").fadeIn("fast").fadeOut("normal");
// 500毫秒内，将box的透明度（opacity）调整成0.5
$(".box").fadeTo(500,.5);
// 拉下（显示）或者拉上（隐藏）
$(".box").slideToggle();
// 淡入或淡出
$(".box").fadeToggle();
// 自定义动画
$(".box").animate({
"width": "600px",
"height": "400px",
"opacity": .3,
"left": 500
}, 2000, function() {
alert(1);
});
// 停止前面的动画，执行下面的动画
$(".box").stop().slideToggle();
// 添加某个样式
$(".box").addClass("current");
// 移除某个样式
$(".box").removeClass("current");
// 添加或移除某个样式
$(".box").toggleClass("current");
// 判断是否有某个样式，有返回true，没有返回false
$(".box").hasClass("current");
// 获取选中元素在所有元素中的下标
// 案例：Tab栏切换中，上方选中，可快速定位下方应当显示的div的index下标
$("li").click(function() {
console.log($(this).index());
});补充：edge打开的第一页有两个轮播图，2个都没有什么动画效果，很符合之前的将所有图片放在一行后，直接定位left值完成。但是其中一个为了加一点动画效果，很逗得加了一个遮罩层，每次换图的时候，这个遮罩层就会快速显示出来再隐藏掉。试了一下，挺像这个效果的
$(".box").fadeIn("fast").fadeOut("fast");
//设置属性
$("input").attr("title", "newtitle");
//获取属性值
$("input").attr("title");
//移除属性
$("input").removeAttr("title");
//获取内容，不包含标签
$("#box").text();
//设置内容
$("#box").text("内容");
//获取内容，包含标签
$("p").html();
//设置内容
$("p").html("内容");
//当前元素相对浏览器左上角的距离。number【可赋值】
$("ul").offset().top
$("ul").offset().left
//当前元素相对于最近的定位父级元素的距离。number【不可赋值】
$("ul").position().top
$("ul").position().left
//当前页面已经卷动的距离，number，【可赋值】
$(document).scrollTop();
$(document).scrollLeft();
//元素本身的宽高，纯宽高，不包含padding和border。number【可赋值】
$("ul").height()
$("ul").width()【不常用的方法】
// 【父子局】
//在div内部的后面追加元素
$("div").append("<p>一个p标签</p>");
//将p标签添加到div内部的最后
$("<p>一个p标签</p>").appendTo($("div"));
// 在div内部的前面追加元素
$("div").prepend("<span>一个span标签</span>");
// 把span标签追加到div内部的前面
$("<span>一个span标签</span>").prependTo($("div"));
//【兄弟关系】把一个标签放到指定div后面，做兄弟，【关联选择器+】
$("div").after("<em>标签</em>");
$("<p>ppp</p>").insertAfter($("div"));
//【兄弟关系】把一个标签放到指定div前面，做兄弟
$("div").before("<i>标签</i>");
$("<h1>").insertBefore($("div"));
//干掉这个标签以及这个标签下的所有，可以用来自
$("div").remove();
//清空这个标签内部的所有内容。但是推荐用$("div").html("");这个效率高
$("div").empty();
//只克隆这个标签，true[同时克隆这个标签绑定的方法]
$("div").clone(true);
//之前,之后的所有兄弟，可以加选择器
$("div").prevAll();
$("div").nextAll();其中一个方法css的用法，function参数使用展示
$(function(){
//获取被选中元素的样式
var c = $("#li3").css("color");
//1设置被选中元素的样式
$("#li3").css("background-color","red");
//2...传入json，批量修改
$("#li3").css({
"background-color" : "red",
"font-size" :"20px"
});
//3...传入方法，灵活修改
$("li").css("background-color",function(index,value){
// :index 指代当前元素下标
// :value 指代当前元素样式值
// 此处需要返回样式值
return index%2==0? "pink":"orange";
});
});
<body>
<ul>
<li>很多兄弟1</li>
<li>很多兄弟2</li>
<li id="li3">很多兄弟3</li>
<li>很多兄弟4</li>
<li>很多兄弟5</li>
<li>很多兄弟6</li>
<li>很多兄弟7</li>
<li>很多兄弟8</li>
</ul>
</body>4.绑定事件，尽量用on，兼容。取消绑定用off
触发事件
//触发box的点击事件【单纯的触发了这个事件，不进行冒泡】
$("#box").click();
//触发绑定的事件，除了click也可以换别的
$("#box").trigger("click");
//触发绑定的事件，但不触发浏览器行为，比如a标签不跳转
$("a").triggerHandler("click");5.隐式迭代，each，map
隐式迭代：$("li").html("go0d");jq对象包含得数组，会默认隐式循环，为这些数组赋值。
如果只获取对象内容，则默认返回数组第一个元素得值【html()方法。经过测试，text()方法返回数组中所有元素得值】
$.each($("li"), function(index, ele) {
console.log(ele.innerHTML + index);
});
$.map($("li"), function(ele, index) {
console.log(ele.innerHTML + index);
});
1.上面输出得结果一致，map方法中function传参顺序变了。
2.map方法可以return，return得数据是新的数组，并非原数组6.事件对象
event.currentTarget 在事件响应方法中等同于this，当前Dom对象
event.target 事件触发源。不一定===this
event.pageX 鼠标距离浏览器左边得 坐标
event.pageY
event.stopPropagation() 阻止事件冒泡
event.preventDefault() 阻止默认行为
event.type 事件类型：click，dbclick...
event.which 鼠标得按键类型：左1 中2 右37.全局变量污染冲突
.JQ，一共污染了三个全局变量，$,jQuery,name
$.noConflict(); 让jQuery释放 $ ,让 $ 回归到jQuery之前的对象定义上去。
此方法有返回值，返回值可以代替 $ 做之前的操作，或者用jQuery代替
var someone_jQ = $.noConflict();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冲突的案例</title>
<script>
$ = {
show: function (argument) {
console.log("my $");
}
}
</script>
<script src="jquery-1.11.3.min.js"></script>
<script>
var myJQuery = $.noConflict();
jQuery(document).ready(function(){
jQuery("div").css("color","red");
// $("div").css("color","red"); //$就不能用了
myJQuery("div").css("color","red"); //这个可以用了
});
$.show("sdf");
</script>
</head>
<body>
<div>
sfadfsdf
</div>
</body>
</html>jQuery.data()
$(".box").data("name",123);//设置值
var t = $(".box").data("name"); //获取值
t.name = 18; // 对象值的更改，会直接保存到元素对象设置的值。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
