前端一天入门(html；css；js；jquery)

文章目录

前端-HTML

网络传输：客户端输入URL后根据HTTP协议在服务端请求资源，服务端响应给客户端HTML（描述网页的语言），通过浏览器自带的HTML解析器进行解析

<head><!--页面标题--><title>百度一下，你就知道</title><!--设置页面的编码，防止乱码现象
charset="utf-8" 这是属性，以键值对的形式给出  k=v a=b 
--><metacharset="utf-8"/><!--简写--><!--繁写形式：content-type=text/html--><!--<meta http-equiv="content-type" content="text/html;charset=utf-8" />--><!--页面刷新效果：3秒刷新到百度页面--><!--<meta http-equiv="refresh" content="3;https://www.baidu.com" />--><!--页面作者--><metaname="author"content="msb;[email protected]"/><!--设置页面搜索的关键字--><metaname="keywords"content="马士兵教育;线上培训;架构师课程"/><!--页面描述--><metaname="description"content="马士兵教育详情页"/><!--link标签引入外部资源--><linkrel="shortcut icon"href="https://www.baidu.com/favicon.ico"type="image/x-icon"/></head>

body标签

文本与实体字符

<!--文本标签与实体字符--><!--标题标签：h1-h6  字号逐渐变小，每个标题独占一行，自带换行效果--><h5>媒体：为人父母，要不要“持证上岗”？</h5><!--横线标签
            300px ：固定宽度
            30%：页面宽度的百分比，会随着页面宽度的变化而变化
            --><hrwidth="300px"align="center"/><hrwidth="30%"align="center"/><!--段落标签：段落效果：段落中文字自动换行，段落和段落之间有空行--><p>&nbsp;&nbsp;5月&emsp;26日，“建议父母持合格&lt;父母证&gt;上岗&copy;”。</p><!--加粗倾斜下划线--><i><u><b>加粗倾斜下划线</b></u></i><!--一箭穿心--><del>你好 你不好</del><!--预编译标签：在页面上显示原样效果--><pre>
System.out.println("hello msb....");
</pre><!--换行-->
5月26日，“建议父母持合格父母证上岗”冲上微博<br/>热搜，迅速的全国两会上，全国政
<!--字体标签--><fontcolor="#397655"size="7"face="萝莉体 第二版">建议父格证上岗</font>

多媒体

<!--图片
src:引入图片的位置
width:设置宽度 height:设置高度
注意:一般高度和宽度只设置一个即可，另一个会按照比例自动适应
title:鼠标悬浮在图片上的提示语
alt:图片加载失败的提示语
--><imgsrc="img/s.jpg"width="300px"title="这是一个"alt="图片加载失败"/><!--音频--><embedsrc="music/我要你.mp3"></embed><!--视频--><embedsrc="video/周杰伦 - 说好的幸福呢.mp4"height="500px"></embed>

超链接与锚点

<!--
href:控制跳转的目标位置
target:_self  在自身页面打开   
_blank 在空白页面打开
--><ahref="">这是一个超链接02</a><!--跳转到自身页面--><ahref="https://www.baidu.com"target="_self">这是一个超链接04</a><ahref="https://www.baidu.com"target="_blank">这是一个超链接05</a><!--锚点--><!--
name：设置锚点的名称
href="文档...#锚点名称"进行跳转
--><aname="1F"></a><h1>手机</h1><p>华为p40</p><aname="2F"></a><h1>化妆品</h1><p>大宝</p><aname="3F"></a><h1>母婴产品</h1><p>奶粉</p><aname="4F"></a><h1>图书</h1><p>thinking in java</p><ahref="#1F">手机</a><ahref="#2F">化妆品</a><ahref="#3F">母婴产品</a><ahref="#4F">书籍</a>

列表

