1.入口函数
js: window.onload = function(){js代码} 实质就是一个事件,拥有事件的三要素,事件源,事件,事件处理程序。等到所有内容,以及我们的外部图片之类的文件加载完了之后,才会去执行。只能写一个入口函数。
jq: $(function(){}) $(document).ready(function(){}) 在html所有的标签都加在之后就会去执行,可以写多个。
2.获取元素
js: document.getElementsByTagName("a") 获取标签是a的,返回的是个集合 document.getElementById("demo") 获取到ID是demo的对象 document.getElementsByClassName("class") 获取到类名是一致的所有对象 有兼容性问题 document.getElementsByTagName("*") 获得所有的标签,用来遍历 html5新增选择器 document.querySelector(selector) 可以通过CSS选择器的语法找到DOM元素,返回第一个满足选择器 条件的元素 一个dom对象 document.querySelectorAll('.item');返回所有满足该条件的元素 一个元素类型是dom类型的数组
jq: $("")
选择器 | 实例 | 选取 |
---|---|---|
* | $("*") | 所有元素 |
#id | $("#lastname") | id="lastname" 的元素 |
.class | $(".intro") | 所有 class="intro" 的元素 |
element | $("p") | 所有 <p> 元素 |
.class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
:first | $("p:first") | 第一个 <p> 元素 |
:last | $("p:last") | 最后一个 <p> 元素 |
:even | $("tr:even") | 所有偶数 <tr> 元素 |
:odd | $("tr:odd") | 所有奇数 <tr> 元素 |
:eq(index) | $("ul li:eq(3)") | 列表中的第四个元素(index 从 0 开始) |
:gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
:lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
:not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
:header | $(":header") | 所有标题元素 <h1> - <h6> |
:animated | 所有动画元素 | |
:contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
:empty | $(":empty") | 无子(元素)节点的所有元素 |
:hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
:visible | $("table:visible") | 所有可见的表格 |
s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
[attribute] | $("[href]") | 所有带有 href 属性的元素 |
[attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
[attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
[attribute$=value] | ='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
:input | $(":input") | 所有 <input> 元素 |
:text | $(":text") | 所有 type="text" 的 <input> 元素 |
:password | $(":password") | 所有 type="password" 的 <input> 元素 |
:radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
:checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
:submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
:reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
:button | $(":button") | 所有 type="button" 的 <input> 元素 |
:image | $(":image") | 所有 type="image" 的 <input> 元素 |
:file | $(":file") | 所有 type="file" 的 <input> 元素 |
:enabled | $(":enabled") | 所有激活的 input 元素 |
:disabled | $(":disabled") | 所有禁用的 input 元素 |
:selected | $(":selected") | 所有被选取的 input 元素 |
:checked | $(":checked") | 所有被选中的 input 元素 |
3.相互转换
js==>jq 得到jQuery对象 var btn = document.querySelector('#btn'); $("btn")
jq==>js 得到DOM对象 $("#btn").get(0) $("#btn")[0]
4.事件处理程序
js: var btn = doncument.querySelector('#btn'); btn.οnclick=function(){代码块} btn.addEventListener('click',function(){代码块}) //事件 onclick 单击事件 onblur 失去焦点事件 onchange 当对象或选中区的内容改变时触发。 onmouseover 当用户将鼠标指针移动到对象内时触发。 onmouseout 当用户将鼠标指针移出对象边界时触发。 onsubmit 当表单将要被提交时触发 onload 加载事件 //补充 1、onmouseover、onmouseout:鼠标经过时自身触发事件,经过其子元素时也触发该事件;(父亲有的东西,儿子也有) 2、onmouseenter、onmouseleave:鼠标经过时自身触发事件,经过其子元素时不触发该事件。(父亲的东西就是父亲的,不归儿子所有) 这四个事件两两配对使用,onmouseover、onmouseout一对,onmouseenter、onmouseleave一对,不能混合使用。
jq: $("#btn").click(function(){代码块})
事件 | 说明 | |
---|---|---|
鼠标事件 | click | 单击 |
dblclick | 双击 | |
mouseenter | 当鼠标指针穿过元素时,会发生 mouseenter 事件。 | |
mouseleave | 当鼠标指针离开元素时,会发生 mouseleave 事件 | |
hover | hover()方法用于模拟光标悬停事件。 | |
mouseup() | 当在元素上松开鼠标按钮时,会发生 mouseup 事件。 | |
mousedown() | 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件 | |
键盘事件 | keypress | 键被按下 |
keydown | 键按下的过程 | |
keyup | 键被松开 | |
表单事件 | submit | 当提交表单时,会发生 submit 事件。该事件只适用于 <form> 元素。 |
change | 当元素的值改变时发生 change 事件(仅适用于表单字段)。 | |
focus | 当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时),发生 focus 事件 | |
blur | 当元素失去焦点时发生 blur 事件。 | |
文档/窗口事件 | load | load() 方法添加事件处理程序到 load 事件。//jQuery 版本 1.8 中被废弃,在 3.0 版本被移除。 |
resize | 当调整浏览器窗口大小时,发生 resize 事件。 | |
scroll | 当用户滚动指定的元素时,会发生 scroll 事件。 | |
unload | 当用户离开页面时,会发生 unload 事件。//jQuery 版本 1.8 中被废弃,在 3.0 版本被移除。 |
5.设置类
js: document.querySelector('#btn').className="active"; document.querySelector('#btn').classList.add("active") 可以同时设置多个类名。 //补充: document.querySelector('#xx').setAtrribute('className','class2'); document.querySelector('#xx').classList.add(".xxx");添加一个或多个类 document.querySelector('#xx').classList.remove(".xxx");移除一个或多个类 document.querySelector('#xx').classList.toggle(".xxx");存在就删除,没有就添加 document.querySelector('#xx').classList.contains('className'); 是否有该类
jq: addClass() ==> $(".XX").addClass("xxx"); 添加一个或多个类 removeClass() ==> $(".XX").removeClass("xxx");移除一个或多个类 toggleClass() ==> $(".XX").toggleClass("xxx");存在就删除,没有就添加 hasClass() ==> $(".XX").hasClass("xxx");检查是否存在这个类名 css() ==> $(".XX").css("color","red"); 读操作:获取匹配元素集合中第一个元素的指定样式值(一个或多个)、读取多个样式值的操作是在jQuery v1.9才加入的 写操作: 为匹配元素集合中的每一个元素设置一个或多个CSS属性的值、传入的参数可以是单个的键值对、也可以是PlainObject指定的多个值 attr() ==> $(".XX").attr("class","xxx");attr()方法设置或返回被选元素的属性值、根据该方法不同的参数、其工作方式也有所差异 prop() ==> $(".xx").prop("class","xxx")
6.设置内容,html和text
js: document.querySelector('#xx').innerHTML = "<h1>内容</h1>" document.querySelector('#xx').innerText = "内容" document.querySelector('#xx').value = "" 获取表单元素
jq: $("#XX").html() 1.普通元素内容html()(相当与原生的innerHTML) $("#XX").html()//获取元素内容 $("#XX").html("内容")//设置元素的内容 1.普通元素内容text()(相当与原生的innerText) $("#XX").text()//获取元素内容 $("#XX").text("内容")//设置元素的内容 1.获取表单内容val()(相当与原生的value)/*val() 方法返回或设置被选元素的值。 元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数,则返回被选元素的当前值*/ $("#XX").val()//获取表单的值 $("#XX").val("内容")//设置表单的值
7.属性
js:(一般用于自定义属性) document.querySelector('#xx').getAttribute('属性名') 获取元素属性 document.querySelector('#xx').setAttrbute('属性名',value) 设置元素属性 document.querySelector('#xx').removeAttrbute('属性名') 移除属性 用于操作自定义属性
jq: attr() ==> $(".XX").attr("属性名","属性值");attr()方法设置或返回被选元素的属性值、根据该方法不同的参数、其工作方式也有所差异 prop() ==> $(".xx").prop("属性名","属性值")
8.节点
js: document.createElement("p");//创建一个p标签 ele.appendChild(newNode);//生JS向子节点列表的末尾添加新的子节点 ele.insertBefore(newNode, targetNode);//原生JS在节点的已有子节点之前插入一个新的子节点 ele.parentNode.removeChild(ele);//移除节点
jq: $('<p></p>');//创建一个p标签 $('#xx').append('<p>Hello World.</p>');//在匹配元素子节点列表结尾添加内容 $('#xx').appendTo('<p>Hello World.</p>');//把匹配元素添加到目标元素子节点列表结尾 $('#xx').prepend('<p>Hello World.</p>');//在匹配元素子节点列表开头添加内容 $('#xx').prependTo('<p>Hello World.</p>');//把匹配元素添加到目标元素子节点列表开头 $('#xx').before('<p>Hello World.</p>');//在目标元素前添加 $('#xx').after('<p>Hello World.</p>');//在目标元素后添加 //$('#xx').remove();//删除节点 $("ul").remove(); //可以删除匹配的元素 自杀 $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子 $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
9.数组操作
js: 数组元素的添加 arrayObj. push();// 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift();// 将一个或多个新元素添加到数组开始,数组中的元素自动后移,返回数组新长度 arrayObj.splice();//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。 数组元素的删除 arrayObj.pop(); //移除最后一个元素并返回该元素值 arrayObj.shift(); //移除最前一个元素并返回该元素值,数组中元素自动前移 arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所移除的元素 数组的截取和合并 arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分,注意不包括 end 对应的元素,如果省略 end 将复制 start 之后的所有元素 arrayObj.concat(); //将多个数组(也可以是字符串,或者是数组和字符串的混合)连接为一个数组,返回连接好的新的数组 数组的拷贝 arrayObj.slice(0); //返回数组的拷贝数组,注意是一个新的数组,不是指向 arrayObj.concat(); //返回数组的拷贝数组,注意是一个新的数组,不是指向 数组元素的排序 arrayObj.reverse(); //反转元素(最前的排到最后、最后的排到最前),返回数组地址 arrayObj.sort(); //对数组元素排序,返回数组地址 数组元素的字符串化 arrayObj.join(','); //返回字符串,这个字符串将数组的每一个元素值连接在一起,中间用 ,隔开。 toLocaleString 、toString 、valueOf:可以看作是join的特殊用法,不常用
jq: jq对数组的封装 $.each(object,[callback])//通用例遍方法,可用于例遍对象和数组。不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。 object:需要例遍的对象或数组。 callback:每个成员/元素执行的回调函数。 一、遍历 $.each(arr, callback(key, val)); 1、回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容 2、如果需要退出 each 循环,可使回调函数返回 false,用return false, 其它返回值将被忽略. 二、筛选 $.grep(arr, callback, invert) 1、此函数至少传递两个参数,第三个参数为true或false,对过滤函数返回值取反 2、默认invert为false, 即过滤函数返回true为保留元素. 如果设置invert为true, 则过滤函数返回true为删除元素. 3、过滤函数必须返回 true 以保留元素或 false 以删除元素. 三、转换 $.map(arr,callback(key,val)) 1、将一个数组中的元素转换到另一个数组中。 2、和each函数差不多, 区别就是回调函数可以改变当前元素.返回null则删除当前元素. 四、合并 $.merge(arr1,arr2) 1、arr1后面加上arr2后返回arr1 五、判断 $.inArray(val,arr) 1、判断val是否在arr里面 2、确定第一个参数在数组中的位置, 从0开始计数(如果没有找到则返回 -1 ). 3、indexOf()返回字符串的首次出现位置,而$.inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0的值,若未找到则返回-1.