jQuery与javascript

jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程。

javaScript（js）和jQuery（jq）都是找元素、操作元素

Dom操作的区别：

jq必须调用文件：jquery-3.2.1.min.js

1、操作元素；

js:

docunment.getElementById("id")；//根据id找，最多找一个；
var a =docunment.getElementById("id");//将找到的元素放在变量中；
docunment.getElementsByName("name")；//根据name找，找出来的是数组；
docunment.getElementsByTagName("name")；//根据标签名找，找出来的是数组；
docunment.getElementsByClassName("name")// 根据classname找，找出来的是数组；

jq:$(选择器)

选择器是基于已经存在的 css选择器，除此之外，它还有一些自定义的选择器。

$("img")//提取img标签的元素
$("#aa")//提取id为aa的元素
$(".bb")//提取class为bb的元素
/*自定义*/
$(this)//提取当前html的元素
$("p:first")//选取第一个 <p> 元素
$("[href]")//选取带有 href 属性的元素

2、操作内容：

Js对象:单用表示提取，加等号表调用

jsobj.innerHTML//非表单元素
jsobj.value//表单元素

Jq对象

/*非表单元素*/
jqObj.html()//提取   
jqObj.html(“123”)//赋值
/*表单元素*/
jqObj.val() //提取
jqObj.val(“13”)//赋值

3、操作属性：

Js对象

jsObj.getAttribute(属性名称);//提取属性值

jsObj.setAttribute(名称，值);//添加属性

jsObj.removeAttribute(属性名称);//删除属性

Jq对象

jqObj.attr();//标准格式，一个参数是获取，两个参数是设置
jqObj.attr(“class”,”add”);//添加属性
jqObj.attr({“class”：”add”,”id”:”aa”});//同时添加多个属性
jqObj.removeAtter();//删除属性
jqObj.addClass('add');//添加一个classs属性，值为add

4、操作样式

js:dom操作css样式只能操作“行内样式”

<div style=”300px; height:200px; background-color:pink;”></div>
①获取css样式
元素节点.style.css样式名称;
divnode.style.width;  //获取宽度样式
②设置css样式(有则修改、没有则添加)
    元素节点.style.css样式名称 = 值;
divnode.style.width =‘500px’//设置div宽度样式

jquery:dom操作css样式可以操作"内联、内嵌"

jqObj.css();//css样式操作
$("p").css("background-color");//提取样式属性
 $("p").css("background-color","yellow");//添加样式
$("p").css({"background-color":"yellow","font-size":"200%"});添加多个样式

5、操作事件

jsObj.onclick = function(){}

jquery

jqObj.click(function(){});
jqObj.html('<button></button>');//添加标签

页面加载完成

js对象

Window.onload=function(){}

jq对象

$(document).ready(function(){});

$(function(){});

绑定方法

$('div').bind('mouseover',f1(){

})