<!--无序列表:
type:可以设置列表前图标的样式
更换图标样式，借助css技术： style="list-style:url(img/act.jpg) ;"
--><h1>起床以后需要做的事</h1><ultype="square"><li>睁眼</li><li>穿衣服</li><li>上厕所</li><li>吃早饭</li><li>洗漱</li><li>出门</li></ul><!--有序列表:
type:可以设置列表的标号：1,a,A,i,I
start:设置起始标号
--><h1>学习java的顺序</h1><oltype="A"start="3"><li>JAVASE</li><li>ORACLE</li><li>MYSQL</li><li>HTML</li><li>CSS</li><li>JS</li></ol>

表格

<!--表格:
    table:表格
    tr:行
    td:单元格
    th:特殊单元格：表头效果：加粗，居中
    rowspan:行合并
    colspan：列合并

    默认情况下表格是没有边框的，通过属性来增加表框：
    border:设置边框大小
    cellspacing：设置单元格和边框之间的空隙
    align="center"  设置居中
    background 设置背景图片 background="img/ss.jpg"
    bgcolor :设置背景颜色

--><tableborder="1px"cellspacing="0px"width="400px"height="300px"bgcolor="darkseagreen"><trbgcolor="bisque"><th>学号</th><th>姓名</th><th>年纪</th><th>成绩</th></tr><tr><tdalign="center">1001</td><td>丽丽</td><td>19</td><tdrowspan="3">90.5</td></tr><tr><tdcolspan="2"align="center">2006</td><td>30</td></tr><tr><td>3007</td><td>小明</td><td>18</td></tr></table>

内嵌框架

<iframe src="URL" name="myname"></iframe>

<a href="img/java核心技术.jpg" target="myname">在myname的内嵌框架打开img/java核心技术.jpg</a>

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><iframesrc="书籍导航页面.html"height="700px"width="30%"></iframe><!--内嵌框架--><iframename="iframe_my"width="67%"height="700px"src="img/think in java.jpg"></iframe></body></html><!DOCTYPEhtml><html><head></head><body><ahref="img/java核心技术.jpg"target="iframe_my">java核</a></body></html>

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><!--框架集合：和body是并列的概念，不要将框架集合放入body中--><framesetrows="20%,*,30%"><frame/><framesetcols="30%,40%,*"><frame/><framesrc="index.html"/><frame/></frameset><framesetcols="50%,*"><frame/><frame/></frameset></frameset></html>

表单

<form action＝"url" method=get|post name="myform" ></form>
-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，有get和post两种，默认为get

https://www.baidu.com/s?wd=123123&rsv_spt=1&rsv_iqid=0xb7c24b2f08ce4098&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=ib&rsv_sug3=6&rsv_sug1=1&rsv_sug7=100

action="https://www.baidu.com/s"
内容的name=wd value=123123

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><!--定义form表单:form表单会采集包含的有效数据，提交到后端，进行交互--><!--
                        【1】action属性
http://127.0.0.1:8020/Form%E8%A1%A8%E5%8D%95/aaa?username=nana&pwd=123123
                        
                        ?之前是提交的资源的目标地址
                        ?之后是提交的具体的数据 
                        
                        Form%E8%A1%A8%E5%8D%95：指的是你的项目名字：Form表单
                        PS:可以使用在线解析工具查看：urlencode
                        aaa:目标资源 --》去当前项目下找aaa了
                        
                        ?后的内容：
                        我们写的文本框，密码框等必须要加入一个属性：name
                        多个键值对之间 ，用&符号进行拼接
                        只有放在form表单中的内容才会被收集并提交
                        
                        【2】method属性：默认情况下不写method属性的时候就相当于method="get"
                        get方式：提交数据可见，不安全，提交数据长度有限制，效率高
                        post方式 ：提交数据不可见，安全，提交数据长度没有限制，效率低
                --><formaction="aaa"method="post">
                        用户名：<inputtype="text"name="username"/><br/>
                        密码：<inputtype="password"name="pwd"/><br/><inputtype="submit"/></form></body></html>

