【前端基础】交互控制——JavaScript基础

JavaScript基础——基础准备

script标签

浏览器每解析一个script标签就会事件执行里面的代码，因此如果script标签里面执行报错就会导致整个页面渲染出现问题，当然我们也可以等等加载完在执行

<script>
	alert('Hello world')
</script>

<script>
	window.onload = function(){
      alert('Hello world')
    }
}
</script>

简单API

输出

写入警告框	   ：window.alert("Hello World")
写入 HTML 输出  ：document.write("<div>Hello World</div>")
写入 HTML 元素  ：document.getByelementID(‘fuck’).innerHTML="<div>Hello World</div>"
写入浏览器控制台 ：console.log("Hello World")

比较

console.log(undefined == null);//true
console.log(NaN == NaN); //false
console.log(1 != "1"); //false
console.log(1 !== "1"); //true

三目

1>2?console.log('11'):console.log('22');

自增

a++，后进行++操作
++a，先进行++操作

定时器

【定时调用】
var timer = setInterval(function(){
   num++;
   if(num == 11){
      //关闭定时器
      clearInterval(timer);
   }
},1000);

【延时调用】——只调用一次
var timer = setTimeout(function(){
   console.log(num++);
},3000);
clearTimeout(timer);

JavaScript基础——数据类型

Number

在javaScript中所有数字的类型都是用Nummber类型，包括-整数、浮点数！
【极值】
	var max=Number.MAX_VALUE//再大就是Infinity正无穷;
	var min=Number.MIN_VALUE//再大就是-Infinity负无穷;
整数最大可以有 15 位，小数最大可以有17位
【自带API】
	var num=15;
	num.isNaN();       //判断是不是数字，返回布尔值
	isNaN(NaN)//false
	num.toFixed(3);　　  //四舍五入，返回字符串
【舍数】
	console.log(Math.ceil(1.5))//向上取整(2)
	console.log(Math.floor(1.5))//向下取整(1)
	console.log(Math.round(1.5))//四舍五入(2)
【特殊值】
	console.log(Math.abs(-1))//绝对值
	console.log(Math.pow(3,3))//取次方
	console.log(Math.sqrt(2))//开平方
	console.log(Math.PI))//圆周率
	console.log(Math.random()*100;) //产生0-100的随机数，可以通过parseInt取整
	console.log(Math.max(10,45,30,100));
	console.log(Math.min(10,45,30,100));//取极值

String

底层其实是一个字符数组，字符数组底层的编码！
【截取】
result = str.slice(1,4);//含头不含尾截取字符串，新字符串
result = str.substring(0,1);
result = str.substr(3,2);//从下表开始，截取长度为……
result = str.concat("你好","再见");//连接两个字符
result = str.split("d");//按正则拆分
【下标】
result = str.charAt(6);//指定位置字符
result = str.charCodeAt(0);//单字符Unicode编码
result = str.indexOf("h",1);
result = str.lastIndexOf("h",5);//指定位置方向性寻找，返回下标或者-1
【转化】
result = String.fromCharCode(0x2692);//根据字符编码获取字符
result = str.toUpperCase();
result = str.toLowerCase();
【JSON】
JSON.stringify(obj3);//对象=》Json字符
JSON.parse(json);//JSON字符=》对象
【模板字符】
let obj = {
   name : 'anverson',
   age : 41
};
console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);
* 模板字符串必须用 `` 包含
* 变化的部分使用${xxx}定义

Array

        /**
         * @创建
         */
        var arr2 = new Array(10,20,30);
        var arr = new Array();
        var arr = [1,2,3,4,5,10];
