html:展示
文件 标签:
<html>
<head>
<title></title>
<meta>
<link>
<style></style>
</head>
<body></body>
</html>
排版标签:
p 段落
hr 分割线
br 换行

字体标签:
<font></font>
h1~h6 标题标签

b strong
i
图片标签:
<img src="图片的路径" alt="替代文字" width="" height=""/>
超链接标签
<a href="跳转的路径" target="在那里打开">xx</a>
列表标签
<ul></ul>
<ol></ol>
子标签
<li></li>
表格★
<table border="1">
<tr>
<td></td>
</tr>
</table>

td的重要属性:
colspan:列合并
rowspan:行合并

表单标签:★
表单作用:收集用户信息
form:
常见的属性:
action:设置提交路径
method:提交方式
get和post
常见的子标签:
input
select
textarea

input标签:
属性:
type取值:(10)
text:文本框
password:密码
radio:单选框
checkbox:多选框
file:文件框

submit:提交
reset:重置
button:普通按钮

hidden:隐藏域
image:图片提交 
name属性:
1.提交到服务器
2.将单选框或者复选框设置为一组

select:下拉选
格式:
<select name="">
<option>-请选择-</option>
<option value="">展示的信息</option>
</select>

textarea:文本域
格式:
<textarea rows="" cols="">默认值</textarea>

默认值:
text password:设置value属性
radio checkbox:设置 checked="checked"属性
select:在option上设置 selected="selected"属性
value可以设置按钮的展示文字

框架:
frameset:框架集
常用属性:
cols:
rows:
常用子标签:
frame
frame:
常用属性:
src:展示的页面
name:给当前的frame起个名字 方便a标签使用

块标签:div+css布局
div
span

css:★
层叠样式表:渲染
格式:
选择器:{属性:值;属性1:值1}
html和css的整合
方式1:内敛样式表 通过标签的style属性
<xxx style="..."/>
方式2:内部样式表 通过head的style子标签
<style>....</style>
方式3:外部样式表 通过link标签导入
<link...>

选择器:
id选择器 #id值
class选择器 .class值
元素选择器 标签名

属性选择器 标签名[属性="值"]
后代选择器  
选择器 后代选择器
锚伪类

字体 文本 背景 列表(list-style-type:none) 浮动:float 
清除浮动(分类) clear
显示(分类) display: none  block inline
框模型:内边距 边框 外边距

js:javascript 脚本 直接解释就可以
js和html整合:
方式1:在html页面中
<script></script>
方式2:外部的js文件
<script src=""></script>
js组成部分:
ECMAScript:语法
BOM:浏览器对象模型
DOM:文档对象模型

基础语法:
var 变量名=值;
数据类型:
原始类型
Undefined Null String Number Boolean
通过typeof判断属于那种类型
引用类型
Number Boolean
★String
属性:length
方法:
substring
★Array
属性:length
方法:
join(分隔符):打印数组
Math
Date
RegExp
直接量语法: 
/正则表达式/
方法:
test()
全局
decodeURI
encodeURI

eval()
////////////////////////
函数:
function 函数名(参数列表){
函数体
}

匿名函数:
function(){....}

事件:
常见事件:
焦点:
onfocus
onblur
表单:
onsubmit
onchange
页面元素加载
onload
单击
onclick
绑定事件:
方式1:通过标签的事件属性
<xxx onxxx="函数(参数)"/> 参数若是:this 将当前的dom对象传递给函数
方式2:派发事件
dom对象.onxxx=function(){...}

bom
window:窗口
常用属性:
window.location

常用方法:
消息框
alert() confirm() prompt()
定时器
setInterval()
setTimeout()
打开关闭 open close
location:定位
location.href;获取当前的url
location.href="..";设置url 相当于a标签
history:历史
go()

dom
节点(Node)
元素节点
属性节点
文本节点

文档节点
获取其他节点
document.getElementById("id值"):一个元素
document.getElementsByTagName("标签名"):多个
document.getElementsByClassName("class值")
document.getElementsByName("name值")
操作属性
dom对象.属性:
例如  
dom对象.value;
dom对象.value="";
dom对象.style.css属性="值";
操作标签体:
dom对象.innerHTML;获取
dom对象.innerHTML="";设置

jquery:
js类库:对原生js常见的方法和对象进行封装,方便使用
html和jquery整合:
通过script标签src属性
获取jquery对象:
$("选择器") jQuery("选择器")
dom对象和jquery对象转换
dom>>>jquery   $(dom对象)
jquery>>>dom 
方式1:
jquery对象[index]
方式2:
jquery对象.get(index)
页面载入:
$(document).ready(function(){....})
$(function(){ ...})
事件和js中的事件一样:把on去掉即可
$("选择器").xxx(function(){...})
选择器:
$("#id") $(".class") $("元素") $("[属性]") $("[属性='值']")
a b: 后代  a>b:孩子   a+b:大弟弟  a~b:所有弟弟
:first :last :odd :even  :eq(index)..
:has('选择器')
:hidden  :visible
:input
:checked :selected
属性和css操作:
attr|prop
prop("属性"):获取
prop("属性","值"):设置一个
prop({
"":"",
"":""
}):设置多个

removeAttr|removeProp(属性)

addClass("class名称")
removeClass("class名称")

css: 针对style属性
css("属性"):
css("属性","值"):
css({
"":"",
"":""
}):设置多个

height() width()

对value属性 标签体的操作
xxx():获取
xxx("笑嘻嘻的说法"):设置

