day06: jquery动画、操作DOM、添加元素、删除元素、添加与删除类样式、css样式、Jquery常用的选择器（过滤选择器（基偶）、层级选择器、属性选择器）、validation 框架

最新推荐文章于 2022-10-31 19:38:33 发布

LI JS@你猜啊

最新推荐文章于 2022-10-31 19:38:33 发布

阅读量1.5k

点赞数

分类专栏： JAVEWEB 文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/m0_45209551/article/details/123652829

版权

一回顾

1.创建节点
   createElement() 创建节点对象
   createTextNode() 创建文本节点(内容)
   appendChild 添加父子关系
   removeChild 删除子节点
2.前端的登录验证
3.定时函数
   setInterval("执行的操作","间隔的毫秒值") 多次执行
   clearInterval(t) 清除定时函数
   setTimeout("执行的操作","间隔的毫秒值")  一次执行
   clearTimeout(w); 清除定时函数
4.Bom.Window
    window.document
    Window Screen
    Window Location
    Window History
    Window Navigator
5.jquery 封装js的框架
   准备函数:A.$(function(){})  A.$(docment).ready(function(){})
   js与jquery之间的相互转换 
     js==>jquery $(js)
     jquery==>js  $(js)[0] 或者 $(js).get(0)
   jquery 三种基本选择器: id选择器 $("#id") 类选择器 $(".class") 标签选择器 $("标签名称")
   jquery 特效
     hide() show()  toggle()
     fadeOut() fadeIn() fadeToggle()
     slideUp() slideDown() slideToggle()
   jquery 事件  与js类似 去除 on

二作业01

step01 需求

step02 分析

A.事件
B.使用js操作样式

step03 代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>当当网我的订单页</title>
    <link rel="stylesheet" href="css/dangdang.css" />
    <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    <style>
        /*ul{
            display: block;
        }*/
    </style>
</head>
<body>
<div id="menu" class="pos">
    <a href="#" id="tv_id">我的当当</a>
    <ul id="menu-ul"  style="display:none;">
        <li><a href="#">我的订单</a></li>
        <li><a href="#">我的收藏</a></li>
        <li><a href="#">我的礼品卡</a></li>
        <li><a href="#">我的积分</a></li>
        <li><a href="#">我的余额</a></li>
    </ul>
    
</div>
  <script>
       $("#tv_id").mouseover(function(){
            $("#menu-ul").css({"display":"block"});
       }).mouseout(function(){
           $("#menu-ul").css({"display":"none"});
       })
  </script>
</body>
</html>

三作业02

step01 需求

step02 分析

1.根据标签来获取行
2.使用循环来遍历依次设置样式

step03 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="80%">
			<tr>
				<td>商品的编号</td>
				<td>商品名称</td>
				<td>商品价格</td>
				<td>商品描述</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>1</td>
				<td>1</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>2</td>
				<td>2</td>
			</tr>
			<tr>
				<td>3</td>
				<td>3</td>
				<td>3</td>
				<td>3</td>
			</tr>
		</table>
		<script>
			var arrays =document.getElementsByTagName("tr")
			for (var i = 0; i < arrays.length; i++) {
				if(i%2!=0){
					arrays[i].style.background="red"
				}
			}
		</script>
	</body>
</html>

四 jquery动画

方法的名称	方法的描述
animate({params},speed,callback)	设置动画
stop()	方法用于在动画或效果完成前对它们进行停止

代码

①：设置动漫效果，必须在css中设置定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: red;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div></div>
        <button id="tv_id">点击</button>
        <button id="tv_stop">停止</button>
        <script>
            $("#tv_id").click(function(){
                $("div").animate({
//                   left:'250px',
//                   opacity:'0.5',
//                   height:"+=150px",
                     width:"toggle"
                },4000);
            });
            
            $("#tv_stop").click(function(){
                  $("div").stop();
            })
            
        </script>
    </body>
</html>

五 jquery 操作DOM

5.1 属性操作方法

方法的名称	方法的描述
attr()	设置或返回匹配元素的属性和值
html()	设置或返回匹配的元素集合中的 HTML 内容
val()	设置或返回匹配元素的值
text()	设置文本内容
prop()	设置或返回匹配元素的属性和值

代码

①：属性单个是获取属性值，attr()：相当路径，prop()：绝对路径

多个属性是设置属性值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
    </head>
    <body>
        <input type="button" value="点击01&

最低0.47元/天解锁文章

LI JS@你猜啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
day06: jquery动画、操作DOM、添加元素、删除元素、添加与删除类样式、css样式、Jquery常用的选择器（过滤选择器（基偶）、层级选择器、属性选择器）、validation 框架

一回顾1.创建节点 createElement() 创建节点对象 createTextNode() 创建文本节点(内容) appendChild 添加父子关系 removeChild 删除子节点2.前端的登录验证3.定时函数 setInterval("执行的操作","间隔的毫秒值") 多次执行 clearInterval(t) 清除定时函数 setTimeout("执行的操作","间隔的毫秒值") 一次执行 clearTimeout(w); 清...
复制链接

扫一扫