css奇数偶数选择器_AJAX||Jquery各种选择器（js笔记）

“永远相信美好的事情即将发生”——小米

你可以不喜欢小米，但是请佩服雷军

事件

事件是JS引擎内置的，预先定义的函数变量事件可能被游览器触发，也可能由用户触发事件触发时，JS引擎会按照一定的规则调用这些变量的函数事件可编程

同步 || 异步

事件的三种绑定方法：onTYPE = function(e){}优点：兼容性好缺点：只能绑定一个函数，等同于写在DOM上的attributeeventTarget.addEventListenerTYPe,function,false可以绑多个函数，同个函数只能绑一次IE9以下不支持element.attachEvent(onTYPE,function  )

事件绑定

//1.d.onclick = function(){};//2.var d = document.getElementById('theD');d.addEventListener('click',function(){ });//在chrome里 ，this —>当前元素//IE,this->window//3.function divclick(){}

百度 HTML DOM事件

https://www.runoob.com/jsref/dom-obj-event.html

解绑定

1.onTYPE = null

2.eventTarget.removeEventListener(TYPE,function)IE9以下不支持

3.element.detachEvent(onTYPE,function) IE only

事件处理模型：事件冒泡(击鼓传花)

事件冒泡：同一事件，子元素的事件触发后再触发父元素同一元素：先触发父元素。再触发子元素 IE没有事件捕获触发顺序：捕获，事件执行，最后冒泡focus,blur,change,submit,reset,selete不冒泡

阻止默认事件(冒泡的取消)

方法一，return false

document.oncontextmenu = function(e){

return false;};

方法二：e.stopPropagation()

document.addEvenListener('contextmenu',functiom(e) )

三：

var a = document.getELementById('aid');a.addEventListener('click',function(e)){e = e ||window.event;if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}},false);

## 事件委托

利用事件冒泡，在父节点响应事件，而不是在子节点上响应事件

优点：性能更高；灵活，不需要大量操作element

AJAX

AJAX步骤

1.创建XMLHttpRequest对象 初始化

2.向服务器发送请求

3.响应函数

4.响应事件

5.Parse JSON数据格式及更新DOM

js原生实现

function loadXMLDoc(url){    xmlHttp = null;    if(window.XMLHttpRequest){//游览器        }elseif(window.ActiveXObject){xmlHttp = new ActiveXObject('Microsoft XML Http');}//IE6.IE5}

xmlHttp.open('GET',url + '?t=' + Math.random(),ture);GET:将参数放在URL后面，使用&和？的方式拼写www.taobao.com？key1=value1&key2=value2局限：最长2048，特殊字符需要编码urlencode可能会缓存POST :先发HTTP头，再发参数，参数在后续的数据包中，没有长度限制，不会缓存a:ture,异步，调用返回。数据包来的时候会触发事件 false,同步

AJAX in Jquery

jquery里都是数组$(document).ready(){ $('#theB').click(function(){ htmlobj = $.ajax({ type : "get", url : './json/data.json', async : ture, dataType:'json', success: function(data){

       }            })});

function jsonToHTML(json){ var strTmp = $( )}}

JQuery

是一个js库极大的简化了js编程可以通过一行简单等等标记被添加到代码中 HTML元素截取 HTML元素选取 CSS操作(只能操作DOM) HTML事件函数 js特效和动画 HTML DOM 遍历和修改

JQuery 选择器

Jquery选择器允许对HTML元素组或单个元素进行操作Jquery选择器基于div类(class属性)，类型(Tag),属性值等进行查找或者选择HTML元素Jquery是基于原有的CSS选择器，还自定义了一些选择器Jquery中所有选择器都以$开头

1.基础选择器

// *代表匹配所有$('*').css('backgroud - color', 'red');//,表示或$('div').css('backgroud - color','red');$('div,p').css('backgroud - color','red');匹配id$('#id01,#id02').css('backgroud - color','red');匹配class$('.class01').css('backgroud - color','red');

2.层次选择器

//直接或间接选择$('div p').css('backgroud - color','red');// 直接后代选择$('span>p').css('backgroud - color','red');//临接或不临接的后续选择(兄弟里选择)$('p~p').css('backgroud - color','red');//临接的后续选择(兄弟里选择)$('p+p').css('backgroud - color','red');

3.基本过滤选择

$('div:first').css('backgroud - color','red');$('div:last').css('backgroud - color','red');$('div:not(.class01)').css('backgroud - color','red');div:even :奇数        odd偶数div:eq(0)下标div:gt(2)从第三个开始div:lt(2)前两个

回调 动画function animateDiv(){    $('div:eq(0)').animal({width:'50%'},'slow')    $('div:eq(0)').animal({width:'100%'},'slow',animateDiv)}animateDiv();$(document).ready(function(){    $('#theB').click(function(){        $(':anmateed').css('background','yellow');    })})$('div:nth-child(3n+2)').css('background-color','red');$('div:nth-of-type(3n)').css('background-color','red');

4.可见性过滤选择器

//display:none 或者 .input type=hidden不可见，没有它的位置//visibility:hidden 或者 opactiy:0 不可见，但是有位置$(':hidden').css('display','block');

5.内容过滤器

包含文本字符$('div:contains(\'3\')').css('background-color  ','red');空的$('div:empty().text(123);包含子元素或者文本$('div:parent').css('backgroud-color','green');包含子元素$('div:hass(p)'.css('background-color','red');

6.属性过滤选择器

带属性的$('div[myAttr]').css('background-color','red');带属性且符合属性值$('div[myAttr=\'a11'\]').css('background-color','red');带属性但是不符合属性值$('div[myAttr][myAttr !=\'a11']').css('background-color','')属性值以xxx(开头^结尾$包括*)$('div[myAttr ^=\'1']').css('','')

7.表单过滤器

$(':input').css('display','none');$(':text').css('display','none');$(':password').css('display','none');$(':radio').css('display','none');//按钮$(':checkbox').css('display','none');//打勾$(':submit ').css('display','none');//提交按钮reset复位 button按钮image图片