Jquery学习 -千锋学习
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>
Jquery学习 -千锋学习相关推荐
- 千锋学习的33天：网络编程
千锋学习 千锋学习的33天:网络编程 一.填空 TCP和UDP 都是传输层协议,TCP是_(有链接)的协议,UDP是(无连接)_的协议,这两种协议中,__(TCP)_协议更安全,而_UDP_传输效率更 ...
- #千锋逆战班，王富胜# 学如逆水行舟，不进则退。在千锋学习的第14天 笔记整理
1.Servlet:是服务器端程序,作用是实现前后台交互.本质是一种特殊Java程序. 2.Servlet家族系谱图: 3.手动创建Servlet: 3.1:创建一个java类,让这个java类继承或 ...
- 千锋学习day09面向对象
面向对象 面向对象 面向对象思想(Object Oriented Programming )OOP: 一切客观存在的事物都是对象,万物皆对象 任何对象,一定具有自己的特征和行为 对象: 特征:称为属性 ...
- 千锋学习day15day16常用类
内部类 内部类的分类 内部类分为:成员内部类.静态内部类.局部内部类.匿名内部类 什么是内部类 概念:在一个类的内部再定义一个完整的类 特点: 编译之后可生成独立的字节码文件 内部类可直接访问外部类的 ...
- 数据库MYSQL详细教程----千锋学习笔记
目录 目录 -.引言 1.1现有的数据存储方式有哪些? 1.2以上存储方式存在哪些缺点? 二.数据库 2.1概念 2.2数据库的分类 三.数据库管理系统 3.1概念 3.2常见数据库管理系统 四.My ...
- 2021-10-21千锋教育学习日志
我叫牛牛,这是我在千锋学习的第二个礼拜. 今天是十月二一号了,昨天晚上还是开空调的天气,今天就已经瞬间降温还下起了下雨,这不免让我的心情更加难过了一分,因为我们java班唯三的女生走了一个,三朵金花也 ...
- 一张图带走一套操作 分享最新网络营销学习路线图-千锋
一张图带走一套操作 分享最新网络营销学习路线图-千锋 学习网络营销,进入互联网行业是一个不错的选择,但是,有很多新手自学网络营销时,根本不知道从哪儿入手学习,怎么系统性地学习.网络营销岗位的薪资高.就 ...
- 千锋逆战班学习的第17天，final
千锋学习的第17天今天学习的是 三大修饰符final中国加油,武汉加油. 七(final属性的初始化)有如下代码 1) class MyClass{ 2) final in value; 3) pub ...
- 大学python实训总结-千锋Python实训总结 学好基础才能走的更远
时间飞逝,不知不觉在千锋学习Python已经一个月了,在这不长不短的一个月时间感觉我以往的生活方式和学习方式完全被改变了,希望我能继续保持这样的求学心态和学习态度.下面这个Python实训总结就是我对 ...
- 千锋逆战班，css注册案例
千锋学习的第四十八天, 不积跬步无以至千里,不积小流无以成江河: 注册案例代码: <!DOCTYPE html> <html><head><meta char ...
最新文章
- 用python画漂亮图片-使用 Python/matplotlib 画出漂亮的论文插图
- linux安装icc步骤,怎麼安装不到 icc?
- 面试题25：合并两个排序的链表
- 【UML】交互建模中交互图允许的消息类型
- java对象怎么创建_java对象是如何创建的
- 计算机考研问题,考研计算机常见的6个问题
- 金融matlab创建3x3数组,Matlatb金融时间序列工具箱——建立金融时间序列
- Kotlin：比 Java 做得更好
- 6.5bert的家族成员-百度的ERNIE,ERNIE2.0,清华的ERNIE,RoBERTa,BERT-WWM,UniLM,MASS,TinyBERT,ELECTRA,SpanBERT
- 一周第二次课（12月12日）
- Python 用异常处理改写猜数游戏程序
- 图神经网络详解（四）
- Arduino Leonardo教程：如何回车，特殊按键定义，DIY超便宜的键盘主控
- HTML+CSS实现按钮手风琴效果 ｜ 青训营笔记
- 最新Z-blog黑色极简风格文章博客主题模板源码
- C# 开发CAD注意事项（二）-CAD不显示注记
- C语言四轴联动程序,四轴联动程序中F值不恒定之解决方案
- 换三张麻将源代码php,理论先行：麻将换三张攻略大全
- Python replace()方法
- Y450 摄像头驱动问题的解决方法“0X00405202指令，或vmstillmnt”
热门文章
- C#cmd执行命令隐藏窗口，并保持程序一直运行
- 数据时代，嵌入式工程师必须知道的八大加密算法
- magento权限设置
- Hibernate4 buildSessionFactory过时解决方案(Annotation也是一样解决）
- 关于wow（mangos模拟器） 的物品生成器---wowItemEdit 1.0
- MFC 中获取各种类指针的方法
- 拓端tecdat|ARIMA模型预测CO2浓度时间序列-python实现
- 拓端tecdat|R语言最大流最小割定理和最短路径算法分析交通网络流量拥堵问题
- 拓端tecdat|如何用R语言在机器学习中建立集成模型？
- 拓端tecdat|matlab实现MCMC的马尔可夫转换MS- ARMA - GARCH模型估计