2020前的学习笔记 JQ/CSS/JS/Node

1.2DOM和JQ引用对比

引用

<script type = "text/javascript" src="js/jquery-2.14.js"></script>

dom和jq对比

DOM:
<input type = “button” onclick…
Dom对象.onclick = function() { };

JQ:
<input type = "button onclick = 函数()
JQ对象.on(“click”, function() { } )
或 JQ对象.click( function() { } )

<input type = “button” id=“btnOk”
$(“#btnOk”).click( function() { } )

２.插入标签

可直接使用id标签

3.重点

3.1修改后，不刷新页面重新打印表格，挂事件的方法

$("table").on("click",".btn1,.btn2",function(){});

3.2先显示，后挂事件方法

JQ对象.on("click",".子选择器",function(){});

3.3 each

$("button").click(function(){
	$("li").each(function(){
		alert($(this).text()) // 此处this为$('li') 即 弹窗每一个li的文本值
	})
})

3.4 关于表单checked(未验证…不知道对不对)

document.getElementByID(‘#id’).checked = true
等同于
$(‘#id’).prop(‘checked’,true)
等同于
$(‘#id’).get(0).checked=true
等同于
$(‘#id’).is(“:checked”)

4.增改属性

$obj.html( "<span></span>");
$obj.text(" 只能放文本 ")
$obj.val(" 输入框的值 ")

取值：
#div.value ; 取input text的value值
#div.innerHTML ; 取<div></div>中的内容
#div.innerText ; 取<div></div>的文本，取不到别的标签
#div.textContent ; 隐藏不受干扰

5.CSS

1.阴影内向加inset：      box-shadow：black 0 0 10px 3px inset；
2.除缝隙：	<div> <img> <div>   当div由img撑起高度时，对子元素设置vertical-aline: top
3.除缝隙： <div><span></span><span></span></div> 两个span有缝隙，先给父div字体大小设0，再分别设置子span的字体
4.div中的文字自动换行：word-wrap：break-word；
5.父的padding：5% 0，子的宽度不可设置为100%
父的padding为定值，子的宽度可以100%
6.transform的触发方式：hover，checked，focous，@media，js

6.JS

1.特殊数字类型
var num = O7；//八进制前加O
var num = OX9； //十六进制前加OX
2.最小/大数
=Number.MIN_VALUE;
=Number.MAX_VALUE;
无穷值：= Infinity；
	= -Infinity；
3.字符串转义字符
\b 空格 \t缩进 \'' 引号 \\斜杠 \n换行 \'单引号
4.原型
function Student( ) {
}
Student(); ---- 构造函数
Student.prototype 指向原型对象;
此原型对象的constructor指回构造函数

7.Node，WS安装

--------------安装WS-----------------
1.先安装 WebStorm-2020.1
2.汉化：把resources_zh_CN 放入安装路径下的lib里
2.找到安装路径下的 bin\webstorm64
3.启动
4.破解：把jetbrains-agent-latest直接拖入启动了的窗口
5.重启
-------------安装Node---------------
下一步
-------------创建新工程--------------
文件->New->项目->Node.js
Node interpreter : node安装路径下的node.exe
Package manager : node安装路径下的noder_modules\npm

---

解决问题：npm（node）不是内部或外部命令:
https://jingyan.baidu.com/article/20b68a88e224af796cec623a.html

8.Node 模块

url模块将一个网址链接解析成对象，方便我们获取里面的值

例：

//引入
const url=require('url');
//定义一个网址链接
let urlPath='http://www.baidu.com:7878/a/b/c/d/index.html?username=lucy&password=123#second';
let urlObj=url.parse(urlPath);
/*
protocol: 'http:',          协议名
  slashes: true,            协议名后是否带有//
  auth: null,               网址是否经过认证授权
  host: 'www.baidu.com:7878',     域名端口号
  port: '7878',                     端口号
  hostname: 'www.baidu.com',        域名
  hash: '#second',                  哈希值
  search: '?username=lucy&password=123',   ？参数列表
  query: 'username=lucy&password=123',      参数列表******
  pathname: '/a/b/c/d/index.html',          路径
  path: '/a/b/c/d/index.html?username=lucy&password=123',       路径？参数列表
  href: 'http://www.baidu.com:7878/a/b/c/d/index.html?username=lucy&password=123#second'    完整的url
 */