js与jq对象比较 ＜笔记＞

JS与JQ对象比较

1,js与jq对象的获取:

js:

getElementByXxxxx(“元素选择”);

jq:

$(“元素选择器”)

2,js与jq对象输出:

js:

[object HTMLXxxxElement]

jq:

[object Object]

3,获取input输入的内容:

js:

document.getElementById(“profession”).value;

jq:

$("#profession").val();

4,修改html内容:

js:

js对象.innerHTML=“XXXX”;

JQ:

JQ对象.html(“xxxx”);

5,修改css属性:

js:

js对象.style.css属性 = “xxxx”;

jq:

jq对象.css(“css属性名”，“属性值”);

添加多个属性:

jq对象.css({“css属性1”:“属性值1”,“css属性2”:“属性值2”});

给元素添加已经有的元素css样式:

$(“div”).addClass(“css样式”);

$(“div”).addClass(“css样式1 css样式2”);

删除元素css样式:

$(“div”).removeClass(“css样式”);

删除元素所有的css样式:

$(“div”).removeClass();

切换元素的样式:

$(“div”).toggleClass(“css样式”)；

6,与标签属性相关的方法:

js:

获取属性:包括style,class属性

js对象.getAttribute(“属性名”)

修改属性:

js对象.属性值=新属性值;

js对象.setAttribute(属性名,属性值);

jq:

添加属性:

jq对象.attr(“属性名”,“属性值”);

移除属性:

jq对象.removeAttr(“属性名”);

获取属性 :

var 属性值=jq对象.attr(“属性名”);

获取返回值为true/fasle使用prop()函数,获取到的是boolean类型的值,例如:disable,checked

jq对象.prop(“checked”);

7,jq与js相互转换:

js->jq

jq对象 = $(js对象);

jq->js

js对象 = jq对象[0];

8,js与jq的html事件:

常用dom事件:

js事件	jq事件	描述
onchange	change()	HTML 元素改变
onclick	click()	用户点击 HTML 元素
onmouseover	mouseover()	用户在一个HTML元素上移动鼠标
onmouseout	mouseout()	用户从一个HTML元素上移开鼠标
onkeydown	keydown()	用户按下键盘按键
onload	load()	浏览器已完成页面的加载
onfocus	focus()	元素获取焦点时触发
onblur	blur()	元素失去焦点时触发
onsubmit	submit()	表单提交事件
	hover()	鼠标悬浮事件

js:

html事件写在标签中

<div  js事件名称="函数(参数)">

jq:

jq对象.jq事件函数(function(){

​ 函数体,

​ 可以调用其他函数;

​ this->当前触发此事件的js对象,

​ $(this)->当前触发此事件的jq对象

})

9,js与jq表单提交验证:

js:

<form onsubmit="return true/false/函数()">

jq:

$(“表单对象”).submit(function(){

​ return true/false;

})