表单元素

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><formaction=""method="get"><!--表单元素--><!--文本框:
                                input标签使用很广泛，通过type属性的不同值，来表现不同的形态。
                                readonly只读：只是不能修改，但是其他操作都可以，可以正常提交
                                disabled禁用：完全不用，不能正常提交

                                autofocus:自动获取焦点
                                required:必填项
                        --><inputtype="text"name="uname"placeholder="请录入身份证信息"/><inputtype="text"name="uname2"value="123123"readonly="true"/><inputtype="text"name="uname3"value="456456"disabled="disabled"/><!--密码框:效果录入信息不可见--><inputtype="password"name="pwd"/><!--单选按钮-->
                        性别：
                        <inputtype="radio"name="gender"value="1"checked="checked"/>男
                        <inputtype="radio"name="gender"value="0"/>女
                        
                        <!--多选按钮:
                                多个选项提交的时候，键值对用&符号进行拼接：例如：favlan=1&favlan=3
                        -->
                        你喜欢的语言：
                        <inputtype="checkbox"name="favlan"value="1"checked="checked"/>java
                        <inputtype="checkbox"name="favlan"value="2"checked="checked"/>python
                        <inputtype="checkbox"name="favlan"value="3"/>php
                        <inputtype="checkbox"name="favlan"value="4"/>c#
                        
                        <!--文件--><inputtype="file"/><!--隐藏域--><inputtype="hidden"name="uname6"value="123123"/><!--普通按钮：普通按钮没有什么效果，就是可以点击，以后学了js，可以加入事件--><inputtype="button"value="普通按钮"/><!--特殊按钮：重置按钮将页面恢复到初始状态--><inputtype="reset"/><!--特殊按钮：图片按钮--><inputtype="image"src="img/java核心技术.jpg"/><!--下拉列表
                                默认选中：selected="selected"
                                多选：multiple="multiple"
                        --><br/>你喜欢的城市：
                        <selectname="city"multiple="multiple"><optionvalue="0">---请选择---</option><optionvalue="1">哈尔滨市</option><optionvalue="2"selected="selected">青岛市</option><optionvalue="3">郑州市</option><optionvalue="4">西安市</option><optionvalue="5">天津市</option></select><!--多行文本框
                                利用css样式来控制大小不可变：style="resize: none;"
                        --><br/>自我介绍：
                        <textareastyle="resize: none;"rows="10"cols="30">请在这里填写信息。。</textarea><br/><!--label标签
                                点击label标签会根据for对应的id自动跟踪
                        --><labelfor="uname">用户名：</label><inputtype="text"name="uername"id="uname"/><!--HTML5新增:--><inputtype="email"name="email"/><inputtype="url"/><inputtype="color"/><inputtype="number"min="1"max="10"step="3"value="4"/>
                        1<inputtype="range"min="1"max="10"name="range"step="3"/>10
                        <inputtype="date"/><inputtype="month"/><inputtype="week"/><!--特殊按钮：提交按钮：具备提交功能--><inputtype="submit"/></form></body></html>

前端-CSS

选择器+样式

书写方式

就近原则

内联样式
内部样式
外部样式

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><!--内部样式--><styletype="text/css">h1{color: yellow;}</style><!--外部样式--><linkrel="stylesheet"type="text/css"href="css/mystyle.css"/></head><body><!--内联样式--><h1style="color: red;">这是一个标题</h1></body></html>

选择器

基本选择器

id选择器>class选择器>元素选择器

<!DOCTYPEhtml><html><head><styletype="text/css">/*将所有元素的样式：外边距，边框，内边距全部设置为0*/*{margin: 0px;border: 0px;padding: 0px;}<!--class选择器-->
                        .mycls{color: red;}<!--id选择器-->
                        #myid{color: yellow;}<!--元素选择器-->
                        h1{color: greenyellow;}input[type="text"][value="zhaoss1"]{background-color: yellow;}</style></head><body><h1class="mycls"id="myid">我是标题</h1>
            
                用户名：<inputtype="text"value="zhaoss1"/>
                用户名2：<inputtype="text"value="zhaoss2"/></body></html>

关系选择器

div占行，span占行内一部分

