1，导入jquery包进入js中
2，我的第一个jquery，jquery的ready()方法，及简写方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个jquery</title>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//调用jquery的ready()方法,当把dom页面加载完后,调用该方法的回调函数
$(document).ready(function(){
console.log("dom页面加载完成。")
});
//onload方法只调用一次
//ready()方法可多次调用,比onload先加载
$(document).ready(init);//调用函数init
function init(){
console.log("页面dom加载完成后要初始化的内容,调用函数init");
}
//简写方法
$(function(){
console.log("jquery的简写方式")
});
</script>
</head>
<body>
<div id="show">
<h1>今日遇故知，万语千言不忍谈</h1>
</div>
</body>
</html>
?3，dom对象和jquery对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom对象和jquery对象</title>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//dao对象
console.log(document.getElementById("show"));
//dao对象输出，包括标签
console.log(document.getElementById("show").innerHTML);
//只输出内容
console.log(document.getElementById("show").innerText);
//dom对象转变为jquery对象
//$(dom对象)-->jquery
console.log($(document.getElementById("show")).html());
console.log($(document.getElementById("show")).text());
//jquery对象看作是dom对象的数组类型,存放dom对象
//jquery对象加[数组下标],变成dom对象
});
</script>
</head>
<body>
<div id="show">
<h2>一格</h2>
</div>
</body>
</html>
4，类选择器的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery选择器操作</title>
<script src="js/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//id选择器--->基本的三个选择器
//""扩起,.css写入css样式
/* $("#box").css("width","300px")
.css("hight","300px")
.css("backgroundColor","#eee");
//标签选择器,直接使用对象.多样式赋值({})
$("li").css({color:"blue",fond_size:"30px"});
//类选择器
$(".p").css({color:"red",font_weight:"宋体"});
console.log($("li").length);//获取jquery匹配元素个数
console.log($("li").size());
//div li div标签的子元素li (子孙们)
$("div li").css("color","red");
//div标签下一成li (儿子们)
$("div > li").css("color","blue");
//.p类选择器后面的后一个li元素(大弟)
$(".p+li").css("color","blue");
//类选择器后面的li元素 (弟弟们) 同级
$(".p ~ li").css("color","blue");
//选择的那个li
$(".p").css("fontSize","30px");
//.title选择器同辈的li元素（兄弟们）
// $(".title").siblings().css("color","red");
*/
/* //li元素的操作
$("li:first").css("color","red");//li的第一个
$("li").first().css("color","red");
//改变最后一个li
$("li:last").css("color","red");
//选择所有的li排除p的li
$("li:not(.p)").css("color","red"); */
//从0开始,选择所有偶数even
$("li:even").css("color","red");
//从0开始,选择所有奇数odd
$("li:odd").css("color","blue");
//eq(？)选择序号=？,从0开始
$("li:eq(4)").css("color","#eee");
//ge()序号大于？,0开始
$("li:gt(4)").css("color","red");
//lt()序号小于？,0开始
$("li:lt(4)").css("color","blue");
});
</script>
</head>
<body>
<div id="box">
<li>地方</li>
<ul>
<li class="p">选择1</li>
<li>选择2</li>
<li>选择3</li>
<li>选择4</li>
</ul>
<ul>
<li>选择1</li>
<li>选择2</li>
<li>选择3</li>
<li>选择4</li>
</ul>
<ul>
<li>选择1</li>
<li>选择2</li>
<li>选择3</li>
<li>选择4</li>
</ul>
</div>
</body>
</html>
|