1.JQurey 基本应用
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function onChoose() {
var username = $("#name").val();
alert(username);
}
function onChooseA(obj) {
//js原生态对象。
//jq对象$(obj),是经过包装的
alert($(obj).val());
}
function onChooseB() {
var div1 = $("#div1");
alert(div1.text());
}
//标签选择器
function onChooseC() {
var div= $("div");
//遍历所有某个标签的值
div.each(function(i) {
alert($(this).text());
});
}
//遍历所有同id标签
function onChooseD() {
var classs=$("#div1");
classs.each(function(i) {
alert("第"+ ++i +"个"+$(this).text());
});
}
//类型选择器
function onChooseE() {
//嵌套标签,上级调用下级class注意打空格
//多个div用逗号隔开
var span=$("div,div .a");
alert($(span).text());
}
function onChooseF() {
//空格找其下级所有(子孙)
var span=$("p input");
span.each(function(i) {
alert("第"+ ++i +"个"+$(this).val());
});
}
function onChooseG() {
//>只找下级(儿子)
var span=$("p>input");
span.each(function(i) {
alert("第"+ ++i +"个"+$(this).val());
});
}
function onChooseH() {
//+找同级第一个(兄弟)
var span=$("span + input");
span.each(function(i) {
alert("第"+ ++i +"个"+$(this).val());
});
}
function onChooseI() {
//+找同级所有(兄弟)
var span=$("span ~ input");
span.each(function(i) {
alert("第"+ ++i +"个"+$(this).val());
});
}
function onChooseJ() {
$("#first").fadeIn();
$("#two").fadeIn("slow");
$("#three").fadeIn("3000");
}
//筛选器
function onChooseK() {
//查找第一个标签的值
var span=$("li:first");
alert($(span).text());
}
function onChooseL() {
//:not(:属性值) 排除。。。。。
var span=$("p>input:not(:text)");
span.each(function(i) {
alert("第"+ ++i +"个"+$(this).val());
});
}
function onChooseM() {
var span=$("li:eq(3)");
alert($(span).text());
}
</script>
</head>
<body>
<input type="button" value="试一试 " οnclick="onChoose()">
<input type="button" value="试一试 " οnclick="onChooseA(this)">
<input type="button" value="试一试 " οnclick="onChooseB()">
<input type="button" value="试一试 " οnclick="onChooseC()">
<input type="button" value="试一试 " οnclick="onChooseD()">
<input type="button" value="试一试 " οnclick="onChooseE()">
<input type="button" value="试一试 " οnclick="onChooseF()">
<input type="button" value="试一试 " οnclick="onChooseG()">
<input type="button" value="试一试 " οnclick="onChooseH()">
<input type="button" value="试一试 " οnclick="onChooseI()">
<input type="button" value="试一试 " οnclick="onChooseJ()">
<input type="button" value="试一试 " οnclick="onChooseK()">
<input type="button" value="试一试 LLL" οnclick="onChooseL()">
<input type="button" value="试一试 LLL" οnclick="onChooseM()">
<br> 用户名:
<input type="text" id="name">
<div id="div1" style="width: 100ps;height: 100px;color: green;">
谁的手机号</div>
<div id="div1" style="width: 100ps;height: 100px;color: green;">
水电费刚回家</div>
<div>
<span class="a">我可复杂了</span>
</div>
<p>
<span>
<input >
</span>
<input type="text" value="111">
<input type="checkbox" value="woman">woman
<input type="radio" value="man">man
</p>
<div id="first" style="width: 100px;height: 100px;display:none; background: blue;" ></div>
<div id="two" style="width: 100px;height: 100px;background: violet;display:none; "></div>
<div id="three" style="width: 100px;height: 100px;background: pink;display:none; "></div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
</body>