选择器1：javascript跟jquery的一些比较输出：
<body>
<a href="">xxx</a>
<a href="">xxxxxx</a>
<div id="test">1111</div>
<div class="tm-test">2222</div>
<div class="tm-test">3333</div>
<div class="tm-test">4444</div>
<div class="test2">5555</div>
<input type="text" id="username" name="sex" value="ddddd">
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
<script type="text/javascript">
$(function(){
//jquery本身并不是一门语言。他就是对javascript语言的封装。
//id:唯一标识符
//格式:$() == jquery格式
/*
如果:id选择器:$("#id");class选择器:$(".className");
document.getElementById("test")//javascript
$("#test")//jquery
*/
var html = document.getElementById("test").innerHTML;
var $html = $("#test").html();
var value = document.getElementById("username").value;
//alert("用户名的值是:"+value);
//val()--->针对于form元素 text password select raido checkbox textarea
var $value = $("#username").val();
//alert($value);
//class 选择器
var length = $(".tm-test").length;
//alert("含有相同class=tm-test的div的数量是:"+length);
var value = $(".tm-test").html();
//如果获取所有相同class的值
//$(".tm-test").each(function(){
// alert($(this).html());
//});
//元素选择器
alert($("div").length);
alert($("a").length);
//获取所有的元素选择器
$("body").find("*").attr("xxx","xxxx");
//快速选择器
$("input[name=‘newsletter‘]").attr("checked",true);
});
//$(document).ready(function(){
// alert(3);
//});
</script>
</body>
2：以某字目开头的选择器
<body>
<input type="text" name="username" id="username" opid="shanchen" value="单晨">
<input type="text" name="cusername" username="zhaolong" value="K小龙">
<input type="text" name="username" kid="kid" value="KID">
<script type="text/javascript">
$(function(){
//var value = $("input[name=‘username‘][opid=‘shanchen‘]").val();
//var value = $("input[opid]").val();
//var value =$("#username").val();
//var value = $("input[name=‘username‘]").eq(0).val();
//alert(value);
//知识点：[attribute!=value] 不等于某个元素的其他元素
//var length = $("input[name!=‘cusername‘]").length;
//$("input[name!=‘cusername‘]").each(function(){
// alert($(this).val());
//});
//知识点:[attribute^=value] 以什么开头的元素
//$("input[value^=‘K‘]").each(function(){
// alert($(this).val());
//});
//知识点:[attribute$=value] 以什么开头的元素
$("input[value$=‘D‘]").each(function(){
alert($(this).val());
});
var length = $("input[name*=‘cu‘]").length;
alert(length);
});
</script>
</body>
3：选择器改变样式
<body>
<div class="tm_background"></div>
<div class="tm_background"></div>
<div class="tm_background"></div>
<div class="tm_background"></div>
<div class="tm_background"></div>
<div class="tm_background"></div>
<div class="tm_background"></div>
<div class="tm_background"></div>
<script type="text/javascript">
$(function(){
//:even:单行 :odd:双行
$(".tm_background:odd").addClass("red");
$(".tm_background:even").addClass("green");
$(".tm_background").hover(function(){
$(this).removeClass("red").removeClass("green").addClass("f1414");
},function(){
$(".tm_background").removeClass("f1414");
$(".tm_background:odd").addClass("red");
$(".tm_background:even").addClass("green");
});
});
</script>
</body>
4：选择器获取值
<body>
<select>
<option selected="selected">11</option>
<option>22</option>
</select>
<input type="radio" name="c" checked="checked" value="1"/>
<input type="radio" name="c" value="2"/>
<input type="radio" name="c" value="3"/>
<input type="checkbox" name="t" checked="checked" value="音乐"/>
<input type="checkbox" name="t" value="电影"/>
<input type="checkbox" name="t" checked="checked" value="游泳"/>
<input type="text"/>
<textarea></textarea>
<script type="text/javascript">
$(function(){
//selected:option
//checked radio checkbox
//:checked :selected :input :text :even :odd :radio :checkbox
var radioValue = $("input[type=‘radio‘][name=‘c‘]:checked").val();
alert(radioValue);
var arr = [];
$("input[type=‘checkbox‘][name=‘t‘]:checked").each(function(){
arr.push($(this).val());
})
alert(arr.toString());
//:input 匹配所有 input, textarea, select 和 button 元素
alert($(":checkbox").length);
});
</script>
</body>
时间： 2024-07-30 23:41:08