​       /**
         * @元素操作
         */
        arr.push("唐僧","蜘蛛精","白骨精","玉兔精");//尾部删
        arr.pop();//尾部加
        arr.unshift("牛魔王","二郎神");//头部加
        arr.shift();//头部删
        /**
         * @截取
         */
        arr.slice(1,4);//含头部含尾的截取
        var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");//返回被删除的，从开始的位置开始插入，第一个是索引，第二个是数量
        /**
         * @合并
         */
        arr.concat(arr2,arr3,"牛魔王","铁扇公主");//连接两个数字
        arr.join("-");
        /**
         * @整体操作、遍历
         */
        arr.forEach(function(obj , index , objs){//【1】就是当前正在遍历的元素【2】就是当前正在遍历的元素的索引【3】就是正在遍历的数
        arr.reverse();//倒转数组
        arr.sort(function(a,b){//排序数组
            return b - a;
        });
        arr.map(item => item*item);//映射处理并返回
        var arr2 = arr.filter((item, index) => {//过滤并返回
　　           return index % 3 === 0 || item >= 8;
        });
	/**
	 * @整体校验和查找
	 */
	arr.some(x => x<3);//有一个满足则会返回true
	var arr2 = arr.every(x => x<10);//全部满足才返回true
	[1, 2, 3, 4, 5].includes(4);//是否包含这个元素
	arr.find((item)=>{//找到第一个满足的元素对象，findIndex则返回下标
    		return item.age == '18'
	});
	/**
	 * @splice删除
 	* 2个参数，拆分两个，从哪里开始、拆分多少个
	 */
	var arr = [1,3,5,7,9,11];
	var arrRemoved = arr.splice(0,2);
	console.log(arr); //[5, 7, 9, 11]
	console.log(arrRemoved); //[1, 3]
	/**
	 * @splice插入
 	* 3个参数，从哪里开始；0；参数列表
 	*/
	var arrRemoved2 = arr.splice(2,0,4,6);
	console.log(arr); // [5, 7, 4, 6, 9, 11]
	console.log(arrRemoved2); // []
	/**
 	* @splice替换
 	* 3个，从哪里开始；删除的下标；参数列表
 	*/
	var arrRemoved3 = arr.splice(1,1,2,4);
	console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
	console.log(arrRemoved3); //[7]

Date对象

字符串转时间：String(new Date())
时间转字符串：new Date("2019/2/18 15:30:22");//指定格式时间
【获取时间分量】
var d=new Date();
	d.getFullYear()    年
	d.getMonth()   月
	d.getDate()    日
	d.getHours()   时
	d.getMinutes() 分
	d.getSeconds() 秒
	d.toLocaleTimeString();年月日
	d.toLocaleDateString();时分秒
【时间戳】
	时间戳：距1970年1月1号0点0分0秒的毫秒数，计算机低层就是利用时间戳保存时间依次来统一时间标准！
	d.getTime();
	d.setTime(1000);

RegExp

【创建正在表达式】
	var reg = new RegExp("a","i");
	var reg = /a/i;//i 忽略大小写||g 全局匹配模式
【案例】
	var strReg=/abc/;//包含某个些字符
	var phoneReg = /^1[3-9][0-9]{9}$/;//电话
	var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;//邮箱
	案例-匹配块一定是连续匹配的
【代词】
	reg = /\./;
	reg = /\\/;
	reg = /\./;
	reg = /\w/;//任意字母、数字 [A-z0-9_]
	reg = /\W/;//除了字母、数字 [^A-z0-9_]
	reg = /\d/;//任意的数字 [0-9]
	reg = /\D/;//除了数字 [^0-9]
	reg = /\s/;//空跟
	reg = /\S/;//除了空格
	reg = /\b/;//单词边界
	reg = /\B/;//除了单词边界
	[]里的内容也是或的关系
	[ab] == a|b
	[a-z] 任意小写字母
	[A-Z] 任意大写字母
	[A-z] 任意字母
	[0-9] 任意数字
【量词】
	reg = /b{3}/;//b正好出现三次
	reg = /ab{1,3}c/;//b出现1-3次之间
	reg = /ab{3,}c/;//b出现3次以上
	reg = /ab+c/;//b出现至少一次
	reg = /ab*c/;//b出现0或多个
	reg = /ab?c/;//b出现 0-1次
	reg = /(ab){3}/;//ab出现连续三次
【正则表达式API】
	reg.test("Ac")
	str.split(/[A-z]/);//按照匹配拆分
	str.search(/a[bef]c/);//找到一个匹配的返回下标
	str.match(/[a-z]/ig);//提取匹配到的
	str.replace(/[a-z]/gi , "")//替换匹配到的生成新的

类型转化

任何值和字符串相加，都会利用String()函数转化成String！
任何值做- * /运算时都会利用Nummber()函数转化成为Number
任何值在条件语句内都会利用Boolean()函数转化成为Boolean
【任意转字符串】
null.toString();
undefined.toString();//会报错，所以一般用构造函数最好
String(null)//"null"
String(undefined)//"undefined"
【任意数值】
Number("15")//15;
Number("1so")//NAN
Number("15")//15
Number(" ")//0
Number(true)//1
Number(false)//0
Number(null)//0
Number(undefined)//NAN
parseInt("123px")//123
parseFloat("123.456px")//123.456;
parseInt(true)//NAN,会先变成字符串
【任意布尔】
Boolean(123)//true
Boolean(0)//false
Boolean(-123)//true
Boolean(Infinity)//true
Boolean(NaN)//false
Boolean(null)//false
Boolean(undefined)//false
Boolean("a")//true
Boolean("")//false
Boolean(" ")//true
Boolean("  ".trim())//false
【类型匹配】
type of ：返回类型的字符串；
instantof ：A instanceof B；A的某一部分组件，由B提供！则原型链上则返回true

JavaScript基础——DOM操作

浏览器的运行，实际上在解析html，将这个文本集成document对象（JS对象），再对document对象进行渲染从而实现视图；因此直接利用js操作dom可以实现渲染！
$("#onlineDiv .progess:eq(0)").css(“width”,stuWidthSaleallWitdh);
$("#onlineDiv .progess:eq(1)").css(“width”,preWidthSaleallWitdh);
$("#onlineDiv .progess:eq(2)").css(“width”,invailWidthSaleallWitdh)
$("#onlineDiv .progess:eq(0)").css(“left”,0);
$("#onlineDiv .progess:eq(1)").css(“left”,stuWidthSaleallWitdh-30);
$("#onlineDiv .progess:eq(2)").css(“left”,stuWidthSaleallWitdh+preWidthSaleallWitdh-60);

获取对象

【利用选择器获取】
        通过类获取对象：            var element=document.getElementsByClassName('class属性值');  
        通过标签名获取对象（数组）：  var element=document.getElementsByTagName('标签名');
        通过参数标识获取对象（数组）： var element=document.getElementsByName('name属性值');
【利用事件获取】
        通过选择器获取对象（数组）：  var element=document.querySelectorAll('CSS选择器');
        通过选择器获取对象（一个）：  var element=document/element.querySelector('CSS选择器');
        利用事件获取
        在标签中this代表当前对象，可以作为参数值传进来或者直接写代码
        在事件中可以传入对象evnet，var obj = event.target||event.srcElement;来获取

对象详情

基本属性
var str=element.innerText
var str=element.innerHTML//它和innerHTML类似，不同的是它会自动将html去除
var str=element.nodeValue//节点的值
var str=element.nodeName//节点的名
位置信息
【自身属性】
element.clientWidth//可见宽高
element.clientHeight
element.offsetWidth//包含内边距
element.offsetHeight
【滚动属性】
element.scrollWidth
element.scrollHeight
Ps：元素区域大于可见区域时产生滚动
【距离属性】
element.offsetParent//会获取到离最近的开启了定位的祖先元素如果所有的祖先元素都没有开启定位，则返回body
element.offsetLeft//距离定位最近祖先的距离
element.offsetTop
【关系转移】
        var cns = element.childNodes;
        var cns = element.children;
        var parent=element.parentNode;
        ​
        var fir = element.firstChild;
        var fir = element.firstElementChild;
        ​
        var ps = and.previousSibling;
        var pe = and.previousElementSibling;

操作对象

文本:Element.innerText=""
属性:Element.属性值=""
样式:Element.style.样式名=""
触发代码:Element.触发器=function(){};
Ps：操作对象时，修改style属性来修改元素的样式，浏览器就需要全局重新渲染一次页面；而该class则不会
    function getStyle(obj , name){
                if(window.getComputedStyle){
                    return getComputedStyle(obj , null)[name];
                }else{
                    return obj.currentStyle[name];
                }
            }

植入对象

 【创建节点对象】
  创建元素节点：var node=document.createElement('元素名');
  创建文本节点：var node=document.createTextNode('文本内容');
  创建属性节点：var node =document.createAttribute('id');
 【植入节点对象】
  element.appendChild(gzText);//父节点末尾新的子节点
  element.insertBefore(li , bj);//父节点的指定节点前，两个都node对象！
  element.replaceChild(li , bj);//父节点的指定节点替换
  element.removeChild(子节点);//父节点中指定节点删除
  子节点.parentNode.removeChild(子节点);
  【嵌入文本节点】
  element.appendChild(txt)       末尾追加
  element.insertBefore(txt,'……');  指定前插入
  element.replaceChild(txt, '……'); 指定替换
  【嵌入属性节点】
  element.setAttributeNode(attr);
  doucment.body.removeChild(element);
  element.setAttribute(attributeName, attributeValue);
Ps：使用innerHTML也可以完成DOM的增删改的相关操作
Ps：只能植入合法的节点对象，因此字符、数字等数据必须经过节点对象的封装！  
  【常用特殊对象】
  var body = document.body;
  var html = document.documentElement;

全部属性

{
        accessKey: ""
        align: ""
        assignedSlot: null
        attributeStyleMap: StylePropertyMap {size: 0}
        attributes: NamedNodeMap {0: data-v-29909480, 1: class, data-v-29909480: data-v-29909480, class: class, length: 2}
        autocapitalize: ""
        baseURI: "http://localhost:9000/#/sale-work-app/consultant/studentPoolSale"
        childElementCount: 1
        childNodes: NodeList [div.ivu-layout.ivu-layout-has-sider.seacher_bar]
        children: HTMLCollection [div.ivu-layout.ivu-layout-has-sider.seacher_bar]
        classList: DOMTokenList(2) ["fuck", "search_bar_container", value: "fuck search_bar_container"]
        className: "fuck search_bar_container"
        clientHeight: 67
        clientLeft: 0
        clientTop: 0
        clientWidth: 1246
        contentEditable: "inherit"
        dataset: DOMStringMap {v-29909480: ""}
        dir: ""
        draggable: false
        firstChild: div.ivu-layout.ivu-layout-has-sider.seacher_bar
        firstElementChild: div.ivu-layout.ivu-layout-has-sider.seacher_bar
        hidden: false
        id: ""
        innerHTML: ……
        innerText: "选择渠道小组调教学主任调教学助理 导出EXCEL 清除查询↵搜 索"
        inputMode: ""
        isConnected: true
        isContentEditable: false
        lang: ""
        lastChild: div.ivu-layout.ivu-layout-has-sider.seacher_bar
        lastElementChild: div.ivu-layout.ivu-layout-has-sider.seacher_bar
        localName: "div"
        namespaceURI: "http://www.w3.org/1999/xhtml"
        nextElementSibling: div#0.9089614272929534.ivu-table-wrapper
        nextSibling: div#0.9089614272929534.ivu-table-wrapper
        nodeName: "DIV"
        nodeType: 1
        nodeValue: null
        nonce: ""
        offsetHeight: 67
        offsetLeft: 16
        offsetParent: div.stu-pool-table.ivu-card.ivu-card-bordered
        offsetTop: 16
        offsetWidth: 1246
        onabort: null
        onauxclick: null
        onbeforecopy: null
        onbeforecut: null
        onbeforepaste: null
        onblur: null
        oncancel: null
        oncanplay: null
        oncanplaythrough: null
        onchange: null
        onclick: null
        onclose: null
        oncontextmenu: null
        oncopy: null
        oncuechange: null
        oncut: null
        ondblclick: null
        ondrag: null
        ondragend: null
        ondragenter: null
        ondragleave: null
        ondragover: null
        ondragstart: null
        ondrop: null
        ondurationchange: null
        onemptied: null
        onended: null
        onerror: null
        onfocus: null
        onfullscreenchange: null
        onfullscreenerror: null
        ongotpointercapture: null
        oninput: null
        oninvalid: null
        onkeydown: null
        onkeypress: null
        onkeyup: null
        onload: null
        onloadeddata: null
        onloadedmetadata: null
        onloadstart: null
        onlostpointercapture: null
        onmousedown: null
        onmouseenter: null
        onmouseleave: null
        onmousemove: null
        onmouseout: null
        onmouseover: null
        onmouseup: null
        onmousewheel: null
        onpaste: null
        onpause: null
        onplay: null
        onplaying: null
        onpointercancel: null
        onpointerdown: null
        onpointerenter: null
        onpointerleave: null
        onpointermove: null
        onpointerout: null
        onpointerover: null
        onpointerup: null
        onprogress: null
        onratechange: null
        onreset: null
        onresize: null
        onscroll: null
        onsearch: null
        onseeked: null
        onseeking: null
        onselect: null
        onselectionchange: null
        onselectstart: null
        onstalled: null
        onsubmit: null
        onsuspend: null
        ontimeupdate: null
        ontoggle: null
        onvolumechange: null
        onwaiting: null
        onwebkitfullscreenchange: null
        onwebkitfullscreenerror: null
        onwheel: null
        outerHTML: "……"
        outerText: "选择渠道小组调教学主任调教学助理 导出EXCEL 清除查询↵搜 索"
        ownerDocument: document
        parentElement: div.ivu-card-body
        parentNode: div.ivu-card-body
        part: DOMTokenList [value: ""]
        prefix: null
        previousElementSibling: null
        previousSibling: null
        scrollHeight: 67
        scrollLeft: 0
        scrollTop: 0
        scrollWidth: 1246
        shadowRoot: null
        slot: ""
        spellcheck: true
        style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
        tabIndex: -1
        tagName: "DIV"
        textContent: "      选择渠道小组  调教学主任  调教学助理  导出EXCEL  清除查询   搜 索 "
        title: ""
        translate: true
}

JavaScript基础——BOM操作

提醒类API

<input type="button" value="fuck" onclick="alert('点击妹啊')">
<input type="button" value="fuck" onclick="confirm('点击妹啊')">
<input type="button" value="fuck" onclick="prompt('请输入密码','六位数')">
弹出提示框 window.alert("abc")
弹出确认框 window.confirm("abc","cbd")
弹出输入框 window.prompt()

信息类API

【浏览器信息】
navigator.userAgent;
【历史信息】
history.length//连接数量
history.back()//回退
history.forward()//前进
history.go(-2)//回退两次
【地址信息】
alert(location)
location.reload(true)
【屏幕信息】
location = "http://www.baidu.com"
screen.width/height  宽高
screen.availWidth/availHeight 可用宽高
【其他】
window.eval("alert('abc')");   将字符串当代码执行，适用于从表单获得数据直接运行

JavaScript基础——事件

事件触发

代码放在事件激活下，比用线程不断驱动更加优化，比如价格计算每勾选一个计算一次
鼠标事件触发
点击事件		Element.onclick=function(){}
鼠标移入事件  Element.onmouseover=function(){}
鼠标移出事件  Element.onmouseout=function(){}
鼠标按下      Element.onmousedown=function(){}
鼠标松开      Element.onmouseup=function(){}
鼠标移动      Element.onmousemove=function(){}
系统状态触发
页面加载完成事件	Element.onload=function(){}
窗口尺寸改变事件	Element.onresize=function(){}
元素状态触发
获取焦点事件		Element.onfocus=function(){}
失去焦点事件		Element.onblur=function(){}
提交事件			Element.onsubmit=function(){}
value值改变事件   Element.onchange=function(){}
键盘事件触发
键盘按下事件Element.onkeydown=function(){}
键盘抬起事件Element.onkeyup=function(){}
String.fromCharCode(event.keyCode)
主动触发事件
元素事件的触发对于元素监听器来讲是固定的，但是我们可以通过元素名.事件()，来去控制触发的产生；
	if(event.keyCode==13){
			mybtn.onclick();
	}
console.log("鼠标移动：");

事件机制

事件的传播（冒泡）

1.捕获阶段:除body，点到的元素会依次由外向内捕获，直到捕获到最小的牵连元素；
2.冒泡阶段:事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
Ps:如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
event.cancelBubble = true=》取消冒泡

事件的绑定

运用对象.事件来绑定对象这种智能绑定一个函数且会造成覆盖！为此利用以下方式，并且注意浏览器兼容问题来实现事件绑定；可以再其中某一个对象中间中断冒泡
btn01.attachEvent("onclick",function(){
    alert(2);
});
btn01.addEventListener("click",function(){
    alert(this);
},false);
function bind(obj , eventStr , callback){
    if(obj.addEventListener){
        obj.addEventListener(eventStr , callback , false);
    }else{
        obj.attachEvent("on"+eventStr , function(){
            callback.call(obj);
        });
    }
}
*  obj 要绑定事件的对象
*  eventStr 事件的字符串(不要on)
*  callback 回调函数

事件的委派

将事件绑定在父元素中，然后传递给子元素，如果非必要元素则过滤
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

u1.onclick = function(event){
                    event = event || window.event;
                    //如果触发事件的对象是我们期望的元素，则执行否则不执行
                    if(event.target.className == "link"){
                        alert("我是ul的单击响应函数");
                    }
};

事件的封装

当事件的响应函数被触发时
浏览器每次都会将一个事件对象作为实参传递进响应函数；
`在事件对象中封装了当前事件相关的一切信息`，比如：鼠标的坐标  键盘哪个按键被按下  鼠标滚轮滚动的方向。。。
var x = event.clientX;
var y = event.clientY;
var obj=event.target
Ps:上述是用于获取鼠标在当前的可见窗口的坐标，pageX和pageY可以获取鼠标相对于当前页面的坐标

事件分类

鼠标事件

1.当鼠标在被拖拽元素上按下时，开始拖拽    onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动      onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置   onmouseup

滚轮事件

info.onscroll = function(){
                        if(info.scrollHeight - info.scrollTop == info.clientHeight){
                            inputs[0].disabled = false;
                            inputs[1].disabled = false;
                        }
};
//获取滚动条滚动的距离
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft

键盘事件

onkeydown，按着就事件会一直触发
onkeyup，按键被松开
event.keyCode
event.altKey
event.ctrlKey
event.shiftKey

Jquery

Jquery——选择元素

兄弟元素    $("#abc").siblings("div");
弟弟元素    $("#abc").next();       不加参数紧邻、加了参数就第一个参数元素，后面以此类推
弟弟们元素  $("#abc").nextAll();
哥哥元素    $("#abc").prev();
哥哥们元素  $("#abc").prevAll();
​
弟弟元素$("#abc+span")
弟弟们  $("#abc~span")
属性筛选（通用情况）
$("div：[attitude]")
$("div：[attitude="value"]")
$("div：[attitude！="value"]")
属性筛选（表单筛选）
$("input：password")
$("input：radio")
$("input：checkbox")
$("input：checked")
$("input：selected")
$("input：password")
$("input：password")
样式筛选（显示状态）
$("div：hidden")
$("div：visible")
$("#abc").hide();//隐藏
$("#abc").show();//显示
$("#abc").toggle();//隐藏显示切换
内容筛选
$("div：empty")
$("div：parent")
$("div：has(p)")
$("div：contains('hello！world')")
下标筛选
第一个下标元素： $("#abc：first")
第尾个下标元素： $("#abc：last")
第n个下标元素： $("#abc：eq(n)")
<n的下标元素： $("#abc：lt(n)")
>n的下标元素： $("#abc：gt(n)")
奇数下标：       $("#abc：odd")
偶数下标：       $("#abc：even")

基类选择器

id选择器      $("#id")
class选择器    $(".class")
元素选择器    $("div")

下标选择器

$("#onlineDiv .progess:eq(0)").css("width",stuWidthSale*allWitdh);
$("#onlineDiv .progess:eq(1)").css("width",preWidthSale*allWitdh);
$("#onlineDiv .progess:eq(2)").css("width",invailWidthSale*allWitdh)
$("#onlineDiv .progess:eq(0)").css("left",0);
$("#onlineDiv .progess:eq(1)").css("left",stuWidthSale*allWitdh-30);
$("#onlineDiv .progess:eq(2)").css("left",stuWidthSale*allWitdh+preWidthSale*allWitdh-60);
$("div p").first();
$("div p").last();
$("p").eq(1);//下表为1

嵌套选择器

 $("span").parent();//只有一级
 $("span").parents();//所有级
 $("span").parents("ul");//过滤
 $("span").parentsUntil("div");//介于两者之间
 $("div").children();//所有下级
 $("div").children("p.1");//过滤
 $("div：nth-child(n)")
 $("div：first-child")
 $("div：lats-child")
 $("#abc").parent()
 $("#abc").parents()

兄弟选择器

 $("h2").siblings();
 $("h2").siblings("p");
 $("h2").next();
 $("h2").nextAll();
 $("h2").nextUntil("h6");
 $("h2").prev()
 $("h2").prevAll()
 $("h2").prevUntil()

条件选择器

   $("p.intro")   		 class="intro" 的 <p> 元素
   $("[href$='.jpg']")   所有带有以 ".jpg" 结尾的属性值的 href 属性
   $("p").filter(".intro");
   $("p").not(".intro");
   $("#abc div")
   $("#abc>div")
   $("div,span")

Jquery——操作元素

jQuery的元素操作API，都是数组形式存在的JS对象类型，这样对多个js对象同时操作；，所以必须要转化后才能操作
JS转JQ ： $();
JQ转JS ：下标或遍历

操作数据

添加文本（可批量）       jQuery对象.text("xxx")        
添加元素（可批量）       jQuery对象.html("<h1>xxx</h1>");
设置属性（可批量）       jQuery对象.attr("属性名","属性值"); 
添加样式（可批量）       jQuery对象.css("样式名称","值");   
添加批量样式             jQuery对象.css({"名称1":"值1","名称2":"值2"}); 
【操作文本】
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });
  【操作html】
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
  【操作属性】
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
  【操作class】
  $("h1,h2,p").removeClass("blue");
  $("#div1").addClass("important blue");
  $("h1,h2,p").toggleClass("blue");

