JQuery
快速，简洁的javascript代码库。
封装了javascript的常用功能代码，简化JS操作，优化HTML文档操作，事件处理，动画设计，AJAX交互。
最流行的JS框架。
+表示后面紧挨的兄弟
~表示后面所有的兄弟
空格 表示所有后代
>表示所有儿子
，逗号代表全选
parent() 直接父亲
children() 所有直接儿子
<script>
$(function(){ //这个表示页面加载完就处理，JS中是οnlοad=function(){}
var btn=document.getElementById("btn");
$(btn).click(function(){ //$(btn)把JS对象btn转成jquery对象。
alert("jjj")
})
})
</script>
<input type="button" value="事件" id="btn" />
通过ID：
$("#btn") 表示一个集合
$("#btn")[0] 表示集合第一个元素
$(function(){
var btn=document.getElementById("btn");
$(btn)[0].onclick=function(){ //jquery对象转js对象
alert("jjj")
}
})
或者
$(function(){
var btn=document.getElementById("btn");
$(btn).click(function(){
alert("jjj")
})
})
悬停里两个方法 ，一个鼠标进执行，一个离开执行
$(function(){
$("#btn").hover(function(){
$(this).hide();
},
function(){
$(this).show();
})
})
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
//alert("src:"+$("img").attr("src"));
//alert("value:"+$(this).val());
//alert("href:"+$("#aa").attr("href"));
//alert("text:"+$("p").text())
alert("html:"+$("p").html())
})
})
</script>
</head>
<body>
<input type="button" value="获取" id="btn" /><br />
<p><a href="#">fdgfdg</a></p><br>
<a href="http://www.baidu.com" id="aa">我的超链接</a><br>
<img src="./img/005.png" width="200px" height="200px" />
</body>
链式编程
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("p").slideUp(1000).slideDown(1000).hide(1000).show(1000);
})
})
</script>
</head>
<body>
<input type="button" value="链式编程" id="btn1" />
<p>dfdfdfdgfdgfdgfd梵蒂冈的说法功夫大使馆丰东股份第三个哈哈僵尸叔叔干啥啊啊啊啊啊啊啊啊啊啊啊啊</p>
</body>
$(function(){
$("#btn").click(function(){
var text1 = "<p>文本1</p>";
var text2 = $("<p></p>").html("文本2"); // 这也选中了P标签。。
var text3 = document.createElement("p"); //<p></p>
text3.innerHTML = "文本3";
//$("body").append(text1,text2,text3);
$("p").after(text1,text2,text3);
})
})
//$("p").text("<a href='#'>我是a链接</a>"); //纯文本内容
//$("p").html("<a href='#'>我是a链接2</a>"); //html内容显示
//$("#aa").attr("href","xxxxxxxx");
$("img").attr("src","../img/005.png");
$(this).val("改变了值");
$(function(){
$("#btn").click(function(){
$("h2,h1,p").addClass("blue"); //三个标签都加蓝
})
})
$(function(){
$("#btn").click(function(){
$("body div:first").addClass("imp blue"); //body下面div 第一个元素，添加imp blue两个class
})
})
$(function(){
$("#btn").click(function(){
$("div").css({"width":"120px","height":"60px","border-style":"solid","color":"blue"})
})
})
$(function(){
$("#btn").click(function(){
var text = "宽:"+$("div").width()+"; 高: "+$("div").height()+"<br/>";
text += "inner宽:"+$("div").innerWidth()+"; inner高: "+$("div").innerHeight()+"<br/>";
text += "outter宽:"+$("div").outerWidth()+"; outter高: "+$("div").outerHeight()+"<br/>";
$("div").html(text);
})
})
$(function(){
$("#btn").click(function(){
$("h3").parent().css("height","100px"); //parent(): 直接父亲
//$("h3").parents().css("height","100px"); //parents(): 找所有父标签
//$("h3").parentsUntil("body").css("height","100px"); //在子和祖先之前的父标签
})
})
$(function(){
$("#btn").click(function(){
//$("#parents").children().css("height","100px"); //直接儿子
//$("#parents").children("p").css("height","100px"); //找子标签a
//$("#parents").find("div").css("height","100px"); //找指定后代
$("#parents").find("*").css("height","100px"); //*代表通配所有子标签
})
})
特点：
链式语法
支持css选择器
拥有丰富的插件
兼容各种主流浏览器
<body>
<div id="all">
<div id="head">
<h3>学科分类</h3>
<span><img src=""/></span>
</div>
<div id="content">
<ul>
<li>
<a href="#">JavaEE</a><i> (1110) </i></li>
<li>
<a href="#">PHP</a><i> (230) </i></li>
<li>
<a href="#">BIG</a><i> (1430) </i></li>
<li>
<a href="#">Android</a><i> (1560) </i></li>
<li>
<a href="#">IOS</a><i> (870) </i></li>
<li>
<a href="#">H5</a><i> (1460) </i></li>
<li>
<a href="#">VR</a><i> (1450) </i></li>
<li>
<a href="#">小程序</a><i> (1780) </i></li>
<li>
<a href="#">演讲</a><i> (930) </i></li>
<li>
<a href="#">PPT</a><i> (3450) </i></li>
<li>
<a href="#">Word</a><i> (980) </i></li>
<li>
<a href="#">其他</a><i> (3230) </i></li>
</ul>
<div id="btn">
<a href="#">简化</a>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#head").click(function(){
if($("#content").css("display")=="block"){
$("#content").css("display","none");
}else{
$("#content").css("display","block");
}
})
$("#btn a").click(function(){
if($(this).html()=="简化"){
$(this).html("更多");
$("#content ul li:gt(5):not(:last)").css("display","none"); //排除前六个，选择后面的元素。
}else{
$(this).html("简化");
$("#content ul li:gt(5):not(:last)").css("display","block");
}
})
})
</script>
标签的css属性 ，一个参数取值，两个参数赋值。display 的显示block
与 隐藏none
标签的html属性，一个参数赋值。
:gt() 选择器选取 index 值大于指定数字的元素。index 值从 0 开始。
$("ul li:eq(3)") 列表中的第四个元素（index 值从 0 开始）
$("ul li:lt(3)") 列举 index 小于 3 的元素
：not() -----》过滤。不包含某个
:last ---》最后一个
$("#content ul li:gt(5):not(:last)")：id为content儿子ul的儿子li
$("div > p") <div> 元素的直接子元素的所有 <p> 元素
#content li {
display: none
}
#content li.contentFocus { //id为content下面的li 下面的contentFocus的class设置样式。
display: block
}
<script type="text/javascript">
$(function() {
$("#tab li").each(function(i,obj){ //i为遍历索引
$(this).click(function(){
$("#tab li").removeClass("tabFocus");
$(this).addClass("tabFocus");
$("#content li").removeClass("contentFocus");
$("#content li:eq("+i+")").addClass("contentFocus");
})
})
})
</script>
$(":checked") 选择器选取所有选中的复选框或单选按钮
$(":checkbox") 选择所有 type="checkbox" 的元素
<script type="text/javascript">
$(function(){
$("#chkAll").click(function(){
$(":checkbox:not('#chkAll')").prop("checked",$("#chkAll").prop("checked"));
})
var arr=$(":checkbox:not('#chkAll')"); //不包含最后一个的所有checkbox
arr.each(function(){
$(this).click(function(){
var length=$(":checked:not('#chkAll')").length;
$("#chkAll").prop("checked",length==arr.length);
})
})
$("#btnDel").click(function(){
$(":checked:not('#chkAll')").parent().parent().remove();
})
})
</script>
分三步：
1，元素.prop(checked,true/false).比attr("checked","checked")要简便，
2,checkbox个数 checked个数 比较返回的true/false
3,选中元素的父元素，父元素.remove();移除元素。
<head>
<script src="jquery-1.12.2.min.js"></script>
</head>
CDN:content delivery network 内容分发网络
户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
百度 CDN
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
$(function)表示页面DOM加载完后执行该函数。比onload执行要早。
$(function(){
alert("欢迎使用jQuery1");
})
jquery选择器：
元素选择器
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
ID选择器
$("#test").hide();
类选择器 class选择器
$(".test").hide();
jquery事件
$("p").click(function(){
$(this).hide();
});
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
获得焦点事件
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
失去焦点事件
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
Jquery DOM操作
捕获
$("#btn1").click(function(){
alert($("#test").text()); //文本
});
$("#btn2").click(function(){
alert( $("#test").html()); //内容
});
$("#btn1").click(function(){
alert( $("#test").val()); //表单字段值
});
$("button").click(function(){
alert($("#a1").attr("href")); //获取href属性
});
设置
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Hello world!");
});
$("button").click(function(){
$("#font1").attr("color","red");
});
//在P元素外添加。
<body>
<p>iloveu</p>
<script type="text/javascript">
$("p").after("like you."); //P标签外添加区别于append（在元素内添加）
</script>
</body>
删除
$("#div1").remove();
$("#div1").empty();
CSS类
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
CSS方法
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
jquery遍历
$(document).ready(function(){
$("span").parent().css("height","100");
});
$(document).ready(function(){
$("span").parents();
});
$(document).ready(function(){
$("div").children();
});
$(document).ready(function(){
$("div").children("p.a");
});
$(document).ready(function(){
$("div p").first(); //div 元素内部的第一个 p 元素
});
$(document).ready(function(){
$("p").eq(1); //第二个p 元素（索引号 1）
});
$(document).ready(function(){
$("p").filter(".url"); //类名 "url" 的所有p 元素
});
$(document).ready(function(){
$("p").not(".url"); //不带有类名 "url" 的所有p元素
});
层次选择器
<div id="parent">
<div id="child1">div子标签1
<div id="child1_1">div孙标签1_1</div>
<p>段落子标签</p>
</div>
<div id="child2">div子标签2</div>
<div id="child3">div子标签3</div>
</div>
$(function(){
//$("#parent div").css("display","block");
//$("#parent>div").css("display","block");
//$("#child1+div").css("display","block");
$("#child1~div").css("display","block");
})
id儿子span的儿子的img元素的src属性设置为close.gif
$("#id>span>img").attr("src","../img/close.gif");
2.层次选择器
$("#id>.classname ") //子元素选择器
$("#id .classname ") //后代元素选择器
$("#id + .classname ") //紧邻下一个元素选择器
$("#id ~ .classname ") //兄弟元素选择器
3.过滤选择器(重点)
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)") //下标大于 2 的li
$("li:lt(2)") //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
3.2内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(selector)") //含有选择器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
3.3可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
3.4属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
$("div[id$='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
3.5状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
4.表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
$(document).ready(function(){
$("h2").siblings(); //所有同胞元素
});
$(document).ready(function(){
$("h2").siblings("p");// 同胞元素是p的
});
$(document).ready(function(){
$("h2").next(); //同胞中 下一个
});
$(document).ready(function(){
$("h2").nextAll(); //所有同胞
});
$(document).ready(function(){
$("h2").nextUntil("h6"); //h2 与 h6 元素之间的所有同胞元素
});
$(document).ready(function(){
$("h2").prev(); //上一个同胞？
});
$("li").each(function(){ //选中每一个li标签。
alert($(this).text())
});
4663
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