后代选择器- 父子代{ 样式}
子代选择器- 父>子代{ 样式}
子代选择器范围包含于后代选择器

伪选择器

<!DOCTYPEhtml><html><head><styletype="text/css">/*设置静止状态*/a:link{color: yellow;}/*设置鼠标悬浮状态*/a:hover{color: red;}/*设置触发状态*/a:active{color: blue;}/*设置完成状态*/a:visited{color: green;}</style></head><body><ahref="index.html">超链接</a></body></html>

浮动float

使元素脱离文档流

style="float:left/right/none"

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

消除浮动

浮动父节点添加overflow:hidden
浮动父节点添加height
被影响物体添加clear:both

定位position

静态定位static
相对定位relative- 使用：小范围/配合绝对定位使用关键：保留原来的占位position: relative;bottom: 10px;right: 20px;z-index:10;向左上移动，覆盖z-index小于10的，被大于10的覆盖
绝对定位absolute- 使用：父级节点relative定位，子级节点使用绝对定位（否则针对body进行偏移）关键：释放原来的占位
固定定位fixed

盒子模型

控制当前元素相对于外部元素的位置：margin
控制内部元素相对于当前元素的位置：padding
控制当前元素的实际内容：width;height
控制当前元素的填充色：padding+width;height

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

前端-JS

ECMAScript：JS的基础语法部分
DOM：使用document对象操作文档内容的编程
BOM：使用window对象操作浏览器行为的编程

书写方式

<!DOCTYPEhtml><html><head><!--内嵌式引入方式--><scripttype="text/javascript"></script><!--链接式引入方式--><scripttype="text/javascript"src="js/myjs.js"></script></head><body><inputtype="button"value="点我呀"onclick="fun1()"/></body></html>

数据类型

数据定义var 变量 = 值String Number boolean null undefined objectMath Date
数据运算/ mod能除尽,则默认结果就是一个整数,不能除尽,结果默认就是浮点数除零 => Infinity和0取余数 => NaN(not a number)+如果一段是字符串,就变成了文字拼接数字和 boolean类型相加 true会转变成1 false会转变成0 再做数学运算==先比较类型,如果类型一致,再比较内容,如果类型不一致,会强制转换为number再比较内容===数据类型不同直接返回false如果类型相同才会比较内容
函数/** 第一种语法格式常见* function 函数名(参数列表){js代码}* 第二种语法* var 函数名=function(参数列表){JS代码}* 第三种语法不常用了解* var 函数名=new Function('js代码')* */function fun1(){ alert("你好");}var fun2=function(){ alert("你很好")}var fun3=new Function('alert("你非常好");');/*** 1传入的实参可以和形参个数不一致 * 2如果函数中有返回值,那么直接用return关键字返回即可* */function fun1(a,b,c){alert("a:"+a);alert("b:"+b);alert("c:"+c);}//fun1(10,"hello js",false);// 少传参数 OK//fun1(1,2);// 多传参数 OK 多出来的参数相当于没传
数组/* 创建空数组 new Array();定长数组 new Array(5);var arr3=new Array("asdf",10,20.3,true);var arr4=["asdf",10,20.3,true];*//* 修改长度(length、索引)var arr = [1,2,3]; arr.length=5;arr[9]=99;*//* 遍历<script>var arr=[5,7,3,1,6,2,4,9,8];for(var i=0;i<arr.length;i++){ console.log(arr[i])}for(var i in arr){ console.log(arr[i])}</script>*//* <script>var arr=[1,2,3,4,5,6,7,8,9];var index =arr.indexOf(7);//查询元素索引的方法// 合并两个数组var children = hege.concat(stale);// 合并三个数组var family = parents.concat(brothers, children);// 合并字符串var fruits =["Banana","Orange","Apple","Mango"];var fs =fruits.join();// 移除最后一个元素var fruit=fruits.pop();// 想结尾增加元素 fruits.push("Grape");//反转数组 fruits.reverse();//删除数组第一个元素var ss =fruits.shift();//向第一个位置添加元素 fruits.unshift("火龙果");// 截取子数组 [)var citrus = fruits.slice(1,3);// 排序var numbers=[5,7,9,6,1,8,3,4,2]; numbers.sort(function(a,b){return b-a});</script>*/
object- 实例化<script>// 1.实例化对象var obj =newObject(); obj.name="张思锐"; obj.eat=function(food){ console.log(this.name+"正在吃"+food)}// 2.构造方法 functionPerson(pname,page){this.pname=pname;this.eat=function(food){ console.log(this.pname+"正在吃"+food);}}var p1=newPerson("张思锐",10);// 3.jsonvar person ={name:"晓明",eat:function(food){ console.log(this.name+"正在吃"+food)}};</script>- 原型的_proto_属性执行Object(Object对象是所有的原型)<script>// 准备一个构造方法 functionPerson(pname,page){this.pname=pname;this.page=page;this.eat=function(food){ console.log(this.page+"岁的"+this.pname+"正在吃"+food);}}//给Person的原型增加属性Person.prototype.gender="男";//给Person的原型增加一个方法Person.prototype.sleep=function(){ console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉");}//给最终原型增加属性Object.prototype.gender="男";//给Person的原型增加一个方法Object.prototype.sleep=function(){ console.log(this.page+"岁的"+this.gender+"孩儿"+this.pname+"正在睡觉");}</script>

