Web阶段学习总结（华清远见）

m0_46612586

已于 2022-08-29 10:14:59 修改

阅读量465

点赞数

文章标签： html 学习前端

于 2022-08-29 08:55:28 首次发布

本文链接：https://blog.csdn.net/m0_46612586/article/details/126577720

版权

Web阶段学习总结

HTML

通过此次对HTML的简单学习，粗略掌握了使用它来编写简单的网页。

HTML的文档整体有关说明：

整个 HTML 就由一个个元素组成（可以嵌套），而元素则一般由一对标签（tag）构成；

一个元素由开始标签，内容，结束标签组成；

对整个HTML文档进行整理分析，大致包含以下部分：

<!DOCTYPE html>: 声明文档类型。可有可无;
<html></html>:包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中;
<head></head>:包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容;
<meta charset="utf-8">:设置文档使用utf-8字符集编码;
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">:指定页面的图标，出现在浏览器标签上;
<title></title>:设置页面标题，出现在浏览器标签上;
<body></body>:包含能在页面看到的所有内容;
同大部分编程语言一样也包含注释，用<!--和-->包裹起来；

元素放在元素之中，称为嵌套；

元素的属性包含元素额外信息，不会在浏览器中显示，但在属性和元素名称之间包含一个空格，而且属性名称后面有一个=号，并且一个属性值由一对引号包裹。

各种语法说明：

标题：h1-h6 分为六级标题，一级最大，六级最小；

文本格式：

<p></p>显示文本内容
<del></del>划掉文本内容
<strong></strong>加粗文本内容
<em></em>斜体
<a href="http://www.baidu.com/" target="_blank">百度一下</a>

超链接：a标签百度一下。（其中_blank表示在新的页面打开_self表示当前页面打开）；

图片：img标签；

表格：使用table标签

tr表示表格的每一行

th表示表头

td表示表的数据；

tfoot、thead、

列表：

1.无序列表使用<ul></ul>标签

<ul>
	<li>HTML1</li>
	<li>HTML2</li>
</ul>

有序列表使用<ol></ol>标签

<ol>
	<li>HTML1</li>
	<li>HTML2</li>
</ol>

//表单以及input标签
表单：使用<form></form>标签；
下拉列表：
使用<select></select>标签,
选项使用<option></option>标签；
input中的类型说明：
文本为text
密码为password
数字为number
单选为radio
多选为checkbox；等等
input中的placeholder为占位符，checked为默认选项；
区块元素：<div></div>,<h1></h1>,<pre></pre>等自动分行（其中<pre></pre>标签可以用来展示特别格式的文本）；
内联元素：<span></span>,<input>,<a></a>等不会新起一行

css知识总结

一、基础选择器(以jquery对象选择器为例)

