华清远见html+css+js阶段总结
华清远见html+css+js阶段总结
1. html阶段总结
1. 1html基本结构
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body>body>
html>
1.2 html常用标签
<HTML>HTML> 表示该文件为HTML文件
<head>head> 包含文件的标题,使用的脚本,样式定义等
<title>title> 包含文件的标题,标题出现在浏览器标题栏中
<style>style> 内联样式标签
<link href="" type="text/css" rel="stylesheet" /> 引用外部css资源，href为资源地址
<script src="">script> 引用外部js资源，src为资源地址
<body>body> 放置浏览器中显示信息的所有标志和属性,其中内容在浏览器中显示.
<a href="">a> 链接标签，href为链接地址
<img src="">img> 图片标签，src为图片地址
<br> 换行标签
<p> 段落标签
<pre>pre> 段落格式化标签
<b>b> 字体加粗
<i>i> 字体倾斜
<hr> 水平线标签
<table>table> 表格标签
<caption>caption> 表格标题标签
<th>th> 表格中的页眉标签
<tbody>tbody> 表格中的主体内容标签
<tfoot>tfoot> 表格中的页脚标签
<tr>tr> 表格中的行标签
<td>td> 行标签中的单元格标签
<form>form> 表单标签
<select>select> 下拉框标签
<option>option> 下拉框的内容标签
<textarea>textarea> 文本域标签
<button>button> 按钮标签
<input type="text"> 文本框标签
<input type="password"> 密码框标签
<input type="submit"> 提交按扭标签
<input type="checkbox"> 复选框标签
<input type="radio"> 单选框标签
<input type="reset"> 重置按扭标签
<input type="image"> 图片按扭标签
<input type="hidden"> 隐藏域标签
<input type="button"> 按扭标签
<input type="file"> 文件标签
<h1>h1> 标题标签（1，2，3，4，5，6），1代表字号最大，6代表字号最小
<u>u> 下划线标签
<ol>ol> 有序列表标签
<ul>ul> 无序列表标签
<li>li> 列表项标签
<div>div> 分区标签（默认为块级元素，常用）
<span>span> 对文档中的行内元素进行组合的标签（默认为行内元素）
<iframe>iframe> 页内框架标签
2. css阶段总结
2.1 css 的三种使用方式
DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的三种使用方式title><link href="./p3.css" type="text/css" rel="stylesheet" /><style>/* Id选择器： #id的值 {} */ #p2{width: 400px; background-color: blanchedalmond;}/* 标签选择器： 标签名{}*/p{color: red;}style>head><body><p id="p1" style="width: 500px; background-color: aquamarine;">内联样式p><p id="p2">内部样式p><p id="p3">外部样式p>body>
html>2.2 css的特征
DOCTYPE html>
<html><head><meta charset="utf-8"><title>css特征title><style>h1{border: 2px dotted aqua; /*边框:宽度 类型 颜色*/color: red; /*字体颜色*/}h2{color: green;font-size: 50px;}#h3{border: 2px solid black;color: green;}h3{font-size: 50px; color: yellow !important;/*!important： 设置样式的优先级最高*/}style><link href="./p3.css" type="text/css" rel="stylesheet" />head><body><div style="background-color: red; color: white;"><p>Lorem ipsum dolor sit ametp><a href="#" style="color: white;">a标签a>div><p style="background: yellow;font-size: 20px; color: #FF0000;font-weight: bold; width: 300px; height: 100px; overflow: scroll;">Lorem ipsum dolor sit ametp><h1 style="color:green;">中秋节快到了h1><h2>中秋节是团员的节日。h2><h3 id="h3" style="color: pink;">中秋节：海上生明月，天涯共此时。h3>body>
html>
2.3 css的选择器
DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的基本选择器title><style>#ul1 li{background-color: green;list-style: none; /*去掉li标签前面符号*/margin:3px ; /*设置标签和其他标签四个方向的间距都是3px*/}/*class选择器： .className{} */.group {color: red;}#first{font-size: 30px;}/* span标签是行内元素，宽度高度由内部的内容决定。如果希望设置width ， height . 那么需要修改span标签的显示方式： display:inline-block （行内块级元素： 不换行，支持设置宽，高 , 比如img标签。）*/span{width: 100px;height: 30px;display: inline-block;background: #21448c;text-align: center; /*文字的左右居中*/line-height: 30px; /*行高：如果文字只有一行 ，然后行高等于高度 ，那么文字就垂直居中*/}b{color: white;border-left: 1px solid white;border-right: 1px solid white;
/* padding: 8px; *//*padding :四个方法的内边距(标签和内部的内容之间的间距。)*/padding-left: 6px ; /*单个方向的设置*/padding-right: 6px;}/* 分类选择器的使用 */span.three{width: 120px;}/* 分组选择器 */p , h1{border: 3px solid black;border-radius: 5px; /*设置边框为圆角*/}/* 派生选择器： 选择子孙 *//* #sel span{padding: 5px;border: 3px solid #008000;} *//* 派生选择器： 选择子 */#sel>span{padding: 5px;border: 3px solid red;}style>head><body><ul id="ul1"><li class="group" id="first">九龙坡li><li>渝中li><li>渝北li><li>江北li><li class="group">沙坪坝li>ul><ul><li>html语言li><li>css语言li><li>js语言li>ul><p><span><b>span oneb>span><span><b>span twob>span><span class="three"><b>span threeb>span>p><h1 class="three">h1标签h1><p class="three">p标签p> <div id="sel"><span>1.基本选择器：<span>a.标签选择器span><span>b.id选择器span><span>c.class选择器span>span><span>2.分组选择器span><span>3.分类选择器span><span>4. 伪类选择器<span>:linkspan><span>:hoverspan><span>:foucsspan>span>div><div style="width: 22px; height: 22px;background:url(10.jpg) no-repeat 0 0;border-radius: 2px; ">div><div style="width: 22px; height: 22px;background:url(10.jpg) no-repeat -22px 0;border-radius: 2px; ">div><div style="width: 22px; height: 22px;background:url(10.jpg) no-repeat 0px -22px;border-radius: 2px; ">div>body>
html>2.4 css 定位
relative 不脱离文档流，参考自身静态位置通过 top(上),bottom（下）,left（左）,right（右） 定位，并且可以通过z-index进行层次分级。
absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed 固定定位，这里他所固定的对像是浏览器可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
CSS中定位的层叠分级：z-index: auto | namber;
auto 遵从其父对象的定位
namber 无单位的整数值。可为负数
3. js阶段总结
3.1 js 的三种使用方式
DOCTYPE html>
<html><head><meta charset="utf-8"><title>js的三种使用方式title>head><body><button onclick="alert('hello!')">你好！button><button onclick="f1('nice to meet you.')">你好button><button id="btn3">按钮3button><button id="btn4">按钮4button><script>// 自定义函数// js是弱数据类型语言。function f1(a){alert(a)}// -- get Element By Id ,根据id获取元素, id是唯一的,所以找出来的是唯一的符合要求的一个元素。let btn = document.getElementById("btn3"); btn.onclick= function(){alert("say hi");}script><script src="4js使用.js">script>body>
html>3.2 js基本知识
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body>body>
html>3.3 js数组的使用
DOCTYPE html>
<html><head><meta charset="utf-8"><title>数组的使用title>head><body><button onclick="upSort()">升序button><button onclick="downSort()">降序button><ul><li>tomli><li>aliceli><li>tom hanksli><li>roseli><li>jackli><li>amyli><li>zarali>ul><script>// 练习： 使用循环， 数组和数组的排序 ，实现标签的内容的升序和降序的显示。// - 思路： 把li标签取出来，然后把标签的文本内容取出来，放在数组中，对数组排序，// 然后把排好序的内容，循环放在li标签中。function upSort(){// a。找到所有的li标签var list = document.getElementsByTagName("li");// b。变量li标签，把li中的文本内容获取出来，存在数组中let txts = new Array();for(let i=0 ; i<list.length ; i++){txts.push(list[i].innerText) // list[i]代表每一个li -- list[i].innerText(get操作)}// c. 对数组排序txts.sort();// d. 把排好序的内容，放在li的标签中。for(let i=0 ; i < list.length; i++){list[i].innerText = txts[i]; // set操作}}function downSort(){// a。找到所有的li标签var list = document.getElementsByTagName("li");// b。变量li标签，把li中的文本内容获取出来，存在数组中let txts = new Array();for(let i=0 ; i<list.length ; i++){txts.push(list[i].innerText) // list[i]代表每一个li -- list[i].innerText(get操作)}// c. 对数组排序 ，然后对数组逆序txts.sort();txts.reverse();// d. 把排好序的内容，放在li的标签中。for(let i=0 ; i < list.length; i++){list[i].innerText = txts[i]; // set操作}}// js的Array对象: 长度可变，数组元素可以是任意类型。可以通过数组下标的方式操作数组。// push方法可以在数组末尾增加元素， pop方法可以在数组中弹出最后一个元素。// 1. 创建数组 : 数组元素可以是任意类型。let arr1 = new Array();let arr2 =[1,2,3];console.log(arr1.length);console.log(arr1);console.log(arr1[0]);console.log(typeof(arr1)); //objectconsole.log(typeof(arr2));//objectconsole.log(arr2);arr1[0] = "abc";arr1[1] = alert; // 将alert函数的定义赋值给数组arr1[7] = 100;console.log(arr1);console.log(arr1[3]);//undefinedarr1=null; // 清空数组元素// console.log(arr1.length);//Cannot read properties of null (reading 'length')console.log(arr2.length);// 3arr2[5] = 100;console.log(arr2);// 2. push(添加元素) ,pop(取出元素) -- 操作数组的末尾// unshift(添加元素) ,shift(取出元素) -- 操作数组的首位let arr3 = new Array();arr3.push("a");arr3.push("b");arr3.push("c");console.log(arr3);let last = arr3.pop();console.log("last:" + last);console.log(arr3);let first = arr3.shift()console.log(first);arr3.unshift("A") // 数组头部插入console.log(arr3);// 3. 数组的长度可变 ：arguments// *** 定义数组的时候，如果数组只有一个参数，并且是整数的number类型，那么这个参数作为数组的长度。// 如果数组有多个参数，那么这些参数作为数组的元素。let arr4 = new Array(7);// 创建对象的时候，只有一个整数参数，那么这个参数就是数组的长度。console.log(arr4.length); // 7 let arr5 = new Array("a","b","c","d"); // 创建对象的时候，有多个参数 ,参数是数组的元素。console.log(arr5.length); // 4let arr6 = new Array("10");// 创建对象的时候，只有一个非整数参数，那么这个参数就是数组的元素。console.log(arr6.length); //1// 4. 数组的排序： js定义sort函数 （升序） --默认的排序方式是按字符串进行排序。// js定义reverse函数 -- 数组的逆序。// ** 降序： 先调用sort升序，然后reverse逆序。//[1,11,2,3,22,111] -- 按字符排序 [1,11,111,2,22 ,3]let arr7 = [1,11,2,3,22,111] ;console.log(arr7.sort()); // [1, 11, 111, 2, 22, 3]arr7=['php' , 'c++' ,'java' ,'c','jsp' ,'python']console.log(arr7.sort()); //['c', 'c++', 'java', 'jsp', 'php', 'python']console.log(arr7);// ['c', 'c++', 'java', 'jsp', 'php', 'python']console.log(arr7.reverse()); // ['python', 'php', 'jsp', 'java', 'c++', 'c']script>body>
html>3.4 js正则表达式
DOCTYPE html>
<html><head><meta charset="utf-8"><title>正则表达式title>head><body><script>/*a.能出现那些字符 [字符] ， \d表示纯数字[0-9]， \w匹配字母数字[0-9a-zA-Z] ..... b.出现的字符的个数{n} , {n,m} , +等价于{1,} , ?等价于{0,1} , *等价于{0,}c.匹配行首 ^d.匹配结尾 $e. .等价于任意内容f. \用于转义, \.表示.本身g. () 用于分组h. |表示或 i. i -忽略大小写 g - 全局查找 */// 1. 正则表达式的创建let reg = new RegExp(/^[0-9]{6}$/); // 只能是数字，并且要是6位let reg1 = /^[a-zA-Z0-9]{4,8}$/i ; // 数字字母都可以，并且最少4位，最多8位。// 2. 正则表达式相关的函数// test函数： 测试字符串是否满足正则表达式的要求，满足返回true，不满足返回false.// exec函数： 如果字符串满足正则表达式的要求，返回匹配成功的字符串(返回的是一个包含了字符串的一个数组)。let str = "abc1234djdkdfjfjlkdl";console.log(reg.test(str)); // falseconsole.log(reg1.test(str)); // trueconsole.log(reg.exec(str));console.log(reg1.exec(str)); //['abc1234', index: 0, input: 'abc1234', groups: undefined]let reg2 = /[a-zA-Z0-9]{4,8}/igconsole.log(reg2.exec(str)); // -- 行首开始找let str2 = reg2.exec(str); // -- 再次找，就从第二个符号要求的字符串开始找。因为正则表达式加了g。console.log(str2[0]);// 练习： str ="abcabc123abc123" ,reg =/[a-zA-Z0-9]{3}/ig ,然后把匹配成功的内容，找到之后，保存到数组中。str ="abcabc123abc123";reg =/[a-zA-Z0-9]{3}/iglet a1 = new Array();let substr="";while(substr=reg.exec(str)){ // 变量非空转换为true，空转换为false.a1.push(substr[0]);}console.log(a1);//['abc', 'abc', '123', 'abc', '123']// 判断字符串是否符合邮箱的规则// 邮箱的正则表达式: 邮箱是一个从头到尾都完全满足正则表达式的字符串，需要使用^限定开始，$限定结尾let email ="12@fjm@qq.com"reg1 = /\w+@\w+(\.\w+)+/ //未指定从头到尾都符合正则表达式reg1 = /^\w+@\w+(\.\w+)+$/if(reg1.test(email)){console.log("是邮箱");} else{console.log("不是邮箱");}email ="fjm@qq.cn.com"if(reg1.test(email)){console.log("是邮箱");}else{console.log("不是邮箱");}script>body>
html>3.5 js dom节点
DOCTYPE html>
<html><head><meta charset="utf-8"><title>domtitle><style>.active{color: red;}style>head><body><p id="p" >段落标签p><ul id="sheng"><li><a href="#">四川a>li><li><a href="#">重庆a>li><li><a href="#">云南a>li><li><a href="#">贵州a>li>ul><a id="bing" href="http://www.baidu.com">百度a><script>// dom : document object model - 文档对象模型// 1. 查询节点// -- document.getElementById(id) , // -- document.documentGetElementsByTagName,.document.documentGetElementsByClassName,document.documentGetElementsByName// --节点对象.各种节点查询方法let p = document.getElementById("p");// 2. 节点的名字--nodeName// -- 文档节点，节点名字： #document// -- **** 元素和属性节点，节点的名字：元素或属性名// -- 文本节点，节点名字： #textconsole.log(p.nodeName); //P(nodeName如果是标签的名字，那么是大写。)console.log(document.nodeName); // #document// if(p.nodeName == "P"){// p.style.display ="none";// }// 3. 节点的类型--nodeType// -- 文档节点，类型：9// -- 元素节点，类型：1// -- 属性节点， 类型：2// -- 文本节点， 类型：3console.log(p.nodeType); // 1console.log(document.nodeType);// 9if(p.nodeType == 1){console.log("是元素节点");}// 4. 获取节点的属性// - getAttribute(属性名)let pId = p.id;// 直接通过属性名获取属性值pId = p.getAttribute("id"); // dom中封装的查找属性的方法console.log(pId);// 5. 设置节点的属性p.setAttribute("class" , "active") ;// 增加属性//p.className = "active"; // 修改属性let a = document.getElementById("bing");a.setAttribute("href" , "http://www.taobao.com") ;// 修改属性//a.href="http://www.jd.com"// 6. 删除节点的属性//a.removeAttribute("href");p.removeAttribute("class")//p.className = "";// 7. 节点的父节点:parentNodelet parentP = p.parentNode;console.log(parentP.nodeName); // 节点的名字-BODY// 8. 节点的子节点： // --- childNodes :找到子节点，找到的节点包含元素节点和文本节点// --- children : 找到子节点，只包含元素节点// --- firstChild：第一个孩子，所有孩子中的第一个，可能是文本节点。// --- firstElementChild: 第一个孩子，代表孩子中的第一个元素节点。// --- lastChild:最后一个孩子，所有孩子中的最后一个，可能是文本节点。// --- lastElementChild：最后一个孩子，代表孩子中的最后一个元素节点。let childs = p.childNodes;console.log(childs);let ul = document.getElementById("sheng");let ulChilds = ul.childNodes;console.log(ulChilds);//包含了5个text , 4个li.let liArr = new Array();for(let i = 0 ; i < ulChilds.length ; i ++){//console.log(ulChilds[i].nodeName +":" + ulChilds[i].nodeType);if(ulChilds[i].nodeType==1){liArr.push(ulChilds[i]);}}console.log(liArr);ulChilds = ul.children;console.log(ulChilds);console.log(ul.firstChild);console.log(ul.firstElementChild);console.log(ul.lastChild);console.log(ul.lastElementChild);// 9.节点的兄弟节点// --- previousSibling： 上一个兄弟，可能是文本类型的兄弟// --- previousElementSibling , 上一个元素节点兄弟// --- nextSibling : 下一个兄弟，可能是文本类型的兄弟// --- nextElementSibling:下一个元素节点兄弟console.log(ul.previousSibling); // #textconsole.log(ul.previousElementSibling); //pconsole.log(ul.nextSibling);console.log(ul.nextElementSibling);// 练习：用节点的父子关系， 把第二个li，修改为class="active"ul.firstElementChild.nextElementSibling.setAttribute("class","active");// 用节点的父子关系，把第三个li中的a元素的href修改为http://www.baidu.comul.children[2].firstChild.setAttribute("href","http://www.baidu.com");// 用节点的父子关系，把每个li中的a元素的背景色修改为红色。let ulList = ul.children;for(let i =0 ; i< ulList.length; i ++){ulList[i].children[0].style.background="red";}script>body>
html>3.6 js dom节点的操作
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title>head><body><div>我是ul的哥哥div><ul id="sheng"><li><a href="#">1.四川a>li><li><a href="#">2.重庆a>li><li><a href="#">3.云南a>li><li><a href="#">4.贵州a>li>ul><div>我是ul的弟弟div><script>// 1. 创建节点let li = document.createElement("li");// 创建节点(得到的是一个节点对象)，创建的是li类型的节点。li.id="li5";li.innerText="5.北京"/*let li1 = "";// 这个li1是string.li1.id="li5" ;// ？？？console.log(typeof(li1));//stringconsole.log(typeof(li));;//object*/// 2. 把节点添加到dom中// --- 父节点.appendChild(创建的节点) ， 作为父节点的最后一个子节点。// --- 父节点.insertBeffore(新节点，参考节点) ，作为父节点的孩子，插入到指定节点的前面。let ul = document.getElementById("sheng");ul.appendChild(li);// 追加到末尾let li2 = ul.children[1];ul.insertBefore(li,li2); // 插入到指定位置// 3. 删除节点：节点删除之后，其子节点也被删除了// -- 父节点.removeChild(子节点) ,根据父节点，删除指定的子节点// -- 节点.remove() , 删除节点本身，其子节点也被删除了。ul.removeChild(li2);// ul.remove()// 4. 替换节点// --- 父节点.replaceChild(新节点，被替换的节点)let li00 = document.createElement("li");li00.style.border = "1px solid blue";ul.replaceChild(li00 , ul.firstElementChild)// 5.克隆节点// -- 节点.cloneNode(true): 表示克隆节点及其子节点// --节点.cloneNode(true): 表示克隆节点本身，不包含其子节点let ulCloneTrue = ul.cloneNode(true);let ulCloneFalse = ul.cloneNode(false);console.log(ulCloneTrue);console.log(ulCloneFalse);// -- 在ul的后面，添加ulCloneTrueul.parentNode.insertBefore(ulCloneTrue , ul.nextElementSibling)script>body>
html>3.7 bom对象
document , screen , history , location ,navigator …
3.8 事件和事件对象
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style>*{margin: 0;padding: 0;}span{border: 8px solid blue;border-radius: 50%;margin-top: 100px;display: inline-block;}style>head><body><span>span><script>/*1. -- 事件分为： 鼠标事件， 键盘事件，状态事件， 其他....2. -- 事件对象： event , 事件触发的时候会产生一个event对象。3. -- 事件的定义方式：a.在标签上使用on+事件名称，调用函数。b.在js代码中，通过函数绑定进行函数的调用：obj.onclick = function4. -- 事件的取消： 事件执行的函数返回值是false. 事件就取消了。5. -- 事件的执行机制：冒泡原理-- 元素的某个事件被触发了。 那么其包裹元素的同类事件也会被触发。*/// -- 键盘事件：onkeydown ,onkeyup/*document.onkeydown = function() {console.log(event);switch (event.keyCode) {case 37:alert("按左键")break;case 38:alert("按上键")break;case 39:alert("按右键")break;case 40:alert("按下键")break;default:alert("按错了")}}*/// 练习： 让网页上的span标签，根据按键的方向，让span上下左右移动(每按一次，移动5px)// 同时 asdw四个键和方向键一样的功能。let ml = 0; // 记录当前的位置let mt = 0; document.onkeyup = function(){let span = document.getElementsByTagName("span")[0];switch (event.keyCode) {case 65:case 37:ml = ml - 5; if(ml<0){ml = 0 ; }span.style.marginLeft = ml +"px";break;case 87:case 38:mt = mt - 5;if(mt < 0 ){mt = 0 ;}span.style.marginTop = mt + "px"break;case 68:case 39:ml += 100; if(ml > (screen.width- 16)){ml = screen.width -16;}span.style.marginLeft = ml +"px";break;case 83:case 40:mt = mt + 10;console.log(mt);if(mt > screen.height - 16 ){mt = screen.height - 16 ;}span.style.marginTop = mt + "px"break;default:alert("按错了")}}script>body>
html>4. jquery阶段总结
4.1 初识jquery
DOCTYPE html>
<html><head><meta charset="utf-8"><title>认识jquery对象title><script src="../js/jquery.js">script><style>img{width: 50px; height: 50px;}style>head><body><img src="../img/a.jpeg" /><img src="../img/a.jpeg" /><img src="../img/a.jpeg" /><button>变大button><button>变小button><p>1p><p>2p><p>3p><script>// 功能： 单击图片的时候，把图片的宽度，高度，修改为200px// -- $("img")选择器函数 // -- click(function)// -- $(this): 对象类型的转换. jquery的函数只能通过jquery对象调用，$(this)的目的就是把js对象this，转换为jquery对象。// -- width() , height() : 宽,高$("img").click(function(){$(this).width("200px").height("200px");})// **** 你在使用的对象是js对象，还是jquery对象： 只有jquery对象才能调用jquery中封装好的方法。// **** js对象和jquery对象的转换// **** $(js对象) ， 转换为了jquery对象。let $ps= $("p"); // 是一个dom数组for (let i = 0; i < $ps.length; i++) {//let p1 = $ps[0];// p1是js对象//console.log(p1.text());//p1.text is not a function , p1是js对象，没有text方法。//let p1 = $ps.get(i);// p1是js对象//console.log(p1.text()); //p1.text is not a functionlet $p1 = $ps.eq(i); // eq是jquery提供的获取元素的方法， 结果是一个jquery对象。console.log($p1.text()); // 调用jquery的函数}// 功能： 单击变大按钮。 然后让p中的字体变大5px .$("button").eq(0).click(function(){let $ps = $("p");let font = $ps.css("font-size"); // 获取样式的值$ps.css("font-size" , parseInt(font)+5 +"px") // 设置样式的值})script>body>
html>4.2 jquery 知识点
DOCTYPE html>
<html><head><meta charset="utf-8"><title>jquery知识点title>head><body><button>显示button><div style="width: 300px; height: 300px; background-color: red; display: none;">div><script src="../js/jquery.js">script><script>// $("button").click(function(){// $("div").show(3000,"swing" ,function(){// $("div").css("background","green");// $("div").hide(3000,"swing",function(){// $("div").show(3000,"swing");// });// })// })$("button").click(function(){$("div").show(3000,"swing")$("div").css("background","green");$("div").hide(3000,"swing")$("div").show(3000,"swing")});//setInterval(funcion , time);function fun1(k){if(k){// k不是空，就执行k()k();// 执行函数}}fun1();let i = 0 ; let timerfunction mm(a){timer = setInterval(function(){console.log("---mm被执行---"+i++ );if(i > 10 ){clearInterval(timer)if(a){a();}}},1000)}// fun1(mm);function nn(){console.log("----nn被执行----");}//要求：mm函数执行完成之后，再执行nn函数。//mm();//nn();mm(nn);script>body>
html>4.3 jquery dom 操作
DOCTYPE html>
<html><head><meta charset="utf-8"><title>title><style>.active{color: red;}style>head><body><ul class="u0"><li>重庆li><li>武汉li><li>长沙li><li>南昌li>ul><script src="../js/jquery.js">script><script>// 1.创建节点，内容是成都， 添加在武汉前面// --- $("成都 ") ,创建了节点， 节点是jquery对象。let $li = $("成都 ")$li.addClass("active") ;// 参数是类名。$li.click(function(){$li.hide()})// 2. 添加节点$("li:eq(1)").before($li);// 查找到的节点的前面，添加上新节点。// 3. 在第一个li中，添加超链接let $a =$("");$a.text("这时最热的城市 ，查看天气预报")$a.attr("href" , "http://www.baidu.com")$(".u0 li:first").append($a); //作为节点的孩子节点，添加到dom中。// 4. 找到u0的孩子们，然后切换孩子们的classlet $chs = $(".u0").children();$chs.toggleClass("active");$chs.removeClass("active");// -- 练习：把所有li中的内容获取出来，然后保存在一个数组中。let txtArr = new Array();for(let i = 0 ; i < $chs.length ; i ++){txtArr.push($chs.eq(i).text())}console.log(txtArr);// *** jquery的each函数（each遍历数组）txtArr = new Array();$chs.each(function(){// 遍历到的每个对象，用this指代， 然后 $(this) 把当前正在遍历的内容转换为jquery对象。txtArr.push($(this).text())$(this).mouseover(function(){$(this).css("color","green")})$(this).mouseout(function(){$(this).css("color","black")})})// 5. 通过最后一个li标签，找到其父节点，然后删除父节点//$("li:last").parent().remove() // remove删除节点， parent父节点// 6. 通过第二个li ，找全部自己的全部弟弟。let $sib = $("li:eq(1)").siblings(); // 找弟弟们$sib.each(function(){$(this).text( $(this).text() + "---" + $(this).text() )})// 7. 找到最后一个li，然后找最后一个li的下一个兄弟console.log($("li:last").prev().text());script>body>
html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！