Web中的HTML、css、jQuery、js
<h2>欢迎来到宋老板和泡泡龙的<strong>爱七甜蜜</strong>的故事 </h2><hr color="red"/> <p>©宋鹏飞<em>宋老八</em><br/>泡泡龙<em> 死龙</em> <br></p> <img src="img/1.jpg" height="20%" width="20%" title="可乐" alt="小美女"/>
超链接跳转
<a href="Hs1.html" target="_self">主</a> <a href="https://cn.bing.com/" target="_blank">跳</a>
有序 无序列表 表格
<h2>水果</h2> <!--ul>li*5 tab--> <ul><li>火龙果</li> <li>小西瓜</li><li>枇杷</li> </ul> <h2>蔬菜</h2> <ol> <li>黄瓜</li> <li>西红柿</li> <li>白菜</li> </ol> <h2>自定义列表</h2> <dl> <dt>Java的特点</dt> <dd>简单安全</dd> <dt>C#的特点</dt><dd>适用于超市系统</dd> <dt>Web的特点</dt> <dd>美观</dd> </dl> <h2>表格的说用 rowspan列 colspan行s </h2> <table border="1" cellpadding="5" cellspacing="5"><tr> <th>数学</th><th>语文</th> <th>政治</th></tr><tr> <td>34</td> <td>56</td> <td>78</td></tr><tr> <td>90</td> <td>78</td> <td>100</td></tr> </table>
信息表
<form name="myForm" method="get" action="#"> <p contenteditable="true">可乐</p> <p> 用户名:<input type="text" name="username" value="张三"> </p> <p>密 码:<input type="text" name="pwd"> </p> <p> 性 别:<input type="radio" name="sex"value="男" checked="男"/>男 <input type="radio" name="sex"value="女s"/>女 </p> <p> 个人爱好:<input type="radio" name="hobby" value="篮球" checked="checked"/>篮球 <input type="radio" name="hobby" value="乒乓球" checked=""/>乒乓球 <input type="radio" name="hobby" value="羽毛球" checked=""/>羽毛球 </p> <p> 星期:<select name="week" > <option value="1">星期一</option> <option value="2">星期二</option> <option value="3">星期三</option> <option value="4">星期四</option> <option value="5">星期五</option> <option value="6">星期六</option> <option value="7">星期日</option> </select> <input type="hidden" name="user" value="张三"> </p> <p> 多行文本框:<textarea name="myText" rows="6" cols="10"> 这个是一个文件协议、。。。。。。。。。。。。。。。 </textarea> </p> <p> 上传文件:<input type="file" name="file1"> </p> <p> <input type="submit" name="sub" value="提交" disabled="disabled"> <input type="reset" name="rst" value="重置"> <input type="button" name="btn" value="普通按钮"> </p> </form>
音频
城市:<input list="cities"/> <datalist id="cities"> <option value="北京">北京</option> <option value="上海">上海</option><option value="杭州">杭州</option> </datalist><p>我们每天<time>17:00</time>下班 </p> <p>我们刚过完<time datetime="2022-2-14"><mark>情人节</mark></time> </p> <audio src="" controls>
css美化
<span>行内元素
div块级元素 块级中可以包含行内元素 反之则不符合逻辑
概念: Cascading style Sheet 级联样示表
优先级：行内样式 内部样式表
基本选择器: 标签选择器 < 类选择器 < ID选择器 一般不遵循就近原则
标签选择器 <h1> <h6> <p> <img> 类选择器 .class{font-size:60px;} . ID选择器 #id{font-size:60px;} #
层次选择器 （演示示例5高级选择器）
E F 后代选择器(包括子选择器) 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 E>F 子选择器 E+F 相邻兄弟选择器 E~F 通用兄弟选择器
属性选择器
E[attr] E[attr=val] E[attr^=val] E[attr$=val] E[attr*=val]
/*属性选择器*/
p[id=one]{
background-color: #3a6587;
}
//以e结尾的id
p[id*=e]{
background-color:red;
}
//以s开头的id
p[id^=s]{
background-color:red;
}
p[id$=e]{
background-color:red;
}
css优势:
1.内容与表现相分离 2.网页的表现统一,容易修改 3.丰富的样式,使得页面布局更加灵活 4.减少网页代码量,增加网页的浏览速度,节省网络宽带 5.运用独立于页面的css,有利于网页被搜索引擎收录
#####
css的应用 css代码写在<head>的<style>标签中
<style type="text/css"> /*添加CSS样式:span凸显出来*/ span{ font-size: 14px; color: red; }
</style>
css的外部引入方式
链接式
<title>CSS不同引入方式</title>
<!-- 链接式引入外部CSS文件 -->
<link type="text/css" href="css/style.css" rel="stylesheet">
导入式
@import url("css/style.css")
display 控制元素的显示和隐藏 块级元素和行内元素的转化
none 设置元素不会被显示 inline 元素会被显示为内联(行内)元素 block 元素会被显示为块级元素 inline-block 行内块元素 拿我笔记还拿我代码你个low龙
/* div由块元素转换为行内元素 */ display: inline; /*行内块元素*/ display: inline-block;
font- weight属性
normal 文本正常显示 italic 文本斜体 oblique 文本倾斜
font属性 字体属性顺序 风格 粗细 大小 类型
text-decoration属性 文本装饰
none underline 定义文本下划线. overline 定义文本上划线. blink 定义闪烁的文本.
background-repeat属性
repeat 沿水平线和垂直方向重复. no-repeat 背景图像将仅显示一次. repeat-x 背景图像将在水平方向重复. repeat-y 背景图像将在垂直方向重复.
超链接伪类
标签名:伪类名{声明}
a:link 未单击访问超链接样式 a:visited 单击访问后超链接样式 a:hover 鼠标悬浮其上的超链接样式 a:active 鼠标单击未释放的超链接样式
a{
text-decoration: none;
color: #3a6587;
}
a:hover{
text-decoration: underline;
color: red;
}
盒子模型
Margin(外边距) - 清除边框外的区域，外边距是透明的。 margin:0px auto; 网页居中对齐 必要条件：块元素 固定宽度
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
border-style边框样式
none dotted 点线 dashed 虚线 soild实线 double两个边框
//泡泡龙 background-repeat repeat：沿水平和垂直两个方向平铺 no-repeat：不平铺，即只显示一次 repeat-x：只沿水平方向平铺 repeat-y：只沿垂直方向平铺 border - top - color border - right - color border - bottom - color border - left - color 上边框颜色 右边框颜色下边框颜色 左边框颜色 四个边框为同一颜色上、下边框颜色：#369左、右边框颜色：#000上边框颜色：#369左、右边框颜色：#000 下边框颜色：#f00 上、右、下、左边框颜色： #369、#o00、#f00、#0of 演示示例13：盒子模型﹣ border & margin border - top - color :#369;border - right - color :#369;border - bottom - color :#fae45b;border - left - color :#efcd56;border - color :#eeff34;border - color :#369#000;border - color border - color :#369#o00#fo0;border - color :#369#000#f00#o0f; border - style none dotted 点线dashed 虚线solid 实线double 两个边框border - top - style : solid ;border - right - style : solid ;border - bottom - style : solid ; border - left - style : solid ;border - style : solid ;border - style : solid doted ;border - style : solid dotted dashedborder - style : solid dotted dashed double ; 网页居中margin:0px **auto**
浮动-float属性
left 元素像左边移动 right 元素像右边移动
解决父级边框塌陷的方法
1.设置父元素的高度 2.浮空元素后面加空div 3.父级后添加伪类 ** 4.父级添加overflow属性
overflow属性
visible 默认值 内容不会被修剪，呈现在盒子之外 hidden 内容不会被修剪，并且其余内容是不可见的 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看内容 auto 如果内容被修剪，但是浏览器会显示滚动条以便查看内容
定位
父级用相对定位 子级用绝对定位
postion属性
static 没有定位 relative 相对定位 absolu 绝对定位 fixed 固定定位 属性：left right top bottom
相对定位的特性 ■相对于自己的初始位置来定位 ■元素位置发生偏移后，它原来的位置会被保留下来 ■层级提高，可以把标准文档流中的元素及浮动元素盖在下边◆相对定位的使用场景 相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
绝对定位的特性 ■绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位 元素位置发生偏移后，原来的位置不会被保留 层级提高，可以把标准文档流中的元素及浮动元素盖在下边设置绝对定位的元素脱离文档流 绝对定位的使用场景 一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
3.固定定位99 fixed6 ■相对于浏览器窗口来定位 ■偏移量不会随滚动条的移动而移动 使用场景 ■一般在网页中被用在窗口左右两边的固定广告。返回顶部图表、吸顶导航栏 Z-index z-index属性值：整数，默认值为0 设置了position属性时，z-index属性可以设置个元素之间的重叠高低关系 z-index值大的层位于其值小的层上方
relative属性
top left right bottom
布局
header 页面或页面中某一个区块的页眉，通常是一些引导和导航信息 main 规定文档的主要内容 nav 定义页面导航链接 section 页面中的一个内容区块，通常由内容及其标题组成 article 代表一个独立的、完整的相关内容块，可独立于页面其它内容使用 aside 非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容 footer 页面或页面中某一个区块的脚注
Canvas 概念
HTML5的 canvas 元素使用 JavaScript 在网页上绘制图像 canvas 用于绘制图形（画布） canvas 元素本身没有绘制能力，仅仅是图形的容器必须使用脚本完成实际的绘图任务 ◆ canvas 拥有多种绘制矩形、路径、圆形、字符以及添加图像的方法
input属性:
placeholder requiresd pattern 输入的内容必须符合正则表达式所指的规则，否则就不能提交表单
为什么要进行表单验证
好处 ：
减轻服务器压力 保证数据的可行性和安全性
javaScript基础
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
JavaScript特点:
1.向HTML页面中添加交互行为 2.脚本语言，语法和Java类似 3.解释性语言，边执行边解释
JavaScript组成 :
ECMAScript
ECMAScript是一种语法标准
语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象
编码遵循ECMAScript标准
DOM
Browser Object Model（浏览器对象模型）
提供了独立于内容与浏览器窗口进行交互的对象
BOM
Document Object Model（文档对象模型）
是HTML文档对象模型（HTML DOM）定义的一套标准方法，用来访问和操纵HTML文档
核心语法
变量
语法约定
输入 输出
alert("提示信息");
prompt("提示信息", "输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色");
注释
单行注释以// 开始，以行末结束
多行注释以 /* 开始，以 */ 结束，符号 /*…… */ 指示中间的语句是该程序中的注释
控制语句
数据类型
undefined null number boolean string object
数组
| 类别 | 名称 | 描述 |
|---|---|---|
| 属性 | length | 设置或返回数组中元素的数目 |
| 方法 | join( ) | 把数组的所有元素放入一个字符串 |
| sort() | 对数组排序 | |
| push() | 向数组末尾添加一个或更多**元素，并返回新的长度** |
为数组元素赋值
var fruit= new Array("apple", "orange", " peach","banana");
var fruit= ["apple", "orange", " peach","banana"];
var fruit = new Array(4);
fruit [0] = " apple ";
fruit [1] = " orange ";
fruit [2] = " peach ";
fruit [3] = " banana ";
运算符号typeof
返回值:
undefined：变量被声明后，但未被赋值
string：用单引号或双引号来声明的字符串
boolean：true或false
number：整数或浮点数
object：JavaScript中的对象、数组和null
JavaScript中常用运算符
| 算术运算符 | + - * / % ++ — |
|---|---|
| 赋值运算符 | = += -= |
| 比较运算符 | > < >= <= == != === !== |
| 逻辑运算符 | && || ! |
<script type="text/javascript">var num=1;var num2="1";document.write("数值是否相等:"+(num==num2)+"<br/>"); //等于document.write("数值是否相等:"+(num=num2)+"<br/>");document.write("数值是否相等:"+(num!=num2)+"<br/>"); //不等于document.write("数值是否相等:"+(num!==num2)+"<br/>"); //不绝对等于document.write("严格数值是否相等:"+(num===num2)); //绝对等于</script>
function 自定义函数
属性
| 名称 | 说明 |
|---|---|
| onload | 一个页面或一幅图像完成加载 |
| onclick | 鼠标单击某个对象 |
| onmouseover | 鼠标指针移到某元素上 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
javaScript基础 操作BOM&DOM
js中所有事物都是对象 对象:内置对象 自定义对象
Math对象
ceil() 对数进行上舍下(向上取 floor() 对数进行下舍入(向下取) round() 把数舍入为最接近的整数 random() 返回0
document.write("向上取整:"+Math.ceil(23.8)+"<br/>");
document.write("向上取整:"+Math.ceil(-23.8)+"<br/>");
document.write("向下取整:"+Math.floor(34.5)+"<br/>");
document.write("向下取整:"+Math.floor(-34.5)+"<br/>");
document.write("产生0-1(不包含)的随即数:"+Math.random()+"<br/>");
document.write("四舍五入:"+Math.round(23.7)+"<br/>");
document.write("四舍五入:"+Math.round(-23.7)+"<br/>");
初始化日期
var today=new Date(); //获取当前日期
var hour=today.getHours();
var minute=today.getMinutes();
var second=today.getSeconds();
var time=hour+":"+minute+":"+second;document.write("当前时间是:"+time);
Date对象常用方法
getDate() 返回 Date 对象的一个月中的每一天，其值介于1～31之间 getDay() 返回 Date 对象的星期中的每一天，其值介于0～6之间 getHours() 返回Date对象的小时数，其值介于0～23之间 getMinutes() 返回Date 对象的分钟数，其值介于0～59之间 getSeconds() 返回 Date 对象的秒数，其值介于0～59之间 getMonth() 返回Date对象的月份，其值介于0～11之间 getFullYear() 返回 Date 对象的年份，其值为4位数 getTime() 返回自某一时刻（1970年1月1日）以来的毫秒数
定时函数
setTimeout(); 在指定的毫秒数后调用函数或计算表达式. var myTime=setTimeout("disptime",1000);
var today=new Date(); //获取当前日期
var hour=today.getHours();
var minute=today.getMinutes();
var second=today.getSeconds();
var time="<h2>"+hour+":"+minute+":"+second+"</h2>";
document.getElementById("displayTime").innerHTML=time;
setTimeout("display()",1000);
clearTimeout() 阻止函数的执行
setInterval(); 可按照指定的周期(以毫秒计)来调用函数或计算表达式
浏览器对象模型
对象名称 说明 window 窗口对象，可以用来控制当前窗口，或打开新的窗口 screen 屏幕对象,获取屏幕相关信息 navigator 浏览器对象，通过这个对象可以判定用户所使用的浏览器history 历史对象，可以用来前进或后退一个页面 location 地址对象，可以用来获取当前URL的信息 JavaScript计时事件 在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行
windows对象常用属性及方法
history 包含浏览器的历史,有关历史访问过的URL的信息 location 用于获得当前页面的URL,并把浏览器重定向倒新的页面 window.属性名="属性值"
window对象常用方法
方法名称 说明 prompt( ) 显示可提示用户输入的对话框 alert( ) 显示带有一个提示信息和一个确定按钮的警示框 confirm( ) 显示一个带有提示信息、确定和取消按钮的对话框 close( ) 关闭浏览器窗口 open( ) 打开一个新的浏览器窗口，加载给定URL所指定的 文档 setTimeout( ) 在指定的毫秒数后调用函数或计算表达式 setinterval( ) 按照指定的周期(以毫秒计)来调用函数或表达式
confirm()方法
confirm()：将弹出一个确认对话框 confirm("对话框中显示的纯文本”)
confirm()与alert 0、prompt()区别
alert( ) 一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( ) 两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( ) 一个参数，确认对话框，显示提示对话框的消息、 “确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用
history对象
banck() 加载前一个URL forword() 加载后一个URL go() 加载histor对象列表中的某个URL
location对象
host 设置或返回主机名和当前URL的端口号 hoostname 设置或返回当前URL的主机名 href 跳转和刷新本页
reload 刷新
Document对象
referrer 返回载入当前文档的URL URL 返回当前文档的URL
document对象的常用方法
名称 说明
| getElementByld() | 返回对拥有指定id的第一个对象的引用 | 对象的id唯一 |
|---|---|---|
| getElementsByName() | 返回带有指定名称的对象的集合 | 相同name属性 |
| getElementsByTagName() | 返回带有指定标签名的对象的集合 | 相同的元素 |
| write() | 向文档写文本、HTML表达式或JavaScript代码 |
//getElementByld()的应用
// 演示效果
document.getElementById("bookName").innerHTML="<h2>书名：平凡的世界</h2>";
// ******纯文本
document.getElementById("bookName").innerText="书名：平凡的世界";
//getElementsByName()的应用
var seasons=document.getElementsByName("season"); //根据名字来拿数据
var str="";
for (var i=0; i<seasons.length; i++){
str+=seasons[i].value+"  ";}
document.getElementById("replace").innerHTML=str;
//getElementsByTagName()的应用
var inputs=document.getElementsByTagName("input");
var str="";
for (var i=0; i<inputs.length; i++){
str+=inputs[i].value+" ";
}
document.getElementById("replace").innerHTML=str;
javascript操作DOM
节点
DOM每个东西都是节点 文档本身就是一个文档对象，document 对象是 HTML 文档的根节点 所有 HTML 元素都是元素节点 所有 HTML 属性都是属性节点 插入到 HTML 元素中的文本是文本节点 注释是注释节点
访问节点
| getElementByld() | 返回对拥有指定id的第一个对象的引用 | 对象的id唯一 |
|---|---|---|
| getElementsByName() | 返回带有指定名称的对象的集合 | 相同name属性 |
| getElementsByTagName() | 返回带有指定标签名的对象的集合 | 相同的元素 |
根据层次关系范围跟节点
| 属性名称 | 描述 |
|---|---|
| parentNode | 返回节点的父节点 |
| childNodes | 返回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 下一个节点 |
| previousSibling | 上一个节点 |
| 属性名称 | 描述 |
|---|---|
| firstElementChild | 返回节点的第一个子元素节点 |
| lastElementChild | 返回节点的最后一个子元素节点 |
| nextElementSibling | 返回指定元素之后的下一个兄弟元素（相同节点树层中的下一个元素节点） |
| previousElementSibling | 返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点） |
节点信息
nodeName 节点名称 nodeValue 节点值 nodeType 节点类型
| 节点类型 | NodeType**值** |
|---|---|
| 元素element | 1 |
| 属性attr | 2 |
| 文本text | 3 |
| 注释comments | 8 |
| 文档document | 9 |
创建和插入节点
| 名称 | 描述 |
|---|---|
| createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
| appendChild( ) | 向节点的子节点列表的末尾添加新的子节点 |
| insertBefore( A,B ) | 把A节点插入到B节点之前 |
| cloneNode(deep) | 创建指定的节点的精确拷贝. 参数可选，如果是 true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点 |
删除和替换节点
| 名称 | 描述 |
|---|---|
| removeChild( node) | 从子节点列表中删除某个节点 |
| replaceChild( newNode, oldNode) | 将某个子节点替换为另一个。新节点可以是文本中已存在的，或者是新创建的 |
style属性
| 名称 | 描述 |
|---|---|
| onclick | 当用户单击某个对象时调用事件 |
| onmouseover | 鼠标移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousedown | 鼠标按钮被按下 |
| 类别 | 属性 |
|---|---|
| 背景 | backgroundColor、backgroundImage、backgroundRepeat |
| 文本 | fontSize、fontWeight、textAlign、textDecoration、font、color |
| 边距 | padding、paddingTop 、paddingBottom、paddingLeft、paddingRight |
| 边框 | border、borderTop、borderBottom、borderLeft、borderRight |
获取元素位置
| scrollTop | 返回匹配元素的滚动条的垂直位置 |
|---|---|
| scrollLeft | 返回匹配元素的滚动条的水平位置 |
edocument.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;
JQuery基础
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片、**flash、视频等）才能执行** | 网页中所有**DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完** |
| 编写个数 | 同一页面不能同时编写多个 | 同一页面能同时编写多个 |
| /简化写法 | 无 | $(function(){ //**执行代码** }) ; |
jQuery基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器
| 标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有2元素 |
|---|---|---|---|
| 类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
| ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为*title的元素 |
| 并集选择器 | selector1,selector2,...,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
| 全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
//标签选择器
$(document).ready(function(){$("dt").click(function(){$("dd").css("display","block"); });$("h1").css("color","blue");
})
//类选择器$(".price").css({"background":"#efefef","padding":"5px"});
//ID选择器 $("#author").css("color","#083499");
//并集选择器
$(".intro,dt,dd").css("color","#ff0000");
//全局选择器$("*").css("font-weight","bold");
层次选择器
| 名称 | 语法构成 | 描述 | 示例 |
|---|---|---|---|
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant（后代）元素 | $("#menu span" )选取#menu下的元素 |
| 子选择器 | parent>child | 选取parent元素下的child（子）元素 | $(" #menu>span" )选取#menu的子元素 |
| 相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻元素之后的同辈元素 |
| 同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取元素之后所有的同辈元素 |
//后代选择器
$(".textRight p").css("color","red");
//子选择器
$(".textRight>p").css("color","green");
//相邻元素选择器
$("h1+p").css("text-decoration","underline");
//同辈选择器
$("h1~p").css("text-decoration","underline");
属性选择器
| 语法构成 | 描述 | 示例 |
|---|---|---|
| [attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^='en']" )选取href属性值以en开头的元素 |
| [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素 |
| [attribute*=value] | 取给定属性是以包含某些值的元素 | $(" [href* ='txt']" )选取href属性值中含有txt的元素 |
$(function () {//a标签带有class属性的元素$("#news a[class]").css("background","#c9cbcb"); //a标签class属性等于more的元素(精确语)$("#news a[class=more]").css("background","green");//a标签class属性以h开头的元素$("#news a[class^=h1]").css("background","yellow");//a标签class属性以st结尾的元素$("#news a[class$=t]").css("background","blue");//a标签href属性包含www的元素$("#news a[href*=www]").css("background","#FF3CA4");
});
基本过滤选择器
| 语法 | 描述 | 示例 |
|---|---|---|
| :first | 选取第一个元素 | $(" li:first" )选取所有元素中的第一个元素 |
| :last | 选取最后一个元素 | $(" li:last" )选取所有元素中的最后一个元素 |
| :not(selector) | 选取去除所有与给定选择器匹配的元素 | $(" li:not(.three)" )选取class不是three的元素 |
| :even | 选取索引是偶数的所有元素（index从0开始) | $(" li:even" )选取索引是偶数的所有元素 |
| :odd | 选取索引是奇数的所有元素（index从0开始） | $(" li:odd" )选取索引是奇数的所有元素 |
| 语法 | 描述 | 示例 |
|---|---|---|
| :eq(index) | 选取索引等于index的元素（index从0开始） | $("li:eq(1)" )选取索引等于1的元素 |
| :gt(index) | 选取索引大于index的元素（index从0开始） | $(" li:gt(1)" )选取索引大于1的元素（注：大于1，不包括1 |
| :lt(index) | 选取索引小于index的元素（index从0开始） | $(“li:lt(1)” )选取索引小于1的元素（注：小于1，不包括1 |
| :header | 选取所有标题元素，如h1~h6 | $(":header" )选取网页中所有标题元素 |
| :focus | 选取当前获取焦点的元素 | $(":focus" )选取当前获取焦点的元素 |
| :animated | 选择所有动画 | $(":animated" )选取当前所有动画元素 |
$(function () {$(":header").css("background","#2a65ba").css("color","#ffffff");$(".contain li :not(:last)").css({"border-bottom":"1px dashed gray"});$(".contain ul li:first").css("font-size","16px").css("color","red");$(".contain ul li:even").css("color","#f0f0f0");$(".contain ul li:lt(2)").css("color","#708b02");$(".contain ul li:gt(3)").css("color","#b66302");
})
//显示和隐藏$(document).ready(function () {$("#show").click(function () {$("p:hidden").show();});$("#hide").click(function () {$("p:visible").hide();})})
//使用find查询$("#play ol>li").mouseover(function () {$(this).find("p:hidden").show();});$(" #play ol>li").mouseout(function () {$(this).find("p:visible").hide();});
JQuery操作css样式
JQuery中的DOM操作
//追加样式
$(selector).addClass(class); 或 $(selector).addClass(class1 class2 ....classN);
//移除样式
$(selector).removeClass(class); 或 $(selector).removeClass(class1 class2 ....classN);
//例子:$(function () {$("h2").mouseover(function () {$("p").addClass("content border");}).mouseout(function () {$("p").removeClass("content border");})})
切换样式 toggleClass()
模拟了addClass()与removerClass实现样式切换的过程
$("h2").click(function() {$("p").toggleClass("content border");
});
判断是否含指定的样式
//hashClass()方法来判断是否包含指定的样式
$(selector).hashClass(class);
$(function () {$("h2").mouseover(function () {if (!$("p").hasClass("content border")){$("p").addClass("content border");}}).mouseout(function () {if ($("p").hasClass("content border")){$("p").removeClass("content border");}
});
html()和text()方法的区别
| 语法格式 | 参数说明 | 功能描述 |
|---|---|---|
| html( ) | 无参数 | 用于获取第一个匹配元素的HTML内容或文本内容 |
| html(content) | content为元素的HTML内容 | 用于设置所有匹配元素的HTML内容或文本内容 |
| text( ) | 无参数 | 用于获取所有匹配元素的文本内容 |
| text (content) | content为元素的文本内容 | 用于设置所有匹配元素的文本内容 |
属性值操作
val()可以获取或设置元素的value的属性值
创建节点元素
工厂函数$()用于获取或创建节点
$(selector) 通过选择器获取节点 $(element) 把DOM节点转化成JQuery节点 $(html) 使用html字符串创建JQuery节点
元素内部插入子节点
| 语法 | 功能 |
|---|---|
| append(content) | $(A).append(B)**表示将B追加到A中** 如：**$("ul").append($newNode1);** |
| appendTo(content) | $(A).appendTo(B)**表示把A追加到B中** 如：**$newNode1.appendTo("ul");** |
| prepend(content) | $(A). prepend (B)**表示将B前置插入到A中** 如：**$("ul"). prepend ($newNode1);** |
| prependTo(content) | $(A). prependTo (B)**表示将A前置插入到B中** 如：**$newNode1. prependTo ("ul");** |
元素外部插入同辈节点
| 语法 | 功能 |
|---|---|
| after(content) | $(A).after (B)**表示将B插入到A之后** 如：**$("ul").after($newNode1);** |
| insertAfter(content) | $(A). insertAfter (B)**表示将A插入到B之后** 如：**$newNode1.insertAfter("ul");** |
| before(content) | $(A). before (B)**表示将B插入至A之前** 如：**$("ul").before($newNode1);** |
| insertBefore(content) | $(A). insertBefore (B)**表示将A插入到B之前** 如：**$newNode1.insertBefore("ul");** |
复制节点
clone()用于复制某个节点
替换节点
replaceWith()和replaceAll()用于替换某个节点
获取与设置元素属性
attr()用来获取与设置元素属性
删除元素属性
removerAttr()用来删除元素的属性
<script type="text/javascript">$(function () {var $li=$("<li>刘翔:北京办东奥，大家的热情超乎想想!</li>");var $li2=$("<li> 马龙：北京申冬奥是个非常棒的机会！加油！</li>");// 添加子节点// $("ul").append($li);// $("ul").prepend($li2);//添加兄弟节点// $("ul li:last").after($li);// $("ul li:first").before($li2);//添加字节点// $li.appendTo($("ul"));// $li2.prependTo($("ul"));//添加兄弟节点// $li.insertAfter($("ul li:eq(3)"));// $li2.insertBefore($("ul li:eq(0)"));//删除子节点// $("ul li :eq(1)").remove();// $("ul li :eq(1)").empty();//替换节点// $("ul li:first").replaceWith($li);// $($li2).replaceAll("ul li:last");//复制节点// $("ul li:first").click(function () {// $(this).clone(true).appendTo("ul");// });// $("ul li:eq(1)").click(function () {// $(this).clone(false).appendTo("ul");// })})</script>
//删除元素属性<script>$(function () { alert($("img").attr("src"));$("img").attr({"width":"160","height":"99"});$("img").removeAttr("alt");alert($("img").attr("alt"));})</script>
节点遍历
遍历子元素
children()方法可以用来获取元素的所有子元素
遍历同辈元素 jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
| 语法 | 功能 |
|---|---|
| next([expr]) | 用于获取紧邻匹配元素之后的元素 $("li:eq(1)").next().addClass("orange"); |
| prev([expr]) | 用于获取紧邻匹配元素之前的元素 $("li:eq(1)").prev().addClass("orange"); |
| slibings([expr]) | 用于获取位于匹配元素前面和后面的所有同辈元$("li:eq(1)").siblings().addClass("orange"); |
遍历前辈元素
jQuery中可以遍历前辈元素
parent()：获取元素的父级元素
parents()：元素元素的祖先元素
其他遍历方法
each( ) ：规定为每个匹配元素规定运行的函数
end( )**：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态**
CSS-DOM操作
除css()外，还有获取和设置元素高度、宽度等的样式操作方法
| 语法 | 功能 |
|---|---|
| css() | 设置或返回匹配元素的样式属性 |
| height([value]) | 设置或返回匹配元素的高度 |
| width([value]) | 设置或返回匹配元素的宽度 |
| offset([value]) | 返回以像素为单位的**top和left坐标。仅对可见元素有效** |
| offsetParent**( )** | 返回最近的已定位祖先元素。定位元素指的是元素的**CSS position值被设置为relative、absolute或fixed的元素** |
| position( ) | 返回第一个匹配元素相对于父元素的位置 |
| scrollLeft**([position])** | 参数可选。设置或返回匹配元素相对滚动条左侧的偏移 |
| scrollTop**([position])** | 参数可选。设置或返回匹配元素相对滚动条顶 |
JQuery事件与特效
bind绑定事件 unbind移出事件
//绑定多个事件
$(function () {$(".on").bind("mouseover",function () {$(".topDown").show();}).bind("mouseout",function () {$(".topDown").hide();})
$ (".on").bind({mouseover:function () {$(".topDown").show();},mouseout:function () {$(".topDown").hide();}})})
//unbind移出事件$("#del").click(function(){$("#nav li:first").unbind();});
Tab切换页面
$(function () {$("#nav li:first").bind("click",pp1=function () {$(".taskContent").css("background","#26a6e3");}).bind("click",ly1=function () {$("#dayTask").show();$("#growTask").hide();});
$("#nav li:last").bind("click",pp2=function () {$(".taskContent").css("background","#ff9400");}).bind("click",ly2=function () {$("#dayTask").hide();$("#growTask").show();});
// 解除绑定 删除其中内容$("#del").click(function(){$("#nav li:first").unbind("click", content1)});// 解除绑定 不让其换页面$("#del").click(function(){$("#nav li:first").unbind();});})
复合事件
hover方法() 相当于mouseover与mouserout事件的组合
$(".on").hover(function () {$(".topDown").show();},function () {$(".topDown").hide();})
});
toggele()方法用于模拟鼠标连续click点击事件
不带参数与show()和hide()方法作用一样
改变元素的透明度
fadeIn fadeOut
改变元素的高度
slideDown()可以使元素逐步延伸展示 slideUp()则使元素逐步缩短直至隐藏
Web中的HTML、css、jQuery、js相关推荐
- html引入css js,html中如何调用css和js？
html中如何调用css和js?下面本篇文章就来给大家介绍一下在html中调用css和js的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在HTML中调用css的方法 行内样 ...
- ci框架中引入css,php ci框架中加载css和js文件失败的原因和解决方法
php ci框架中加载css和js文件失败的原因和解决方法 发布时间:2021-07-01 12:08:38 来源:亿速云 阅读:50 作者:chen 本篇内容介绍了"php ci框架中加载 ...
- HTML中引入外部CSS和JS
<!DOCTYPE html> <html> <head> <title></title> <!-- jquery库 --> & ...
- web标准---html、css、js分离
简单的说,就是HTML.CSS.JavaScript这三者分离.WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为 ...
- MVC发布后项目存在于根目录中的子目录中时的css与js、图片路径问题
加载固定资源js与css <script src="@Url.Content("~/Scripts/js/jquery.min.js")" type=&q ...
- WEB 开发 ：HTML+CSS+jquery制作企业网站必备教程
制作计划步骤 1.制作头部导航栏->用header标签写 然后用ul li标签制作导航栏部分实现鼠标经过加深字体颜色 2.制作轮播图 用jquery实现轮播图每2.5秒自动播放 实现鼠标点击左右 ...
- 好程序员web前端分享用CSS和JS打造一个简单的图片编辑器
本文主要是利用 CSS的 filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先来探讨一下 filter. 首先来说 ...
- html 中引入外部 css 、js 文件
1. 引入 css 文件 引入外部 css 文件代码如下,css文件引入代码应放在 <head></head> 中. <!-- 本地相对路径," ../ &qu ...
- django自动转化前端模板中static的css，js引用
在导入前端模板时,总是要手工处理所有引用,这里写一份代码,解决这个问题: import redef change_static(script_origin: str):script_origin = ...
- 前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
最新文章
- 《OpenCV3编程入门》学习笔记5 Core组件进阶（四）图像对比度、亮度值调整
- Apache服务器和tomcat服务器有什么区别？
- Spring Boot项目开启异步使用多线程完整代码案例
- JavaScript进阶2-学习笔记
- linux下GPRS模块的应用程序
- The Last Non-zero Digit POJ - 1150（n!mod p）
- VINS简化版本 梳理
- Flutter中富文件标签的解决方案
- python类库31[使用minidom读写xml]
- ajax请求上传数组
- kafka 基础知识梳理-kafka是一种高吞吐量的分布式发布订阅消息系统
- ide进行php编程快捷键,PHP IDE phpstorm 快捷键
- 关于初级java程序员面试题总结（每月更新中）
- Qt开发 之 抓取崩溃信息（读这一篇就够了）
- 电脑只能上QQ不能开网页
- Tensorflow-gpu2.0.0安装【显卡型号：GTX1050 TI】
- linux 剪切合并文件夹,使用PDF-Shuffler拆分和合并PDF文件[Linux] | MOS86
- CREO5.0.6.0基本操作与导出常用图保姆级教程
- 参加《前沿科学国际研讨会》的世界著名学者简介
- 机器学习案例（七）：产品需求预测