jQuery的导入
1.本地导入
<script src="jQuery.js"></script> -->
2.在线导入
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
jQuery的第一个程序
原生的延迟加载
window.onload = function(){}
jQuery的延迟加载
$是jQuery对象的简写,jQuery对象是该框架的核心对象
延迟加载的简写形式
$(function(){
console.log("heihei");
});
完全体
$(document).ready(function(){});
注意事项:
* $(document).ready(function(){})和window.onload 的区别
* ready表示文档已加载完成（不包含图片等非文字媒体文件）
* onload是指页面包含图片在内的所有元素都加载完成
* $(document).ready(function(){})要比window.onload先执行
-------------------------
jQueryDom和原生Dom的相互转换
原生dom转jQueryDom
let oTest = document.getElementById("test");
console.log($(oTest).html());
jQueryDom转原生Dom
let oTest = $("#test").get(0);
console.log(oTest.innerHTML);
let oTest = $("div")[1];
console.log(oTest.innerHTML);
通过jQeury方法获得的对象，无论单个还是批量，都存在包装集(包装集类似于数组)中
基本选择器
基本选择器
1.id选择器
$("#box1").css({
"backgroundColor":"red",
"fontSize":36
});
2.类选择器
$(".box").css({
"backgroundColor":"yellow",
"fontSize":36
});
3.标签
$("p").css({
"backgroundColor":"blue"
});
4.组合选择器
$("span,strong").css({
"backgroundColor":"green"
});
5.通用选择器
$("*").css({
"backgroundColor":"green"
});
层级选择器
1.后代选择器 （空格）
$("body div").css({
"backgroundColor":"red"
});
2.子代选择器 >
$("body>div").css({
"backgroundColor":"yellow"
});
3.兄弟 ~
$("#box2~div").css({
"backgroundColor":"yellow"
});
4.相邻 +
$("#box2+div").css({
"backgroundColor":"yellow"
});
伪类选择器
1.获取偶数行 even获取欧属行的元素
$("div:even").css({
"backgroundColor":"red"
});
2.odd 奇数行
$("div:odd").css({
"backgroundColor":"yellow"
});
3.eq(索引) 获取包装集索引对象的jQueryDom
$("div:eq(2)").css({
"backgroundColor":"blue"
});
//let n = 2;
// $("div:eq("+n+")").css({
// "backgroundColor":"blue"
// });
$("div").eq(n).css({
"backgroundColor":"blue"
});
4. first
$("div:first").css({
"backgroundColor":"green"
});
5. last
$("div:last").css({
"backgroundColor":"orange"
});
6. not(目标元素) 除了该元素
$("div:not(#box2)").css({
"backgroundColor":"hotpink"
});
7. lt 小于
$("div:lt(2)").css({
"backgroundColor":"skyblue"
});
8. gt 大于
$("div:gt(2)").css({
"backgroundColor":"gold"
});
属性选择器
1.通过属性名选择元素
$("div[class]").css({
"backgroundColor":"red"
});
2.通过属性值
$("div[class=test]").css({
"backgroundColor":"yellow"
});
3. 通过组合属性名
$("div[class][id]").css({
"backgroundColor":"blue"
});
$("input[type=text]").css({
"backgroundColor":"green"
});
内容选择器
1.获取包含指定内容的元素
contains(目标字符串)
$("div:contains('hello world')").css({
"backgroundColor":"red"
});
2.获取包含指定元素的标签
has
$("div:has(span)").css({
"backgroundColor":"yellow"
});
3.empty
$("div:empty").css({
"backgroundColor":"blue"
});
可见性选择器
改变不可见元素的样式
$("tr:hidden").css("background","green");
改变可见元素的样式
$("tr:visible").css("background","red");
jQuery遍历
1.兄弟间的遍历
next 下一个
$("div").eq(2).next().css({
"backgroundColor":"red"
});
nextAll 下一堆
$("div").eq(0).nextAll().css({
"backgroundColor":"yellow"
});
prev 上一个
$("div").eq(2).prev().css({
"backgroundColor":"blue"
});
prevAll 上一堆
$("div").eq(2).prevAll().css({
"backgroundColor":"green"
});
siblings([标签])
$("div").eq(2).siblings().css({
"backgroundColor":"green"
});
$("div").eq(2).siblings().css({
"backgroundColor":"green"
});
2.父找子
find(后代元素)
$("body").find("ul").css({
"backgroundColor":"green"
});
children([子元素])
$("body").children().css({
"backgroundColor":"green"
});
3.子找父
parent 找父元素
$("p").eq(2).parent().css({
"backgroundColor":"yellow"
});
parents 找爹，爷爷，祖宗
$("p").eq(2).parents().css({
"backgroundColor":"yellow"
});
文本
innerHTML == html
无参为读
console.log($("div").html());
有参为写
$("div").html(666);
$("ul").html("<li>111</li>");
// let str = "<li>111</li>";
// str += "<li>222</li>";
// $("ul").html(str);
value == val
读
console.log($("input[type=text]").val());
写
$("input[type=text]").val("嘿嘿嘿");
事件
$("div").click("这位置可以传参数给回调函数",function(evt){
console.log(evt.data);
});
简单动画
1.基础动画
$("button").eq(0).click(function(){
$("div").hide(2000,function(){
console.log("七夕没礼物!");
});
});
$("button").eq(1).click(function(){
$("div").show(2000,function(){
console.log("这是真的!");
});
});
$("button").eq(2).click(function(){
$("div").toggle(2000,arguments.callee);
});
2.slideUp，slideDown，slideToggle
$("button").eq(0).click(function(){
$("div").slideUp(2000,function(){
console.log("七夕没礼物!");
});
});
$("button").eq(1).click(function(){
$("div").slideDown(2000,function(){
console.log("这是真的!");
});
});
$("button").eq(2).click(function(){
$("div").slideToggle(2000,arguments.callee);
});
3.淡入淡出：常用 fadeIn fadeOut fadeToggle
$("button").eq(0).click(function(){
$("div").fadeOut(2000,function(){
console.log("七夕没礼物!");
});
});
$("button").eq(1).click(function(){
$("div").fadeIn(2000,function(){
console.log("这是真的!");
});
});
$("button").eq(2).click(function(){
$("div").fadeToggle(2000,arguments.callee);
});
