JQuery 提供的函数 JQuery选择器过滤器

最新推荐文章于 2023-03-23 09:18:28 发布

原创最新推荐文章于 2023-03-23 09:18:28 发布 · 489 阅读

CC 4.0 BY-SA版权

文章标签：

#jquery #function #div #input #button #header

$(document).ready(function () { alert("加载完毕！"); });
一般用匿名函数
和onload类似，但是onload只能注册一次。
onload创建完加载完才能显示
而ready创建完就可以

JQuery提供的函数
1.$.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组
var arr = [3, 5, 8];
var arr2 = $.map(arr, function (item) { return item * 2; });
alert(arr2);
2.$.each(array,fn)只是处理，没有返回值
var dict = { "tom": 20, "jerry": 50, "jim": 30 };
$.each(dict, function (key, value) { alert(key + "的年龄是" + value); });
$.each(dict, function () { alert(this); }); //里边的元素
$.each(dict, function (item) { alert(item); });//里边的key
JQuery对象和DOM对象
$('#div1').html等价于document.getElementById("div1").innerHTML
$(function () { alert($("#div1").html()); });
通过DOM取得元素，用JQuery实现方法
$(function () { var div1 = document.getElementById("div1"); $(div1).html("<a href='http://vip.book.sina.com.cn/book/index_196513.html'>我的作品</a>") })
Dom对象转换为JQuery对象
var div1_2 = $(div1)[0]; alert(div1_2.innerHTML);
JQuery修改样式
$("#div1").css("background","red")修改样式
$("#div1").css("background")获得样式
$("#un").val("abc") 修改value
$("#un").val() 获得value
类似的有innerText方法和innerHTML 可以用text(),html()
例子：
$(function () { $("#div1").css("background", "red") });
$(function () { alert($("#div1").css("background")); });
$(function () { $("#txt1").val(new Date()); });
$(function () { alert($("txt1").val()); });
$(function () { $("#div1").html("a<font color='red'>b</font>c"); });
$(function () { alert($("#div1").html()); });
$(function () { alert($("#div1").text()); });
JQuery选择器
1.根据Id取元素
$(#div1).html("<font color=red>hello</font>")
2.$("tagname")
$(function () {
$("p").click(function () { alert("我是p"); })//隐式迭代，给所有选择出来的元素增加click事件
});
3.css选择器，同时选择拥有样式的多个元素
给所有拥有test样式的元素增加click事件 $("test");
4.多条件选择器：$("p,div,span.menuitem")同时选择p标签，div标签和拥有menuitem样式的span标签元素
注意：选择器表达式中的空格不能多不能少，易错！
5.层次选择器
（1）$("div li")获得div下的所有li元素
（2）$("div > li")获得div下的直接li子元素
（3）$(".menuitem+div")获取样式名之后的
（4）$(".menuitem~div")
节点遍历
next()方法用于遍历后第一个同辈元素
nextAll()用于获取
siblings
$(function () {
//$("p").click(function () { alert("我是p"); }) //这时候dom元素还没有解析出来呢
//$(function () { $("p").click(function () { alert("我是p"); }) }); //隐式迭代，给所有选择出来的元素增加click事件
//$(function () { $(".warnning").click(function () { alert("不要烦我"); }) });
//$("div").click(function () { alert($(this).next().text()); });
//$("div").click(function () { alert($(this).next("p").text()); });
//$("div").click(function () { $.each($(this).nextAll("div"), function () { $(this).css("background", "red") }); });//会自动迭代
//$("div").click(function () { $(this).nextAll("div").css("background", "red"); });
//$("div").click(function () { $(this).css("background", "red"); $(this).siblings("div").css("background", "white"); });
//$("div").click(function () { $(this).css("background", "red").siblings("div").css("background", "white"); });

//$("#rating td").html("<img src='123.jpg' />").mouseover(function () { $("#rating td").html("<img src='1234.jpg' />"); $("this").nextAll().html("<img src='1234.jpg' />"); });
//$("#rating td").html("☆")
//.mouseover(function () { $("#rating td").html("★"); $(this).nextAll().html("☆"); });
$("#rating td").html("☆")
.mouseover(function () { $(this).html("★"); $(this).siblings().html("★"); $(this).nextAll().html("☆"); });
$("#rating td").html("☆").mouseout(function () { $("#rating td").html("☆"); });
});
链式编程

基本过滤选择器
:first选取第一个元素，$(#div:first)
:last选取最后一个
:选取不满足“选择器”条件的元素 $("input:not(.myclass)")
:even :odd;选取索引是奇数偶数的元素
:eq :gt :lt 等于大于小玉
$(":header") 选取所有的h1到h6的元素
<script type="text/javascript">
$(function () {
$("#table1 tr:first").css("fontSize", "30");
$("#table1 tr:last").css("color", "yellow");
$("#table1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)除gt(0)之后的新列开始
$("#table1 tr:gt(0):even").css("background", "red");
相对定位
<script src="../JQ/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#div1").click(function () {
$("ul", $(this).css("background", "red"));
});
});
</script>
</head>
<body>
<div>
<div id="div1">
<ul>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
</ul>
</div>
<div>
<ul>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
<li>sdfsdfsdf</li>
</ul>
</div>
</div>
})
</script>
</head>
<body>
<table id="table1">
<tr><td>姓名</td><td>成绩</td></tr>
<tr><td>smile</td><td>120</td></tr>
<tr><td>lukcy</td><td>100</td></tr>
<tr><td>laughing</td><td>99</td></tr>
<tr><td>slowly</td><td>95</td></tr>
<tr><td>平均分</td><td>120</td></tr>
</table>
过滤器
属性过滤器
$("div[id]")选取有id属性的div
$("div[title=test]")
$("div[title!=test]")
表单对象选择器（过滤器）
$("#form1:enabled")
$("#form1:disabled")
$("input:checked") radio checkbox

$("select:selected")下拉列表所有选中的