AJAX||Jquery各种选择器（js笔记）

Posted 2021-04-08 曾是少年派

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

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

事件

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

同步 || 异步

事件的三种绑定方法：
onTYPE = function(e){}
优点：兼容性好
缺点：只能绑定一个函数，等同于写在DOM上的attribute
eventTarget.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图片