1.jQuery引入1
以更少的代码，实现更多的功能（Write less,do more）
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//普通的脚本弹出 1
alert("普通-你好JS1");
//页面加载事件绑定匿名函数 2 window.onload只能执行一次
window.onload = function(){
alert("你好JS-1");
}
//jQuery文档加载 3
$(document).ready(function(){
alert("你好jQuery-1");
});
//页面加载事件绑定匿名函数 4
window.onload = function(){
alert("你好JS-2");
};
//jQuery文档加载 5
$(document).ready(function(){
alert("你好jQuery-2");
});
//普通的脚本弹出 6
alert("普通-你好JS2");
//彭：16435 --- 3.3.1
//彭：16354 --- 1.11.0
</script>
//文档加载完毕执行获取元素，弹出元素值
//$(document).ready(function(){
//})
//简写
//$(function(){
//})
2.jQuery引入2 toggle show hide
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#info").hide("slow");//hide隐藏
});
$("#btn2").click(function(){
$("#info").show("fast");//show显示
})
$("#btn3").click(function(){
$("#info").toggle("normal");//toggle在隐藏显示中进行切换
})
});
</script>
<body>
<div id="info">
<img src="images/f3.jpg"/>
</div>
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="展示">
<input type="button" id="btn3" value="切换">
</body>
3.jQuery基础选择器
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$("*").css("font-size","25");//通配符选择器
$("#d1").css("background-color","brown");//id选择器
$("#d2").css("background-color","#FAF0E6");//id选择器
$("input").css("color","red");//元素选择器
$(".test").css("font-family","隶书");//类选择器
$("#d1,.test").css("color","LightSalmon");//合并选择器
$("#d1,.test").css("background-color","green");//合并选择器
})
</script>
<body>
<div id="d1">我是熊大</div>
<div id="d2">我是熊二</div>
<div id="d3" class="test">我是熊三</div>
<input type="button" value="测试1">
<input type="button" value="测试2" class="test">
<ul class="test">
<li>组团去宝石花吃饭啦</li>
<li>组团去宝石花吃饭啦</li>
<li>组团去宝石花吃饭啦</li>
</ul>
4.jQuery过滤选择器
选择器 功能 返回值
first()或:first 获取第一个元素 单个元素
last()或:last 获取最后一个元素 单个元素
:not(selector) 获取除给定选择器之外的所有元素 元素集合，如：如：$("li:not(.title)")获取class不是title的li元素
:even 获取索引值为偶数的元素，索引号从0开始 元素集合
:odd 获取索引值为奇数的元素，索引号从0开始 元素集合
:eq(index) 获取索引值等于index的元素，索引号从0开始 单个元素，如：$("li:eq(1)")获取索引等于1的<li>元素
:gt(index) 获取索引值大于index的元素，索引号从0开始 元素集合，如：$("li:gt(1)")获取索引大于但不包括1的<li>元素
:lt(index) 获取索引值小于index的元素，索引号从0开始 元素集合，如：$("li:lt(1)")获取索引小于但不包括1的<li>元素
:header 获取所有标题元素，如h1~h6 元素集合
:animated 获取正在执行动画效果的元素 元素集合
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$("#header").click(function(){
$(":header").css("font-size","60");//获取所有标题元素，如h1~h6
$(":header").css("color","red");
})
$("#first").click(function(){
$("li:first").css("font-size","30");//选中系列中的第一个元素
$("li:first").css("color","green");
})
$("#last").click(function(){
$("li:last").css("font-size","35");//选中系列中的最后一个元素
$("li:last").css("color","blue");
})
$("#selector").click(function(){
$("li:not(.list)").css("font-size","40");//获取选择器之外的所有元素
$("li:not(.list)").css("color","pink");
})
$("#even").click(function(){
$("li:even").css("font-size","35");//选中系列中的偶数index元素
$("li:even").css("color","yellow");
$("li:even").css("font-family","隶书");
});
$("#odd").click(function(){
$("li:odd").css("font-size","35");//选中系列中的奇数index元素
$("li:odd").css("color","purple");
$("li:odd").css("font-family","隶书");
})
});
</script>
<body>
<h1>冰雪灾害天气很头疼</h1>
<ul>
<li>吃饭很不方便</li>
<li class="list">走路打滑</li>
<li class="list">水管容易冻住</li>
<li class="list">冷就一个字</li>
</ul>
<input type="button" value="header" id="header">
<input type="button" value="first" id="first">
<input type="button" value="last" id="last">
<input type="button" value="not(selector)" id="selector">
<input type="button" value="even" id="even">
<input type="button" value="odd" id="odd">
</body>
5.jQuery内容过滤选择器
选择器 功能 返回值
:contains(text) 获取含有文本内容为text的元素 元素集合
:empty 获取不包含后代元素或者文本的空元素 元素集合
:has(selector) 获取含有后代元素为selector的元素 元素集合
:parent 获取含有后代元素或者文本的非空元素 元素集合
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
//选中DIV中包涵文字ABC
$("#btnContain").click(function(){
$("div:contains('ABC')").css("width","200");
$("div:contains('ABC')").css("height","200");
$("div:contains('ABC')").css("background-color","red");
})
//获取内容为空元素
$("#btnEmpty").click(function(){
$("div:empty").css("width","200");
$("div:empty").css("height","200");
$("div:empty").css("background-color","black");
})
//获取内容为某个选择器的元素
$("#btnHas").click(function(){
$("div:has(span)").css("width","200");
$("div:has(span)").css("height","200");
$("div:has(span)").css("background-color","blue");
})
//获取内容为非空的元素
$("#btnParent").click(function(){
$("div:parent").css("width","200");
$("div:parent").css("height","200");
$("div:parent").css("background-color","purple");
})
});
</script>
<body>
<div>ABCD</div>
<div></div>
<div><span>span</span></div>
<p>
<input type="button" value="内容包含A的元素" id="btnContain" />
<input type="button" value="空元素" id="btnEmpty" />
<input type="button" value="含有span的元素" id="btnHas" />
<input type="button" value="非空元素" id="btnParent" />
</p>
</body>
6.jQuery属性选择器 prop
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//在jQuery1.6之后引入了prop来全选，反选设置
$(document).ready(function(){
//属性选择器
$("input[id='selectall']").click(function(){
if($("input[id='selectall']:checked").length==1){ $("input[name='songs']").prop("checked",true);
}else{ $("input[name='songs']").prop("checked",false);
}
})
//表单选择器
$("input:text").val("hello");
$("input:button").val("提交");
});
</script>
<body>
<input type="checkbox" id="selectall" value="all">全选<br/>
<input type="checkbox" name="songs"/>忐忑
<input type="checkbox" name="songs"/>甩葱歌
<input type="checkbox" name="songs"/>我的滑板鞋
<input type="checkbox" name="songs"/>万物生
<input type="checkbox" name="songs"/>渡情
<input type="text"/>
<input type="button"/>
</body>
7.DOM操作
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
//使用JavaScript获取DOM对象
var name1 = document.getElementById("name");//DOM对象
var name2 = $("#name");//jQuery对象
//alert(name1.value);//js传统获取值的方式.value
//alert(name2.val());//jQ获取对象值得方法.val()
//将jQuery对象转换为DOM对象:get()
alert(name2.get(0).value);
//将DOM对象转换为jQuery对象:$()
alert($(name1).val());
});
</script>
<body>
<input type="text" id="name" value="没吃早饭！">
</body>
8.样式操作addClass removeClass
操作元素样式的方法包含css()、addClass()、removeClass()和toggleClass()。
<style>
.car{
font-size:30px;
font-weight:bold;
color:blue;
font-family:"微软雅黑";
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//addClass为选中元素添加类样式（前提是写一个类的CSS渲染）
//removeClass为选中元素移除类样式
$(document).ready(function(){
$("#add").click(function(){
$("p").addClass("car");
})
$("#del").click(function(){
$("p").removeClass("car");
})
$("#toggle").click(function(){
$("p").toggleClass("car");
})
})
</script>
<body>
<p>贾跃亭美国造车全调查：名下已几无资产</p>
<p>一篇文章《乐视会像德隆一样大崩盘吗？》</p>
<p>贾跃亭辞去了乐视网所有职务，奔赴美国</p>
<input type="button" id="add" value="给样式"/>
<input type="button" id="del" value="去样式"/>
<input type="button" id="toggle" value="切换样式"/>
</body>
------
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//css函数用于修饰样式---css("属性","属性值")
$(document).ready(function(){
$("p").click(function(){
//this.style.fontSize = "50";
//this.style.color = "red";
$(this).css("fontSize","50");
$(this).css("color","red");
})
$("h3").click(function(){
$(this).css({"fontSize":"60","color":"green","font-family":"隶书"});
})
})
</script>
<body>
<p>戴尔恐被反向收购或为科技界史上最大规模交易</p>
<h3>上海迪士尼天价插队费的消息在网络上热传</h3>
</body>
9.元素内容 each()函数
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//取货元中的文本值可以使用html(),text()
//前提必须是jQuery对象才能使用
//html(),text()无参数表示获取文本值
//html(值),text(值)有参数则表示赋值
//html()赋值会解析HTML标签
//text()赋值不会解析HTML标签
//each()函数表示迭代某个数据集，必须通过匿名函数来进行得带
//例如：$("li.price").each(function(){});
var total=0;
$(document).ready(function(){
$("li.price").each(function(){
total+=parseInt($(this).html().substring(1));
})
$("span").html("<b><i>$"+total+"</b></i>");
//$("span").text("<b><i>$"+total+"</b></i>")
})
</script>
<body>
<ul>
<li >单价</li>
<li class="price">$999</li>
<li class="price">$888</li>
<li class="price">$777</li>
<li class="price">$666</li>
</ul>
总价:<span><span>
<!--总价格使用加粗，斜体显示-->
</body>
10.value属性
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//val()函数给有value属性的元素赋值，取值
//val(参数)赋值---val()取值
$(document).ready(function(){
$("#set").click(function(){
$("input[type='text']").val("宝石花太难吃了");
})
$("#get").click(function(){
var data = $("input[type='text']").val();
alert(data);
})
})
</script>
<body>
<input type="text" value="组团刷宝石花">
<input type="button" id="set" value="赋值">
<input type="button" id="get" value="取值">
</body>
11.attr设置元素的属性
（1）获取元素的属性
（2）设置元素的属性
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//attr用来设置元素的属性的值
//例如：$("img").attr("src","images/pic3.jpg");
$(document).ready(function(){
var beauties = new Array();
beauties[0] = "images/pic1.jpg";
beauties[1] = "images/pic2.jpg";
beauties[2] = "images/pic3.jpg";
beauties[3] = "images/pic4.jpg";
beauties[4] = "images/pic5.jpg";
var i = Math.floor(Math.random()*5);
//表示0到5之间的随机数，不包括5
$("img").attr("src",beauties[i]);
})
</script>
<body>
<img src="images/pic1.jpg">
</body>
12.jQuery节点的操作 append…
语法格式 功能描述
append(content) $(A).append(B)表示将B追加到A中，如：$("ul").append($li);
appendTo(content) $(A).appendTo(B)表示把A追加到B中，如：$li.appendTo("ul")
prepend(content) $(A).prepend(B)表示将B前置插入到A中，如：$("ul").prepend($li)
prependTo(content) $(A).prependTo(B)表示将A前置插入到B中，如：$li.prependTo("ul")
<script src="js/jquery-1.11.0.min.js"></script>
<script>
//$(html标签名)；用来创建元素节点
$(document).ready(function(){
$("#song").blur(function(){
var test = $("<a href='https://www.google.com'>谷歌</a>");//使用$()创建节点
var song = $("<li>"+$(this).val()+"</li>");
//$("ul").append(song);//在ul歌曲列表中追加（append）一首歌曲
//song.appendTo("ul");//将歌曲主动加到（appendTo）歌曲列表中(ul)
//$("ul").prepend(song);//在ul歌曲列表中前置插入（prepend）一首歌曲
//song.prependTo("ul");//将歌曲主动前置插入到（prependTo）歌曲列表中(ul)
})
//替换节点:
//将新元素替换（replaceWith）选中的元素
//replaceAll反向替换
$("#song1").blur(function(){
var song1 = $("<li>"+$(this).val()+"</li>");
//$("li:first").replaceWith(song1);
song1.replaceAll("li:even");
})
})
</script>
<body>
<ul>
<li>想起——韩雪</li>
<li>没那么简单——黄小琥</li>
<li>指望——郁可唯</li>
<li>我的滑板鞋——约瑟翰庞麦郎</li>
</ul>
追加元素：<input type="text" id="song">
替换元素：<input type="text" id="song1">
</body>
13.jQuery事件
<style>
*{
margin:0px;
padding:0px;
}
div{
width:100%;
height:50px;
background-color:#999999;
text-align:center;
}
ul{
list-style:none;
}
li{
float:left;
}
a{
display:block;
text-decoration:none;
line-height:50px;
font-size:16px;
color:white;
width:80px;
font-weight:bold;
}
.back{
background-color:#666;
}
</style>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
//$("#head a").mouseover(function(){//鼠标移入mouseover
//$(this).addClass("back");
//})
//$("#head a").mouseout(function(){//鼠标移除mouseout
//$(this).removeClass("back");
//})
//使用bind针对某个元素管理多个事件
//语法如下：
//$("元素").bind({"事件1":function(){},"事件2":function(){}});
//$("#head a").bind({"mouseover":function(){
//$(this).addClass("back");
//},"mouseout":function(){
//$(this).removeClass("back");
//}})
//使用hover()来时实现如上取消
//$("元素").hover(function(){},function(){})
$("#head a").hover(function(){
$(this).addClass("back");
},function(){
$(this).removeClass("back");
})
})
</script>
<body>
<div id="head">
<ul>
<li><a href="index.html">首页</li>
<li><a href="#">美食</a></li>
<li><a href="#">旅游</a></li>
<li><a href="#">酒店</a></li>
<li><a href="#">电影</a></li>
<li><a href="#">KTV</a></li>
<li><a href="#">时尚</a></li>
<li><a href="#">生活服务</a></li>
</ul>
</div>
</body>
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