标签选择器: $(" s p an ") 、$ (“div”)、 $(" p ") ...... * * 类选择器 : * *$ (“.box”)
多类名: $(". b o x, . b o x 1, . b o x 2......") * * i d 选择器 * * :$ (“#ipt”)

二、复合选择器

后代选择器(重要)： $(" d i v s p an ") * * 子选择器 * * (重要) :$ (“div>span”)
并集选择器(重要)
链接伪类选择器
…

更多选择器点击查看：jQuery API 中文文档

三、文本属性

字体复合属性：font-size 、font-weight、font-color、font-style…
关于颜色：color
对齐文本：text-align
装饰文本：text-decoration：underline、overline、line-through…
文本缩进:text-indent:2em
行间距:line-height

四、CSS引入方式

1.行内样式
行内样式是直接把css代码放到HTML标签里面，作为style属性的属性值。

<span style="color:blue" >这是一个span标签</span>

2.内嵌式
内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，通常写在head标签内。

<head>
	<style>
		span{
    		color:blue;
		}
	</style>
</head>

3.外链式
外链式是把css样式写入.css文件内，然后通过link标签链接。

	<link href="../xxx.css"/>

五、元素显示模式

显示模式（display属性进行设置）
块元素 block: div、p、h…
行内元素 inline: input、img、span…
行内块元素（特殊）inline-block
行内转块级: display:block;
块级转行内: display:inline;
块级转行内块 :display:inline_block;

六、背景属性

通过CSS背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

1.背景颜色
background-color属性定义了元素的背景颜色

background-color: 颜色值；

一般情况下元素背景颜色默认值是transparengt（透明），可以手动指定背景颜色为透明色

2.背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）

background-image: none | url (url)

3.背景平铺
如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性

div {
    width: 300px;
    height: 300px;
    background-image: url(images/logo.png)
    /*  背景图片不平铺  */
    background-reprat: no-repeat;
    /*  默认情况下，背景图片是平铺的  */
    background-reprat: repeat;
    /*  沿着x轴平铺  */
    background-reprat: repeat-x;
    /*  沿着y轴平铺  */
    background-reprat: repeat-y;
}

4.背景图片位置
利用background-position属性可以改变图片在背景中的位置

background-position: x y;

参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只指定了一个方位名词，另一个省略，则第二个值默认居中对齐
参数是精确单位

如果参数是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标
如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中
参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标

5.背景图像固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
scroll 背景图像是随对象内容滚动
fixed 背景图像固定

6.背景色半透明
CSS3提供了背景颜色半透明的效果。

background: rgba(0,0,0,0.3);

最后一个参数是alpha透明度，取值在0~1之间
通常会把0.3的0省略，写为background:rgba(0,0,0,.3);

7.背景复合写法
为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中。从而节约代码量。

当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为：

background：背景颜色背景图片地址背景平铺背景图像滚动背景图片位置；

background: transparent url(image.jpg) repeat-y fixed top;

七、盒子模型

个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

八、美化网页

圆角边框:border-radious
盒子阴影:box-shadow
文字阴影(了解即可)…

九、浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float ： 属性值}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动详细内幕特性:

1.浮动脱离标准流不占位置，会影响标准流，浮动只有左右浮动。

2.浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找离他最近的父级元素对齐。但是不会超出内边距的范围。

浮动的清除

选择器{clear ： 属性值}

属性值	描述
left	清除左浮动
right	清除右浮动
both	清除左右浮动

十.定位

元素的定位属性
元素的定位属性主要包括定位模式和边偏移两个部分。
1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

2、定位模式
在CSS中，position属性用于定义元素的定位模式，基本语法如下：

选择器 ： {position ： 属性值}
position属性的常用值：
值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

(1)静态定位
当position设置为static时，可以将元素定位于静态位置。即默认位置。
在静态定位状态下，无法通过边偏移属性改变元素的位置

(2)相对定位（relative）
相对定位最重要的一点事，他可以通过边偏移移动位置，但是原来所占的位置继续占有。
其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流的方式对待他。如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要加害者就是移动位置，让盒子到我们想要的位置上去。
(3)绝对定位（absolute）
绝对定位可以他通过边偏移移动位置，但是他会完全脱标，完全不占位置。

3.叠放（z-index）
当多个元素同时设置定位时，定位元素之间有可能会发生重叠。
在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素使用zindex层叠等级属性，其取值可以为正整数负整数和零

z-index的默认值是0，取值越大，定位元素在层叠元素中越居上

JS 的总结

什么是JS？

HTML定义了网页的内容，CSS定义了网页的布局，那么JavaScript定义了网页的行为。
将静态的网页转化动态类型。JavaScript可以跨平台使用，和java没有任何关系。当浏览器显示该网页时，浏览器就会执行js程序。来达到动态的效果。

JS的用法

JS的执行顺序（JS可以放在页面的任何地方包括页面外）

部分JS的代码将在页面之前被载入
部分js代码将在页面载入的时候被执行
标签后的代码将在页面载入完成之后被执行

JS的注释

单行注释 //
多行注释 /* */
注释的快捷键 CRTL + SHIFT +/

JS的定义变量

定义变量必须以字母或下划线开头，由字母下划线数字组成
定义变量一般采用驼峰式命名法即第一个首字母小写其余首字母大写
一般显示定义 let
不能使用JS的关键字以及保留字

JS 的数据类型

JS 总共由五大类型数值类型、布尔型、字符串类型、undefined类型 null类型
undefined类型是已经创建但是没有初值的类型
null 用来表达某个变量的值为空
数组的三种说明方式