操作样式

【显示、隐藏】
$("#element").hide()//隐藏
$("#element").show()//显示
$("#element").toggle()//切换
【淡入】
$("#element").fadeIn(3000);//淡入
$("#element").fadeToggle(3000);//切换
$("#element").fadeOut(3000);//淡出
【手风琴上下拉】
$("#element").slideToggle();
$("#element").slideUp();
$("#element").slideDown();
​
//回调
$("p").hide(1000,function(){
    alert("The paragraph is now hidden");
});
//连续调用
("#element").css("color","red").slideUp(2000).slideDown(2000);jQuery 方法链接
("#element").css({"background-color":"yellow","font-size":"200%"});
​
【宽度系列】
("#element").outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
("#element").outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
("#element").innerWidth() 方法返回元素的宽度（包括内边距）。
("#element").innerHeight() 方法返回元素的高度（包括内边距）。
("#element").width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
("#element").height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
("#element")..width(500).height(500);

Jquery——建设元素

建设对象

创建元素节点：var d = $("<div id='xxx'>xxxxx</div>");
直接删除元素：$("#div1").remove();删除被选元素及其子元素。
	    	 $("#div1").empty();被选元素的子元素
             $("p").remove(".italic");//过滤

执行建设

内嵌添加元素      $("父元素选择器").append(新元素节点);//子元素的末尾插入
	     		  $("父元素选择器").prepend(新元素节点);//子元素的开头插入
