1)简单介绍
测试:
在 JQuery中,$ 是JQuery的别名 $()等效于 JQuery () 选择函数
JQuery $(document).ready() 表示匹配文档中的document 节点,然后为该节点绑定ready时间处理函数。
类似于 Js中的window.onload= function(){};(不过JQuery的ready事件要优于onload事件被激活)
简化为$()
1.把JQuery对象转换成DOM对象
JQuery对象不能直接使用DOM对象
相互转换例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery-3.3.1.js" ></script>
<!--<script type="text/javascript">
$(function(){
var $li =$("li");
var li=$li[4];//可以将他转换成 $li.get(4);
alert(li.innerHTML);
})
</script>-->
</head>
<body>
<ul>
<li>我去炸学校</li>
<li>老师不知道</li>
<li>线一拉</li>
<li>我就跑</li>
<li>回头看见学校不见了</li>
</ul>
<script type="text/javascript">
var li=document.getElementsByTagName("li");
var $li=$(li[0]);//花钱好办事
alert($li.html());
</script>
</body>
</html>
(2选择器) 基本同CSS
(3)过滤器
参考 demo:
<p><span class="red">我去炸学校</span></p>
<p><span>老师不</span><span>知道</span></p>
<p>线一拉</p><p>我就跑</p><p>回头看见学校没见了</p>
1. 下标过滤 $("div"). eq(0) 选择第几个标签元素
2. 类过滤 $("div").hasClass("") 选择类名标签
3.表达式过滤 $("div"). filter(".red")//表示选择标签对应的哪个类(可以添加多个 类名) $("div"). filter(".red,.blue")
其中可以通过 false 和 true 来表示
$(function(){
$("p").filter(function(index){ return $("span",this).length==2; });
}) 上 诉代码 表示 选择 p标签JQuery对象,过滤条件为包含了俩个span标签
这个$("span",this)可以看出 $() 默认是从document中寻找,后面加入某个 jQuery对象表示从该对象中寻找
4. has()是一种 轻便的过滤方法,用法没有filter复杂
$(function(){
$("p").has("span.red").css("background-color","red");
})
选择p标签对象has()过滤条件有span标签,标签类名为 red
5.判断 is() 不直接过滤元素 作为条件进行删改
6.映射 map(callback) 方法能够吧JQuery对象 中每一个元素映射到一个新的jQuery对象中,用法如下
callback表示回调参数 ,将在 每个元素上调用,根据每次回调函数的返回值新建一个JQuery对象。
返回的JQuery对象可以包含元素,也可以是其他值,主要根据回调函数返回值确定。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map映射过滤</title>
<script type="text/javascript" src="../jquery-3.3.1.js" ></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
$("p").html("<h2>提交信息</h2>").append($("input").map(function(){
return $(this).val();
}).get().join("、"));
return false;
})
})
</script>
</head>
<body>
<form>
用户名:<input name="userName" type="text" />
密 码:<input name="password" type="password">
<button id="submit">提交</button>
</form>
<p></p>
</body>
</html>
分析:$("input")找到input标签对象数组集合 通过 map()方法把所有的 匹配的input元素的value属性值映射为另一个新JQuery
对象,然后通过get()方法得到这些 JQuery对象的数组,join(“丶”)方法将数组连接成字符串。 最后通过了 JQuery的append ()方法加入字符串。
7.清除
not()方法能够 从jQuery对象中删除符合条件的元素 ,并返回清除后的JQuery对象。
8.截取
slice(start,[end]) slice(2,3)截取第三个和第四个对象
查找:
9.
向下查找
(1) $("#menu").children().css("",""); childred(".home")
children()方法中没有参数表示查找所有的子元素 ,含参数则根据参数过滤 (只能查找子元素)
(2)contents()不仅仅能获得子元素 ,还能获得文本几点和注释节点
(3)find()方法能够查找又有后代元素(孙。。。)
向上查找
(4)parents(expr)方法能够找到所有匹配的元素的祖先元素 ,但是如果存在相同 重复的祖先元素,仅仅记录一次
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../jquery-3.3.1.js" ></script>
<script type="text/javascript">
$(function(){
$("img").parents().css({"border":"solid 1px red","margin":"10px"});
alert($("img").parents().length);
})
</script>
</head>
<body>
<div>
<span><img src="../img/1sch5r3r.jpg"/></span>
<img src="../img/1sch5r3r.jpg" />
</div>
</body>
</html>
(5)parentsUtil(seletor) 查找对应的参数
(6)offsetParent()该方法在能查找当前元素最近定位包含框 (没有参数)
(7) closet(expr,[context])该方法可以查找指定的父元素 。他主要为时间的处理而设计,对处理时间委派非常有用。
(8)prev([expr])向前查找最近的元素同辈元素 (9)pervAll([expr])查找前面所有的同辈元素
(10)next([expr])==>nextSibling()属性功能相同(11) nextAll([expr])查找后面所有的同辈元素