var arr= new Array（）； arr[0]=1,i[1]=2;
var arr= new Array(“a”,“b”,“c”);
var arr = [3,5,1];

函数的声明方式 functicon name（）{}
对象

对象的声明方式
var 变量名 = {属性名：值，属性名：值，…}
var 变量名 = new Object（）；变量名.属性名 = 值；变量名.属性名 = 值；
通过构建模板来说明对象

<script>
            //模板
        let MyObject = function (name1,age){
            //属性 this：指当前对象
            this.name = name1; // name1 代表参数 name创建出来的对象 当前的对象
            this.age = age;
            //方法
            this.info = function(){
                alert(this.name+" , "+this.age);
            }

        }
        // 对象 p1
        let p1= new MyObject("zs","12");
        p1.info();
        let p2 = new MyObject("zd","20");
        p2.info();

    </script>

-JS的模板相当于 Java的类

对象的获取方式
object.属性名
object[“属性名”] object是顶级父类

JS数据类型的转化

获取数据变量的数据类型 typeof +let 可以显示数据类型
Number（）函数

如果转换的内容就是一个数值类型的字符串没那么将来再转换的时候会返回自己 let i = “2”; alert(i);//2
如果转换内容本身不是一个数值类型的字符串，那么在转换的时候结果就是NaN
如果转换的内容是空则输出0
如果是布尔型，true转换为1，flase转换为0

parselnt（）函数

忽略字符串前面的空格，直至找到第一个非空字符，还会将数字后面的非数字的字符串去掉
如果第一个字符不是数字独好或者负号，返回NaN
如果转换的内容是空字符串，那么转换的结果是0
如果是布尔值 NaN
由于一般的除法在JS中并不是整除所以可以使用toFixed（）函数来保留几位小数

parselnt（）函数运算规则与parseint（）相同
字符串类型

String类型
转化 ” “+i 则可以转化成字符串类型
主要常用的函数
str.substring（2，8）；是截取字符串中的字符串（按照顺序截取）这个函数是左闭又开空格也算一个字符
str.substr(2,8);是截取长度不是字符串数组的顺序
str.replace(“ok”,“China”);更换字符串第一个是字符串原先的字符串第二个是替换的字符串
正则表达 /ok/g 更换字符串，第一个是将ok的所有字符串进行更换
toString类型
undefined 和 null 不能用toString（）转化成 String类型
toString（）方法可以把一个逻辑值转化为字符串，并返回结果。 booleanObject.toSteing（）

JS的算数运算符

JS的除法 / 并不是整除
++ 单独放在一行作用 var i++； i= i+1
++i+i++ 运算顺序先进行 i= i+1 然后在进行 i+i 最后 i= i+1
x +=y 等价于 x= x+ y；
=== 表示值和数据类型相等判断
&& 、 || 、！与非或逻辑运算符
注意 70<i<80 转化成JS 70<i&&i<80
三目运算符条件?满足条件一：不满足则条件二

username = {name:"zhangsan",password:123456,name1:"lihua",password1:1234};
       console.log(username.name);
        username1 = {name:"zhangsan",password:123456};
       username.name == username1.name&&username1.password == username.password? console.log("1"):console.log("0");

if else 与switch case 语句
当有范围的时候选择 if else 语句当有准确选项时选择 switch case 语句

JS 的 Date的用法

1.Date（）作用是获取时间

<title>Data的用法</title>
   <script>
       let a =new Date();
       a.getMonth();
       document.writeln(a.getFullYear()+"年");
       document.writeln(a.getMonth()+1+"月");
       document.writeln(a.getDate()+ "号");
       document.writeln(" "+a.getHours()+" 时");
       document.writeln(" "+a.getMinutes()+" 分");
       document.writeln(" "+a.getSeconds()+" 秒");

   </script>

制作一个定时器

<head>
   <meta charset="UTF-8">
   <title>JS02定时器</title>
   <script>
       let Timer;


        function showTime(){
            let a = new Date();
           let  b =document.getElementById("myTime");
          b.innerHTML=  a.getFullYear()+ "年"+a.getMonth()+ 1 + "月"+a.getDate() + "号"+" " + a.getHours() + " 时"+ " " + a.getMinutes() + " 分"+" " +a.getSeconds()+ " 秒";

        }