事件

鼠标事件onclike ondblclick双击 oncontextmenu右键onmouse + down/enter/leave/over/mvove/out/up
键盘事件onkey + down/up/press
表单事件onblur失去焦点 onfocus获得焦点 onchange oninput onreset onsearch onselect onsubmit
页面加载<body onload="testFun()">

BOM

locationfunction fun1(){console.log(location.host);// 服务器的IP+端口号console.log(location.hostname);// IP console.log(location.port);// 端口号console.log(location.href);// 地址栏中具体的文字location.href="https://www.baidu.com"}
historyfunction fun1(){ window.history.forward();}function fun2(){ history.back();}function fun3(){ history.go(2); // 正整数向前跳转 * 页负整数向后跳转*页}
screenconsole.info(window.screen.width)console.info(window.screen.height)console.info(navigator.userAgent)console.info(navigator.appName)
弹窗window.alert("你好呀");//普通信息提示框 var con =window.confirm("确定要删除***?"); // 确认框var message =window.prompt("请输入3号名字","例如:小刚"); // 信息输入框
定时器<script>var intervalIDS =newArray();// [1,2,3 ]// 循环执行的定时器任务functionstartInterval(){// 2var intervalID = window.setInterval(function(){var today =newDate();var hours=today.getHours();var minutes=today.getMinutes();var seconds =today.getSeconds();var str = hours+"点"+minutes+"分"+seconds+"秒";var ta =document.getElementById("timeArea"); ta.value =str;},1000); intervalIDS.push(intervalID);}functionstopInterval(){while(intervalIDS.length >0){ window.clearInterval(intervalIDS.shift());}}var timeoutIDS =newArray();// 执行一次的定时器任务functionstartTimeout(){var timeoutID =window.setTimeout(function(){var today =newDate();var hours=today.getHours();var minutes=today.getMinutes();var seconds =today.getSeconds();var str = hours+"点"+minutes+"分"+seconds+"秒"; console.log(str)},5000); timeoutIDS.push(timeoutID);}functionstopTimeout(){while(timeoutIDS.length >0){ window.clearTimeout(timeoutIDS.shift());}}</script>

DOM

获取节点var element1 =document.getElementById("d1");var elements =document.getElementsByClassName(className);var elements =document.getElementsByTagName("input");var elements=document.getElementsByName("hobby");for(var i =0;i<elements.length;i++){ console.log(elements[i])}
操作节点属性和样式var node =document.getElementById("in1");//改变属性值node.type="button";node.value="你好我也好";//getAttribute setAttributeconsole.log(node.getAttribute("type"));node.setAttribute("value","大家好");element.style.width="200px";element.style.height="200px";element.style.border="10px solid green";
操作标签文本var element1=document.getElementById("d1");/** innerText 不包含HTML结构* innerHTML 包含HTML结构* */console.log("innerText>>>"+element1.innerText);element1.innerText="一刻也不能分割"element1.innerHTML="<h1>一刻也不能分割</h1>"element1.value="无论我走到哪里";
修改节点- 创建元素createElement()- 增加元素appendChild()- 删除元素removeChild()<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><style>#d1{border: 1px solid red;width: 80%;height: 200px;}</style><script>functionfun1(){var div1=document.getElementById("d1");// 通过JS创建标签var in1=document.createElement("input"); in1.setAttribute("type","text"); in1.setAttribute("value","请输入内容");var in2=document.createElement("input"); in2.setAttribute("type","password"); in2.setAttribute("value","123456789");var in3=document.createElement("input"); in3.setAttribute("type","button"); in3.setAttribute("value","删除");var br=document.createElement("br"); in3.onclick=function(){ div1.removeChild(in1) div1.removeChild(in2) div1.removeChild(in3) div1.removeChild(br)} div1.appendChild(in1); div1.appendChild(in2); div1.appendChild(in3); div1.appendChild(br);}</script></head><body><divid="d1"></div><inputtype="button"value="增加"onclick="fun1()"/></body></html>

前端-jQuery

页面加载

jQuery(document).ready(function(){});
$(document).ready(function({}));
$(function(){})

选择器

基本选择器

$(function(){ 
    //标签选择器 $("a")   
    //$("h3").addClass("myClass"); 
    //$("p").addClass("myClass"); 
    
    //ID选择器 $("#id")    
    //$("#h31").addClass("myClass"); 
    //$("h3#h31").addClass("myClass"); 
    
    //类选择器 $(".class") 
    //$(".red1").addClass("myClass"); 
    
    //通配选择器 $("*") 
    //$("*").addClass("myClass"); 
    
    //并集选择器$("elem1,elem2,elem3") 
    //$("#h31,span,div").addClass("myClass"); 
    
    //后代选择器$(ul li)   
    //$("p span").addClass("myClass");   
    
    //父子选择器 $(ul>li)   
    //$("p>span").addClass("myClass"); 
    
    //后面第一个兄弟元素 prev + next 
    //$("h3+p").addClass("myClass"); 
    
    //后面所有的兄弟元素 prev ~ next 
    $("h3~p").addClass("myClass"); 
})

属性选择器

$(function() {
    //[attribute] 
    //$("a").addClass("myClass"); 
    //$("a[href]").addClass("myClass"); 
    //[attribute1][attribute2] a标签里有href和title属性的
    //$("a[href][title]").addClass("myClass"); 
    //[attribute=value]   
    //$("a[href='film-2.html']").addClass("myClass"); 
    //[attribute!=value]   
    //$("a[href][href!='film-2.html']").addClass("myClass"); 
    //[attribute^=value]   
    //$("a[href^='http']").addClass("myClass"); 
    //[attribute$=value   
    //$("a[href$='htm']").addClass("myClass"); 
    //[attribute*=value] a标签里href包含mashibing
    $("a[href*='mashibing']").addClass("myClass");
});

位置选择器

 $(function(){ 
     //位置针对整个页面 
     //:first     :last   :odd   :even   
     //$("p:first").addClass("myClass"); 
     //$("p:last").addClass("myClass"); 
     //$("p:odd").addClass("myClass");//索引从0开始 奇数的索引 1 3 5 第偶数的元素
     //$("p:even").addClass("myClass"); //
     //:eq(n)     :gt(n)   :lt(n) 
     //$("p:eq(4)").addClass("myClass");   //equals 
     //$("p:lt(4)").addClass("myClass");//less   than  
     //$("p:gt(4)").addClass("myClass");//greater   than 
     //位置针对上级标签(父节点的第n个标签)
     //:first-child    :last-child   :only-child 
     //$("p:first-child").addClass("myClass"); 
     //$("p:last-child").addClass("myClass"); 
     //$("p:only-child").addClass("myClass"); 
     //:nth-child(n)   :nth-child(odd|even) :nth-child(xn+y)
     //索引从0开始 只有此处从1开始
     //$("p:nth-child(2)").addClass("myClass");
     //$("p:nth-child(odd)").addClass("myClass"); 
     //$("p:nth-child(even)").addClass("myClass"); 
     //$("p:nth-child(3n+1)").addClass("myClass");//n=0,1,2,3 
 });

表单选择器

$(function() {
    //:text   :password    :radio  :checkbox  :hidden    :file  :submit 

    //:input  匹配所有 input, textarea, select 和 button 元素 
    //var arr = $(":input"); 
    //:selected    :checked  :enabled  :disabled   
    //var arr = $(":disabled"); 
    //var arr = $(":enabled"); 
    //var arr = $(":input:not(:disabled)"); 
    //var arr = $(":checked"); 
    //var arr = $(":selected"); 
    
    /* var   arr = $(":input:visible")
    for(var i = 0; i < arr.length; i++) {
           console.info(arr[i]);
    }*/
});

DOM

使用原生JSDOM对象转换成jQuery对象方式是$(dom对象)

jQuery对象转换成DOM对象的方式是jQuery对象[0]/.get(0)

操作属性和样式$("#f1").attr("color")$("#f1").attr("color","green")$("#f1").removeAttr("color")$("#d1").css("width")$("#d1").css("width","200px")$("#d2").addClass("b")$("#d2").removeClass("b")$("#d2").toggleClass("b")// 原来有b 则删除,如果没有,则增加b
文本与增添元素$("#d1").text("<h1>牛气冲天</h1>");$("#d1").html("<h1>牛气冲天</h1>");$("#i1").val("你好");$("#d1").empty();$("#d1").remove(); // 移除当前元素本身// 创建元素var span1=$("<span></span>");// 设置文字span1.text("今天天气很好");$('#d1').append(span1)var h =$("<h3>测试文字</h3>").css("color","red").css("border","1px solid green")h.appendTo($('#d1'))$("#d1").before(span1);span1.insertBefore($("#d1"));$("#d1").after(span1);span1.insertAfter($("#d1"));
绑定和触发事件<script> //原生JS /*var div1=document.getElementById("d1") div1.onmouseover=function (){ alert("悬停") }*/ /* bind 方法绑定事件(one绑定事件一次) * 在jQuery中,事件的名称= 原始名称去掉 on * */ $("#d1").bind('mouseover',function(){ $('#d1').css("background-color",'yellow') }); /*事件名作为方法*/ $("#d1").mouseleave(function(){ $('#d1').css("background-color",'lightgreen') }); $("#d1").unbind(); 接触绑定的所有事件 $("#d1").unbind("mouseover") // 接触绑定的指定事件 $("#i1").focus()</script>
遍历var $lis =$('li')for(var i = 0;i<$lis.length;i++){ /*遍历出的每个元素是DOM对象*/ console.info($lis[i].innerText)}for(var i in $lis){ console.info($lis[i].innerText)}/*遍历所有元素的方法*/each每拿出一个元素都会执行一次内部的functioni 当前元素的所有e 当前元素 DOM对象* */$lis.each(function (i,e){ console.info(i+'>>>'+$(e).text())})$.each($lis,function (i,e){ console.info(i+'>>>'+$(e).text())})

动画效果

出现和隐藏$("#d1").show(2000,'swing',function(){ alert("动画执行结束")})$("#d1").hide(3000)$("#d1").toggle(5000) //show时hide，hide时show
上下滑动$("#d1").slideDown(2000);$("#d1").slideUp(3000)$("#d1").slideToggle(5000);
淡入淡出$("#d1").fadeIn(2000);$("#d1").fadeOut(3000)$("#d1").fadeToggle(5000);$("#d1").fadeTo(5000,0.2);// 0-1
自定义$(function(){ //$("").animate({动画内容},执行时间,动画结束后要执行的方法) $("#d1").animate({ width:"100px", height:"100px", opcity:0.5, borderRadius:"50px" },2000,function(){ alert("动画执行结束了") })})

表单验证

对于表单的提交，要给form标签绑定onSubmit事件，而不是给submit按钮绑定onClick事件,onsubmit绑定的方法时要有return关键字,绑定的方法要返回true/false
表单项内容不管输入的是字符串、数字、日期，js、jQuery、JSP接收后都是String类型
表单的验证和String对象有密切关系 length charAt(i) indexOf(“@”)
如果表单项内容为空，js收到的不是null，而是空字符串。判断条件不能写 username == null，而要写username==""或username.length ==0
验证出错要return false，验证无错要return true，并且 οnsubmit="return checkForm()

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scripttype="text/javascript"src="js/jquery.min.js"></script><script>functioncheckUsername(){var reg1=/^\D{6,}$/var username =$("#user").val();if(!reg1.test(username)){$("#usertip").html("<font color='red'>格式必须是至少六位的非数字</font>");returnfalse;}// 提示OK$("#usertip").html("<font color='green'>OK</font>")returntrue;}functioncheckPassword(){var reg2=/^\S{5,}$/var pwd =$("#pwd").val();if(!reg2.test(pwd)){$("#pwdtip").html("<font color='red'>至少为5位非空格</font>");returnfalse;}$("#pwdtip").html("<font color='green'>OK</font>");returntrue;}functioncheckRepwd(){var p1=$("#pwd").val();var p2=$("#repwd").val();if(p1.length<5|| p1 != p2){$("#repwdtip").html("<font color='red'>两次密码不一致</font>");returnfalse;}$("#repwdtip").html("<font color='green'>OK</font>");returntrue;}functioncheckEmail(){var em=$("#email").val();var regex3 =/^\w{6,}@[0-9A-Za-z]{2,}(\.[a-zA-Z]{2,3}){1,2}$/;if(!regex3.test(em)){$("#emailtip").html("<font color='red'>邮箱格式有误</font>");returnfalse;}$("#emailtip").html("<font color='green'>OK</font>");returntrue;}functioncheckForm(){returncheckUsername()&&checkPassword()&&checkRepwd()&&checkEmail();}</script></head><body><tableid="center"border="0"cellspacing="0"cellpadding="0"><formaction="http://www.baidu.com"method="get"onsubmit="returncheckForm()"><tr><td>您的姓名：</td><td><inputid="user"type="text"name="username"onblur="checkUsername()"/><divid="usertip"style="display: inline;"></div></td></tr><tr><td>输入密码：</td><td><inputid="pwd"name="pwd"type="password"onblur="checkPassword()"/><divid="pwdtip"style="display: inline;"></div></td></tr><tr><td>再输入一遍密码：</td><td><inputid="repwd"type="password"onblur="checkRepwd()"/><divid="repwdtip"style="display: inline;"></div></td></tr><tr><td>您的Email：</td><td><inputid="email"type="text"onblur="checkEmail()"/><spanid="emailtip"></span></td></tr><tr><tdcolspan="2"><inputtype="submit"value="注册"class="rb1"/></td></tr></form></table></body></html>

标签：前端 javascript html

本文转载自: https://blog.csdn.net/big_good_boy/article/details/142328487
版权归原作者 超级无敌大好人 所有，如有侵权，请联系我们删除。

前端一天入门(html；css；js；jquery)

文章目录

前端-HTML

标签

head标签

body标签

文本与实体字符

多媒体

超链接与锚点

列表

表格

内嵌框架

表单

表单元素

前端-CSS

书写方式

选择器

基本选择器

关系选择器

伪选择器

浮动float

定位position

盒子模型

前端-JS

书写方式

数据类型

事件

BOM

DOM

前端-jQuery

页面加载

选择器

基本选择器

属性选择器

位置选择器

表单选择器

DOM

动画效果

表单验证

发表评论

“前端一天入门(html；css；js；jquery)”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航