-
Jquery的优点
1 强大的选择器
2 出色的DOM封装 链式编程
3 浏览器兼容
4 动画功能
两个变量 jQuery 和 $() -
选择器
-
1基本选择器 2 特殊选择器
语法：$(选择器) 返回值是满足条件的所有元素返回一个数组 id选择器也是返回一个数组，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax</title>
<!--注意路径问题 ${pageContext.request.contextPath}/ -->
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<p>
用户名：<input type="text" id="name" onblur="a1()" value="Rudy"/>
<span id="userinfo"></span>
</p>
<p>
密码：<input type="text" id="pwd" onblur="a2()" class="pwd" value="123456" />
<span id="pwdinfo"></span>
</p>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
<script type="text/javascript">
标签选择器 console.log($("p")); //标签选择器
id选择器console.log($("#name")[0]); //id选择器
console.log($(".pwd")[0]); // class 选择器
//特殊选择器
console.log($("div:first")) //获取第一个
console.log($("div:last")) //获取最后一个个
console.log($("div:eq(3)")) //获取指定位置
console.log($("div:odd")) //获取奇数位置
console.log($("div:even")) //获取偶数位置
console.log($("div").first().next()) // 获取当前元素的下一个
console.log($("div").eq(2).nextAll()) //获取当前元素之后的所有标签
console.log($("div").eq(2).nextAll("#5")) //获取当前元素之后的指定标签
console.log($("div").prev()) //获取当前元素的上一个
console.log($("div").prevAll()) //获取当前元素的上面所有
console.log($("div").prevAll("#p")) //获取当前元素的上面指定那个一个
console.log($("#pwdinfo").parent()) //获取当元素的直接父元素 一个
console.log($("#pwdinfo").parents()) //获取当前元素所有的长辈 body html是最后一个
console.log($("#pwdinfo").parents("body")) //获取当前元素的父元素中指定的那个
console.log($("html").children()) //获取当前元素下的子元素所有 不包含孙子
console.log($("html").children("body")) //获取当前元素下的指定子元素
console.log($("html").find("span")) //寻找当前元素的子元素中的指定那个 子孙都可以
console.log($("head").index()) //获取到当前元素在父元素中的索引位置
console.log($("body").index())
</script>
</body>
</html>
- jquery操作文本
jquery操作文本内容，操作元素中的文本和超文本，属于jquery中的方法，dom不能调用
1 html() 语法：元素集合.html() 获取该元素的超文本内容，以字符串形式返回，
元素集合.html(“内容”) 设置该元素内超文本内容，
2 text() 语法：元素集合.text() 获取到该元素下的所有文本内容 字符串返回
元素集合.text(“内容”) 设置元素集合内元素的文本内容 完全覆盖
3 val() 语法：元素集合.val() 获取元素集合内的value值 一般是用于表单中
元素集合.val(“内容”) 设置元素集合内元素的value值 覆盖掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>e</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<div>
<p>我是一段超文本内容</p>
<p>我是一段超文本内容</p>
<p>我是一段超文本内容</p>
<p>我是一段超文本内容</p>
<p>我是一段超文本内容</p>
</div>
<input type="text" value="你好java"/>
<script>
console.log($("div").html()) // 获取 到该元素的超文本内容 就是标签也能获取到 只能获取到第一个元素标签
$("div").html("<span>我是新来的</span>") //设置 该元素内超文本内容 替换掉已有的元素 有多少个标签就设置多少个
console.log($("div").text()) //获取到该元素下所有的元素中的文本内容
$("div").text("发生改变") //设置该元素下的文本内容 子元素会被覆盖掉
console.log($("input").val()) //获取到该元素下的value值
$("input").val("你好 python") //设置该元素下的value值
</script>
</body>
</html>
- jQuery操作元素类名
1 addClass()方法 添加一个class属性的值
2 removeClass() 删除元素class属性的值
3 hasClass(“内容”) 判断有没有这个值
4 toggleClass() 切换类名 有数据重复切换就是删除，如果没有就是添加或是追加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax</title>
<!--注意路径问题 ${pageContext.request.contextPath}/ -->
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<div>你好 java</div>
<script>
$("div").addClass("java") //给当前标签添加一个class值
$("div").removeClass("java") //删除元素的class值
console.log($("div").hasClass("java")) //判断这个元素的class名字有没有
$("div").toggleClass("python") // 切换class值
</script>
</body>
</html>
- Jquery 操作元素样式
css()方法 语法：元素集合.css(“width”) 获取元素的某个值， 只能获取第一个
元素集合.css(“width”,“100px”)设置元素的样式 设置是迭代全部设置成功
console.log($("div").css("width"))
console.log($("div").css("width":"50px"))
$("div").css({
width:100px
higth:200px
})
-
jquery 基础绑定事件
1 on() 语法：元素集合.on(事件类型，事件处理函数) 隐式迭代 全部设置
设置列表快捷键是ul>li*10{$}
on(事件类型，选择器，事件处理函数)
2 one() 绑定事件方法，只执行一次
3 off（）解除事件 -
jquery 事件函数
jquery提供了将事件封装成函数直接调用，click(), mouseover()
<script>
$("li").click(function(){
console.log("单击事件")
})
</script>
- jquery 节点操作
创建节点，删除节点，添加节点，替换节点，克隆节点
1创建节点：$(选择器) 获取元素， $(html结构节点) 创建节点
2添加到页面中 append() 语法：父元素.addend(子元素) 添加到父元素中的末尾
appendTo() 语法：子元素.appendTo(父元素)
prepend(子元素) 把子元素放到父元素内容的最前面
prependTo() 语法：子元素.prependTo(父元素)
after() 语法：存放元素.after(添加元素) 兄弟关系
insertAfter() 语法：添加元素.insertAfter(存放元素) 兄弟关系
before() 语法：存在元素.before(添加元素) 放到前面 兄弟关系
insertBefore() 语法：添加到当前元素的前面 兄弟关系
4 删除节点
remove() 语法：元素集合.remove() 把自己从父元素集合中移除
empty() 语法：把自己变成空标签
5 替换节点
replaceWith() 语法：存在节点.replaceWith(代替节点)
replaceAll() 语法： 替换节点.replaceAll(被替换节点)
6 克隆节点
clone()
<script>
//创建节点
const div = $("<div>我是创建的一个div</div>")
//添加一个节点
$("ul").append(div) //将一个节点放到指定的父节点中
div.appendTo("body") //将一个元素添加到父元素中
$("ul").prepend(div)
div.prependTo("body")
$("ul").after(div) //添加一个元素标签是兄弟关系
div.insertAfter($("ul")) //添加到一个存在元素的后面 兄弟关系
$("ul").before(div) //放到当前元素标签的前面 兄弟关系
$("ul").remove() //把自己从父元素集合中移除
$("ul").empty() //将自己的变成空标签 后代元素都移除
div.replaceAll($("li")) //把自己替换掉存在元素标签
$("div").removeAttr("class");
</script>
- jquery操作元素属性
属性类型：原生属性 id class src type ,自定义属性 getAttribute()
有三种可以操作属性的方法
1 attr() 和 removeAttr() 语法：元素集合.attr(属性名) 获取到标签元素属性 removeAttr(属性名) 删除标签上的属性
元素集合.attr(属性名 属性值) 设置标签属性值
2 prop() 和removeProp() 语法：$(“xxx”).prop(属性名) 获取标签中的属性，但是attr方法设置的自定义属性他获取不到，
$(“xxx”).prop(“属性名”,“属性值”) 设置标签中的属性，但是不会显示在标签上，而是存在这个元素上，
removeProp() 删除元素属性，只能删除自己设置的属性，
3 data() 和removeData()
<body>
<div class="abc" id="box" hello="word">你好 Jquery</div>
<script>
console.log($("div").attr("id")); //获取标签的id属性
console.log($("div").attr("class")); //获取标签的class属性
$("div").attr("id","id"); //设置标签属性值
$("div").attr("hello","java");//设置属性值
$("div").attr("a",100);
console.log(typeof $("div").attr("a")); //attr设置的值都是字符串
</script>
</body>
- 事件
一个事件由3部分组成，事件主角：按钮或是标签，事件类型：是点击还是移动，事件过程：这个事件发生了什么？ - onload事件
在js中onload表示文档加载完成后，在执行这个事件，语法：window.onload = function(){} 只执行一次，
在jquery中ready表示文档加载完后执行事件， 语法：$(document).ready(function(){}) 可以执行多次， - ready事件的四种写法
$() = jquery() 是别名
$(document).ready(function(){}); //写法一
jQuery(document).ready(function(){}) //写法二
$(function(){}) //写法三
jQuery(function(){}) //写法四
-
鼠标事件
注意jquery中的事件比js中的事件名字少了on,
click:鼠标单击事件，
mouseover：鼠标已入。
mouseout: 鼠标移出，
mouserdown:鼠标按下，
mouseup: 鼠标松开，
mousemove:鼠标移动，
语法：jquery事件就是在里面添加一个匿名函数， -
键盘事件
keydown:键盘按下，
keyup:键盘松开， -
表单事件
focus:获取焦点时触发事件，
blur:失去焦点， -
绑定事件
使用on()方法为存在元素绑定一个事件或是多个事件，在jquery中使用on方法和js中addEventListener()方法一样，
语法：$().on(eventtype,function(){}) ;
off():解除元素绑定事件，类似于js中removeEventListener()方法，语法： $().off(type), -
合成事件
鼠标移入和鼠标移出可以配合使用，
hover()方法可以一次性定义两个事件，语法：$().hover(fun1,fun2),参数fun1是鼠标移入事件，参数fun2是鼠标移出事件，
$().hover(function(){},function(){}), -
一次事件
one()方法为元素添加一个只触发一次事件，
语法：$().one(Eventtype,function(){}), -
this
jQuery中的this是用在事件操作中，this始终指向触发当前事件的元素，
$(“div”).click(function(){})中， $(this) = $(“div”),
$(“p”).click(function(){})中， $(this) = $(“p”), -
index()方法
在jquery中可以使用index()方法来获取当前对象的索引值，
语法：$().index(), 参数可以省略，相当于是当前元素在父元素中排行老几。注意从零开始， -
查找方法
parent(): 查找当前的直接父类，
parents();查找祖先元素，
parentsUnitil()：查找"指定范围的"祖先元素
children():查找子元素，
find():查找后代元素，
prev():查找前面的相邻兄弟元素，
prevAll():查找前面所有兄弟元素，
next():查找后面相邻的兄弟元素，
nextAll():查找后面所有的兄弟元素，
siblings():查找所有兄弟元素， -
过滤方法
作用就是：获取某个元素，和选择优势互补，
hasClass():类名过滤， 根据元素的类名来过滤，语法：$().hasClass(“类名”)，
一般用于判断元素是否包含指定的类名，如果包含返回true,不包含返回false,
eq():下标过滤 语法： $().eq(n), n是一个整数，负数是是倒数，eq()方法的下标是从0开始的，就是定位到一个元素，
is():判断过滤，指的是根据某些条件进行判断，获取符合条件的元素，语法： $().is(selector)
参数selector是一个选择器，is是判断当前选择的元素集合中是否存在符合条件的元素，存在返回true,
$().is(":visible") //判断元素是否可见
$().is(":checked") //判断单选框或是复选框是否被选中
not():反向过滤， 语法：$().not(select或fu) 当参数是一个选择器时表示过滤掉这个元素，选择其余元素，
has() ,filter():表达式过滤，
- jquer效果
隐藏和显示
$("#hide").click(function(){
$("p").hide();//隐藏这个标签
$("p").hide(1000);//一秒之内隐藏
})
$("#show").click(function(){
$("p").show()://显示出来
})
- 切换显示和隐藏
通过toggle()方法来切换hide()和show()方法的效果，
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("p").toggle(1000);//单击隐藏或是展示
})
})
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
-
jquery遍历
用于根据元素之间的关系来查找html元素标签，标签之间的关系是：祖先，兄弟，后代， -
祖先
向上寻找祖先：parent(), parents(), parentsUntil() ,
1 parent():返回被选中元素的直接父元素，
2 parents():返回被选中元素的所有祖先元素，一路向上直到文档的根元素（html）
3 parentsUntil()：返回给定两个元素之间的所有祖先元素
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(function(){
//选中直接父类元素
$("span").parent().css({"color":"red","border":"2px solid red"});
$("span").parents();//所有祖先
$("span").parents("ul");//返回指定的祖先元素
$("span").parentsUntil("div");//返回span的祖先最远的是div ,不能超过div
})
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父)
<ul>ul (祖父)
<li>li (直接父)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (祖父)
<p>p (直接父)
<span>span</span>
</p>
</div>
</div>
</body>
</html>
- 遍历后代
向下遍历 查找元素后代，
1 children() 返回被选中元素的所有直接子元素
2 find() 返回被选中元素的后代元素，直到最后一个后代
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(function(){
$("div").children()//返回当前元素的直接后代
$("div").children("p.1")//返回直接后代的p标签id=1
$("div").find("span");//返回div所有的后代的span元素
$("div").find("*");//返回所有元素
})
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (子)
<span>span (孙)</span>
</p>
<p>p (child)
<span>span (孙)</span>
</p>
</div>
</body>
- 水平遍历
找出所有兄弟标签
1 siblings() :返回被选中元素的所有同胞元素
2 next() :返回被选中元素的下一个
3 next() :返回所有下面的同胞
4 prev():返回向上的同胞 - 过滤
1 first() :返回被选中元素的第一个
2 last():返回被选中元素的最后一个
3 eq() :返回被选中元素中指定索引位置的元素
4 filter() :返回指定元素
5 not() :不能包含此元素
<script>
$(document).ready(function(){
$("body").first("p");//返回第一个元素
$("body").last("p");//返回最后一个元素
$("p").filter(".id");//返回所有p标签class是id的标签
$("p").not(".intro").css("background-color","yellow");
});
</script>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<p>我是唐老鸭。</p>
<p class="intro">我住在 Duckburg。</p>
<p class="intro">我爱 Duckburg。</p>
<p>我最好的朋友是 Mickey。</p>
</body>
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