val():
html():
text():

对文档操作:
内部插入
append
prepend

外部插入
after
before

删除
empty()清空
remove()删除

效果:
hide() show() toggle()
滑入滑出
slideDown() slideUp()
淡入淡出
fadeIn() fadeOut()

遍历
方式1:
jquery对象.each(function(){});
方式2:
$.each(jquery对象,function(){});

---------------------
作者：My_____Dream
来源：CSDN
原文：https://blog.csdn.net/My_____Dream/article/details/79246566
版权声明：本文为博主原创文章，转载请附上博文链接！

HTML-CSS-JS-JQ常用知识点总结的更多相关文章

  1. JS/jQ常用宽高及应用

    关于js的宽高,随便一搜就是一大堆.这个一大堆对我来说可不是什么好事,看的头都大了.所以今天就总结了一些比较会常用的,并说明一下应用场景. 先来扯一下documentElement和body的微妙关系 ...

  2. 整理前端css/js/jq常见问题及解决方法（2）

    移动端 手机 1.点击图片或按钮,选中状态影响到其他范围解决:html{-webkit-user-select:none}<meta name="msapplication-tap-h ...

  3. 整理前端css/js/jq常见问题及解决方法（1）

    1. 兼容ie8圆角的解决方法:下载ie-css3.htc文件在css中加入behavior:url(ie-css3.htc);z-index:3; position:relative 即可 2. 去 ...

  4. HTML,DIV+CSS,js,JQ,UI-WEB前端设计经验

    目前比较全的CSS重设(reset)方法总结   在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览 ...

  5. Js中常用知识点（typeof、instanceof、动态属性、变量作用域）

    1.Js中各类型的常量表示形式:Number:number     String:string    Object:objec 2.typeof运算符在Js中的使用:用于判断某一对象是何种类型,返回值 ...

  6. jquery|js|jq常用正则

    var mobReg=/^1[34578]\d{9}$/; //手机号 if (!mobReg.test(mob)) { mui.alert("请填写正确手机号!"," ...

  7. 整理前端css/js/jq常见问题及解决方法（3）

    jq: 1.prepend(参数);//将参数内容前置再某元素内部; eg: <div id="div1">奇妙能力歌</div> $("#div ...

  8. HTML、CSS、JS中常用的东西在IE中兼容问题汇总

    1.因为国内360浏览器.QQ浏览器等更新较快,所以不考虑Chrome支持某个css与否,因为一般都支持. 2.因为火狐等使用的人较少,且更新较快,所以不考虑支持与否,因为一般都支持 3.主要就是汇总 ...

  9. jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  10. JS中常用开发知识点

     JS中常用开发知识点 1.获取指定范围内的随机数 2.随机获取数组中的元素 3.生成从0到指定值的数字数组 等同于: 4.打乱数字数组的顺序 5.对象转换为数组 //注意对象必须是以下格式的才可以通 ...

随机推荐

  1. 如何用nginx在本地把9000端口转发到80端口上

    起因看到一个用java写的轻博客,于是就兴致冲冲的试用一下.由于是lnmp的环境,Nginx占用了80端口,新博客只能用其他的端口,这里选择了9000端口,本地测试没问题.总不能访问了域名然后在加上端 ...

  2. LINUX搭建PySpider爬虫服务

    1.环境搭建 yum update -y yum install gcc gcc-c++ -y yum install python-pip python-devel python-distribut ...

  3. kali linux下 hachcat安装

    网上关于hachcat的简单使用方法介绍很多,然而却很少有在kali linux上的安装教程,找了好长时间,终于安装成功了,特此将中间借鉴的内容记录如下: #首先安装p7z,用于解压下载的p7z包 # ...

  4. Python进阶【第一篇】：Python简介

    Python简介 1.Python的由来 Python是著名的“龟叔”Guido van Rossum在1989年圣诞节期间,为了打发无聊的圣诞节而编写的一个编程语言. 2.C 和 Python.Ja ...

  5. spring中的springSecurity安全框架的环境搭建

    首先在web.xml文件中配置监听器和过滤器 <!--监听器 加载安全框架的核心配置文件到spring容器中--> <context-param> <param-name ...

  6. linux释放页面缓存drop_caches

    关于drop_caches文件:系统默认为0 在Documentation/sysctl/vm.txt中有如下描述: drop_caches Writing to this will cause th ...

  7. oracle 18c的版本号规则

    18C之后的版本标识 从2017年7月开始,Oracle改变了以往的数据库软件发布流程,采用年度Release和季度更新的策略. Yearly Release 将之前的N年一发布更改为每年一发布.每年 ...

  8. oracle 11g SKIP_UNUSABLE_INDEXES参数

    SKIP_UNUSABLE_INDEXES的作用是在DML期间跳过对索引的维护,这样可以提交DML的效率,可以事后一次性重建,但是SKIP_UNUSABLE_INDEXES=y对unique inde ...

  9. java中线程的停止以及LockSupport工具类

    看jstack输出的时候,可以发现很多状态都是TIMED_WAITING(parking),如下所示: "http-bio-8080-exec-16" #70 daemon pri ...

  10. 转：网卡、光纤网卡、ISCSI卡有什么区别？

    网卡.光纤网卡.ISCSI卡有什么区别? 感谢: http://www.it.com.cn/f/server/063/6/241650.htm 在讨论这个问题的时候,需要先说清楚一个问题:我们知道,在 ...