diff --git "a/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.24\344\272\213\344\273\266\347\273\221\345\256\232.md" "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.24\344\272\213\344\273\266\347\273\221\345\256\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..fefcbd0e387102656628bea6774dd68f6869675c --- /dev/null +++ "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.24\344\272\213\344\273\266\347\273\221\345\256\232.md" @@ -0,0 +1,89 @@ +```` +## bind() 方法 + +bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。 + +将事件和函数绑定到元素 + +规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数。 + +当点击鼠标时,隐藏或显示 p 元素: + +``` +$("button").bind("click",function(){ + $("p").slideToggle(); +}); +``` + +## 链式调用 + +``` +$(function(){ + $('#txt').keyup( + function(){ + ... + } + ).blur( //直接跟在后面点连接 + function(){ + ... + } + ) + +} +) +``` + +## on()方法 + +向元素添加 click 事件处理程序: + +``` +$(document).ready(function(){ + $("p").on("click",function(){ + alert("段落被点击了。"); + }); +}); +``` + +## one()方法 + +one() 方法为被选元素添加一个或多个事件处理程序,并规定当事件发生时运行的函数。 + +当使用 one() 方法时,每个元素只能运行**一次**事件处理程序函数。 + +``` +//语法 (事件类型,function) +$(selector).one(event,data,function) + +//event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。 +//data 可选。规定传递到函数的额外数据。 +//function 必需。规定当事件发生时运行的函数。 +``` + +## off()方法 + +**提示:**如需添加只运行一次的事件然后移除,请使用 one()方法。 + +移除所有元素上的 click 事件: + +``` +$("button").click(function(){ + $("p").off("click"); +}); +``` + +## hover(鼠标移入移出) + +``` +$(function () { + $('div').hover( + function () { + $(this).css('color','red') + }, + function () { + $(this).css('color','white') + } + ) + }) +``` +```` \ No newline at end of file diff --git "a/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..c3462b0a8f16dd11233ad5a08b40d0be39a91cf3 --- /dev/null +++ "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" @@ -0,0 +1,81 @@ +```` +# 过滤方法 + +## 1 each遍历元素 + +### 1.each方法 + +方法描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1,其他对象通过其属性名进行迭代。 + +**需求描述:给定一个数组,使用$.each方法进行遍历输出** + +``` +var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50]; +$.each(arr, function (index, element) { + console.log(index, element); +}); +``` + +**需求描述:给定一个对象,使用$.each方法进行遍历输出** + +``` +var obj = { + name: 'Tom', + age: 28, + speak: function () {} +}; +$.each(obj, function (key, value) { + console.log(key, value); +}); +``` + +## 2. is过滤 + +is可以根据条件来判断,然后选取符合的元素 + +语法 + +``` +$().is(selector) +``` + +例如: + +``` +判断元素设置的属性是否可见 +$().is(":visible") +``` + +## 3.not() 反向过滤 + +is用来判断符合条件的元素,not用来判断不符合的元素 + +其中,not()方法可以使用选择器过滤,也可以使用函数过滤 + +``` +语法:$().not(selector或fn) +``` + +## 4.filter() + +方法描述:筛选元素集合中匹配表达式或通过传递函数测试的元素集合。 + +``` +需求描述:查找所有id为two的li标签设置其背景为红色 + +$('ul>li').filter('[id=two]').css('background', 'red'); +``` + +## 5.has() + +has方法和filter相似,但是他只有选择器过滤,比较精简,所以运行速度比较块 + +``` +语法 +$().has(selector) +``` +```` \ No newline at end of file diff --git "a/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.29AJAX.md" "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.29AJAX.md" new file mode 100644 index 0000000000000000000000000000000000000000..3f4dcb13b0e7cddd676348f9c36f725898d6336e --- /dev/null +++ "b/23\350\251\271\346\272\220\351\223\240/\347\254\224\350\256\260/11.29AJAX.md" @@ -0,0 +1,42 @@ +# 一、概念 + +### 1.什么是Ajax + +Ajax(Asynchronous Javascript And XML),即是异步的JavaScript和XML,Ajax其实就是浏览器与服务器之间的一种异步通信方式 + +异步的JavaScript + +它可以异步地向服务器发送请求,在等待响应的过程中,不会阻塞当前页面,在这种情况下,浏览器可以做自己的事情。直到成功获取响应后,浏览器才开始处理响应数据。 + +XML + +是前后端数据通信时传输数据的一种格式,现在已经不怎么用了,现在比较常用的是 JSON + +所以归纳上述的概念,Ajax就是在浏览器不重新加载网页的情况下,对页面的某部分进行更新。 + + +### 2.应用场景 + +**注册页面** + +**搜索提示** + + + +## 发送 Ajax 请求 + +要发送 Ajax 请求,首先需要实例化一个 XMLHttpRequest 对象,示例代码如下: + +var request = new XMLHttpRequest(); + +然后,使用 XMLHttpRequest 对象的 open() 方法来初始化一个请求,open() 方法的语法格式如下: + +XMLHttpRequest.open(method, url, async, user, password); + +参数说明如下: + +- method:请求的类型(使用的 HTTP 方法),例如 GET、POST、PUT、HEAD、DELETE 等; +- url:请求的地址; +- async:可选参数,布尔类型,表示是否请求是否异步执行,默认值为 true; +- user:可选参数,表示用户名,主要用来认证,默认值为 null; +- password:可选参数,表示密码,同样用来认证,默认值为 null。 \ No newline at end of file