//        b.innerHTML只能运行一次
       timer = setInterval(function () {
           showTime();
       },1000);


   </script>
</head>
<body>
   <span id="myTime"></span>
</body>

制作定时器时候可以通过 span 然后先定义一个展示时间的函数
这个函数只能展示一次时间，通过document.getElementById（）获取span的id
然后进行innerHTML进行插入，插入只能一次插入
然后在使用 setInterval功能函数每隔一段时间就运行一次来进行

Math

<script>
        document.writeln(Math.PI+"<br>");//圆周率
        document.writeln(Math.ceil(3.1415)+"<br>");// 向上取整
        document.writeln(Math.round(3.1415)+"<br>");//四舍五入
        document.writeln(Math.floor(3.1415)+"<br>");//向下取整
        document.writeln(Math.random()+"<br>");//生成一个随机数
        document.writeln(Math.random().toFixed(2)*100+"<br>");//生成一个随机数
        document.writeln(Math.random().toFixed(2)*100+1+"<br>");//生成一个随机数
        document.writeln(Math.ceil(Math.random().toFixed(3)*100)+"<br>");//生成一个随机数
</script>

Math常用的函数
Math.PI表示圆周率
Math.ceil表示向上取整
Math.round表示四舍五入
Math.floor表示向下取整
Math.random（）表示生成一个随机数范围0-1 左闭又开
用向上取整在包含 random 可以实现 0-100随机数

JS的判断一个变量是不是同一类型

 <script>
        let arr[];
        console.log(typeof arr+"<br>");
        console.log(arr instanceof Array+ "<br>");//判断一个变量 是不是同一类型实例
        var obj = [];
        console.log(typeof obj+"<br>");
</script>

使用 arr instanceceof Array 前面是自己定义的后面是电脑已有类型相同为 true
typeof obj 表示显示数据类型

JS 的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script>
        /* 页面加载完后立即执行该数据*/
        window.onload= function (){
            alert(页面加载完后立即执行该数据);
        }
        function f() {
             document.write("div的点击事件");

        }
        function f2() {
            alert("获取焦点事件");
        }
        function f1() {
            alert("响应")
        }
    </script>
    <style>
        /* 改变鼠标样式*/
        div:hover{
            cursor:pointer;
        }
    </style>
</head>
<br>
    这是一个body
    <div onclick="f()">点击</div>
    <input type="button" value="点击" onclick="f()"/>
/*  onblur 失去焦点事件*/
    用户名：<input type="text" name="username" onblur="checkUsername()"></br>
    密码： <input type="password" name="password" onfocus="f2()"><br>
    密码1： <input type="password" name="password" onchange="f1()"><br>
    <select onchange="f1()">
        <option>nihao</option>
        <option>nilll</option>
    </select>

</body>
</html>

window.onload = function(){}表示页面加载完成立即执行该数据
onblur 失去焦点事件
onfocus 获取焦点事件
onchange 常用于中
onclick 为点击事件
css中的改变鼠标样式变成一个手型

  <style>
        /* 改变鼠标样式*/
        div:hover{
            cursor:pointer;
        }
    </style>

JS的获取HTML的元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS09获取HTML元素</title>
    <script>

      window.onload = function (){
          let inputNode = document.getElementById("username");

          console.log(inputNode.value);
          /* 获取标签中的值可以用 value 或者 inHTML inTEXT*/
         let div1 = document.getElementById("div0").innerHTML;
           let div1 = document.getElementById("div0").innerText;
          console.log(div1);
         let textarea1 =document.getElementById("ok").innerHTML;
          console.log(textarea1);


          let textarea2 = document.getElementById("ok").value;
          console.log(textarea2);


      }
      function f(){
      let a = document.getElementsByClassName("inp")[0];
      console.log(a);
      }
      function f1() {
          let a = document.getElementsByName("sex");
          console.log(a);
      }
      function f2() {
          let input1 = document.getElementsByTagName("input");
          console.log(input1);
      }
    </script>