平行添加元素       $("兄弟元素选择器").before(新元素);//某元素之后-同级
                 $("兄弟元素选择器").after(新元素);//某元素之前-同级
$("p").append(txt1,txt2,txt3);//连续添加多个

Jquery——ajax请求

基本请求

.ajax({
    url:"",         
    type:"GET",
    dataType:"json",
    data:{}, 
    contentType:'application/x-www-form-urlencoded',
    success: function(data){
    },
    //请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log(textStatus);// 打印错误信息
    }
});
url:ajax 请求地址
type:请求方式 ’GET‘或’POST‘，默认为’GET‘
dataType:xml html script json jsonp text,返回值类型
data:如果是get请求会自动拼接到url后面
contentType:
json字符串=>直接data，contentType为:'application/x-www-form-urlencoded'
json对象=>JSON.stringify(({name3:"name3"})，contentType :'application/json;charset=UTF-8'

简写请求

$.get("url",{……},function(data) {
});
$.post("url", {……}, function (data) {
})
$("form").serialize()//表单内容序列化成字符串
x=$("form").serializeArray();//表单内容序列化成数组

跨域

$.ajax({
       dataType: "jsonp",
       jsonp: "callback",
       data: obj,
       url: "http://localhost:8080/EsqGarmentWS/ICS/person/insert",
       success: function () {
             location.reload()
       }, error: function () {
             location.reload()
       }
});