</head>

    用户名：<input type="text" class="inp" id="username" value="张三">
    文本域 没有vale 而且 文本域是标签
    <textarea col="5" rel="5"   id="ok" > hello </textarea>
    <div id="div0" class="inp"> 这是一个div</div>
    <input type="button" value="帮过class获取标签" onclick="f()">
    <br>
    女：<input type="radio" name="sex" value="1">
    男：<input type="radio" name="sex" value="0">
    <input type="button" onclick="f1()">按钮</input>
<input type="button" onclick="f2()">按钮2</input>
</body>
</html>

document.getElementsByName();
document.getElementsTagName();
document.getElementById();
document.getElementsByClassName();
innerHTML和 innerText的区别？
innerHTML可以对元素进行修饰，innerText只能获取元素内容，但是div盒子innerHTML不可以获取，可以通过innerText获取

JS的访问或修改HTML的属性

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问或修改HTML的属性</title>
    <script>
        function f() {
            console.log(document.getElementById("username").type = "button");
            console.log(document.getElementById("username").name= "name");
            console.log(document.getElementById("username"));
        }
        function f1() {
            var a = document.getElementById("div0");
            a.style.width= "100px";
            a.style.high = "200px";
            a.style.backgroundColor="red";
            a.style.display = "block";
        }
    </script>
</head>
<body>
    <input type="button" value="访问或修改属性" onclick="f()">
    <input type="button" value="脚本框CSS" onclick="f1()">
    <br>
    <input type="text" name="username" id="username"><hr/>
 <div id="div0">
      这是一个div；
 </div>
</body>
</html>

可以直接通过 document.getElementById().type对HTML的元素进行修改
也可以直接对样式进行修改

<body>
  <input type="button" value="脚本框CSS" onclick="f1()">
  </body>1. 1
  <script>
    function f1() {
            let a = document.getElementById("div0");
            a.style.width= "100px";
            a.style.high = "200px";
            a.style.backgroundColor="red";
            a.style.display = "block";
        }
  </script>

JS的脚本化的语言

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS11脚本化事件</title>
    <script>
        /* 不用点击 直接通过脚本 触发事件*/
        window.onload = function () {
            document.getElementsByTagName("div")[0].onclick = function () {
                alert("弹一个框");
            };
        }

    </script>
</head>
<body>
    <div id="div0" >这是一个div</div>
</body>
</html>
<script>
document.getElementsByTagName("div")[0].onclick = function () {
alert("弹一个框");
};
</script>

脚本化事件就是不需要点击直接出触发一般都在 window.onload = function（）{}中运行 window.onload意思是页面加载完毕后在运行
触发事件时先获取元素然后再进行操作为有效操作。

JS的正则表达

\w(字符)

n+(匹配至少一个)

n*（匹配任意个）

\d(数字)

i(忽略大小写)

g(全局匹配)

.(任意字符)

/^ &/(开头至结尾)

......

JS BOM模型

JS BOM的概述

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。例如：获取浏览器窗口的尺寸、获取浏览器访问过的历史记录

window 表示浏览器窗口
history 表示浏览器的历史包含访问过的URL

history.back（）回退
history.go()加载history列表中的某个具体页面

浏览器的对话框

confirm 表示确认提示框
prompt 表示输出弹框并输入信息返回到页面
alert 提示框

浏览器的定位

location.href 属性返回当前的网址信息
location.assign() 方法加载新的文档

jQuery总结

1、$其实就是一个函数名，是jQuery的所缩写

2、$可以作为选择器，获取DOM对象对应的jQuery对象

3、$可以将一个DOM对象，转换成一个jQuery对象

4、事件中的this，指向DOM对象，所以需要使用$（this）做转换

5、什么时候使用jQuery，什么时候使用 js？其实本质上jQuery就是js，只是我们可以使用一些现成的方法而已

jQuery常用方法

1、index()；获取元素索引

2、text()；获取和设置文本节点

<script type="text/javascript">
		$("#btn2").click(function (){
			console.log($(".demo").text());
		});
	</script>

3、css()；获取和设置样式

添加单个class：$("div").addClass("class1")
添加多个class：$("#div").addClass("class1 class2");

4、val()；获取和设置value属性

<script type="text/javascript">
		$("#ipt").val();
	</script>

5、attr()；获取和设置属性值，例如src

<body>
		<div class="demo">
			<input type="text" id="input1" value="文本输入框" />
		</div>
		<button type="button" id="btn2" value="JQuery">实现方法</button>
		<script type="text/javascript">
			$("#btn2").click(function (){
				$(".demo #input1").attr({value:'改变文本框的值'});
			});
		</script>
</body>


removeAttr()
  删除被选元素的属性值，如：
	<script type="text/javascript">
		$("#btn2").click(function (){
			$(".demo #input1").removeAttr("value");
		});
	</script>

6、addClass()；添加class

添加单个class：$("div").addClass("class1")
添加多个class：$("#div").addClass("class1 class2");

7、removeClass()；删除class

removeClass() 方法:
删除指定的 class 属性：$("h1").removeClass("blue");
对被选元素进行添加/删除类的切换操作：

8、toggleClass()；切换class

$("h1").toggleClass("blue");

9、siblings()；获取同级其他元素

<script type="text/javascript">
		$("#btn2").click(function (){
			$(".demo1").siblings().css({"border":"2px solid red"});
		});
	</script>

10、find(“选择器”)；获取子级

<script type="text/javascript">
		$("#btn2").click(function (){
			$(".demo").find("span").css({"border":"2px solid red"});
		});
	</script>

11、parent()；获取父级

	<script type="text/javascript">
		$("#btn2").click(function (){
			$(".getParent").parent().css({"border":"2px solid red"});
		});
	</script>

12、childre(): 获取子集

<script type="text/javascript">
		$("#btn2").click(function (){
			$(".demo").children("span").css({"border":"2px solid red"});
		});
	</script>

DOM操作

1、

append():添加元素节点

向每个匹配的元素内部后置添加内容，如：

	<script type="text/javascript">
		$("#btn2").click(function (){
			$(".demo1").append("添加元素");
		});
	</script>

after():在每个匹配的元素之后插入内容，如：

<script type="text/javascript">
	$("#btn2").click(function (){
		$(".demo1").after("<li>添加元素</li>");
	});
</script>

before():在每个匹配的元素之前插入内容，如：

<script type="text/javascript">
	$("#btn2").click(function (){
		$(".demo1").before("<li>添加元素</li>");
	});
</script>

2、remove(): 删除元素节点,从DOM中删除所有匹配的元素，可以移除元素，包括文本和子节点，还有元素的数据和事件。

<script type="text/javascript">
	$("#btn2").click(function (){
		$(".demo1").remove()
	});
</script>

jQuery事件

1、click()

2、mouseenter()

3、mouseleave()

4、mousemove()

5、on()；事件委托

…

事件绑定bind()：绑定事件处理函数的最基本方式是使用.bind()方法。接受两个参数：

.bind(event type, event handler)

$(document).ready(function(){
    $('.mydiv').bind('click',test);
    
    function test(){
        alert("Hello World!");
    }
});

jQuery动画方法

1、show()；

<p style="display: none">Hello</p>

$("p").show("slow");

2、hide()；

$("p").hide("slow");

3、fadeln()；(淡入)

jQuery 代码:
$("p").fadeIn("slow");

4、fadeOut()；（淡出）

$("p").fadeOut("slow")

5、slideDown()；（下滑显示）

$(".btn2").click(function(){
  $("p").slideDown();
});

6、slideUp()；（上滑隐藏）

$("p").slideUp("slow")

7、animate()；

// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

8.stop（停止动画）

停止所有在指定元素上正在运行的动画。
HTML 代码:
$("#stop").click(function(){
  $("#box").stop();
});

m0_46612586

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Web阶段学习总结（华清远见）

标签选择器("span")、("span")、("span")、(“div”)、("p")......∗∗类选择器:∗∗**类选择器:**("p")......∗∗类选择器:∗∗(“.box”)多类名(".box,.box1,.box2......")∗∗id选择器∗∗:(".box,.box1,.box2......")∗。
复制链接

扫一扫