JavaScript和Jqurery

简单介绍

JavaScript是NetScape公司为Navigator浏览器开发的，是写在HTML文件中的一种**脚本语言**，能实现**网页**内容的交互显示。当用户在客户端显示该网页时，浏览器就会执行JavaScript程序，用户通过交互的操作来改变网页的内容，来实现HTML语言无法实现的效果。Jqurery是对JavaScript的封装，使用更加简便。

dom回顾

1. document object model 文档对象模型

1. 程序运行浏览器会html代码装载成一个树 document树

2. 节点

1. dom树:document

2. 元素:elements 比如：<a> <input> <div>等

3. 属性:attribute 比如：name id align 等

4. 文本节点:textNode

功能

1. document 对象:

1. 找元素->dom对象 (四种方式)

2. 动态创建元素,属性,文本节点

2. element

1. 获取自己的属性

1. dom.value

2. 改变自己的样式

1. dom.style.xx

3. 添加孩子

1. 元素

2. 文本节点

4. 内部html源码

1. innerHTML

document找元素

1. var eDom = document.getElementById("id值");

当前界面唯一

2. var eDomS = document.getElementsByClassName("classname属性的值");

返回数组 ,可以通过角标去获取元素

3. var eDomS = document.getElementsByName("name属性的值");

返回数组 ,可以通过角标去获取元素

4. var eDomS = document.getElementByTagName("标签名");

5. 三大属性

1. id js

2. name 服务器

3. class css

创建元素

1. document.createElement("元素标签名");

document.createElement("a");

2. document.createAttribute("属性名");

3. document.createTextNode("字符串");

var aElement = document.createTextNode('中国');

element

1. element.appendChid(节点);

2. element.removeChid(节点);

3. element.setAttribute("属性名","值");

JavaScript和jQuery的区别

1、转换 (有的人喜欢js,jq)

1. js转成jquery

通过js找到dom

转成jq对象

方式 $(dom);

2. jquery转成 js

通过jquery找jquery对象

转成js

get(0);

2、事件

1. js: onxxx

1. 内联 onclick(add());

2. 事件分配

* dom.οnclick=fn;

2. jquery:所有的on去除

1. $jqObj.click(fn);

1. dom.onclick = fn;

3、加载DOM
JavaScript： window.onload
function first(){
alert('first');
}
function second(){
alert('second');
}
window.onload = first;
window.onload = second;
只会执行第二个window.onload；不过可以通过以下方法来进行改进：
window.onload = function(){
first();
second();
}
Jquery： $(document).ready()
$(document).ready(){
function first(){
alert('first');
}
function second(){
alert('second');
}
$(document).ready(function(){
first();
}
$(document).ready(function(){
second();
}
//两条均会执行
}
4、创建元素

JavaScript：

1. document.createElement("元素标签名");

2. document.createAttribute("属性名");

3. document.createTextNode("字符串");

JQuery：

$("<a></a>");

1.元素属性

JavaScript：

element.属性名

element.setAttribute("属性名","值");

element.removeAttribute("属性名","值");

JQuery：

获取: $("").attr("属性名");

设置: $("").attr("属性名","属性值");

$("").attr('属性名':'属性值','属性名':'属性值');

移除: $("").remove("属性名");

2. 为属性赋值
JavaScript：
属性名.value = "属性值";
jQuery:
属性名.val("属性值");

3 .改变元素的内容
JavaScript：
dom.innerHTML = "";
jQuery :

$jq.html();

$jq.text();

text : 获取普通文本设置普通文本

html : 代码

5、获取元素
1.id
JavaScript： document.getElementById('idName')
JQuery： $('#idName')

2. class
JavaScript： document.getElementsByClassName("className");
JQuery： $('.className')
3.标签tag
JavaScript： document.getElementsByTagName('tagName')
JQuery： $('tagName')

注意：

jQuery可以同时获取多个元素，同时操作多个元素

$("#id,.className，'tagName'");

6、删除节点
JavaScript：
element.removeChild(node)
removeChild()方法将一个给定元素里删除一个子节点
JQuery：
remove();
remove()方法作用就是从DOM中删除所有匹配的元素，remove()方法还可以与其他的过滤选择器结合使用，非常方便。
eg，将ul li下的title不是"Hello"的li移除：
$('ul li').remove(li[title!='Hello']);
empty();方法作用是清空节点。
7、替换节点
JavaScript：
element.replaceChild(newChild,oldChild)
该方法是将一个给定父元素里的一个子节点替换为另外一个节点。
JQuery：
replaceWith()、replaceAll()

8、CSS操作
JavaScript：
dom.style.backgroundColor="red";
JQuery：
1. 获取: $().css("background-color");

2. 设置: $().css("background-color","red");

显示/隐藏元素
JS
abc.style.display = "none";
abc.style.display = "block";

jQuery
abc.hide();
abc.show();

abc.toggle();

滑动

1. slideUp

2. slideDown

3. slideToggle

淡入淡出

1. fadeIn

2. fadeOut

3. fadeToggle

JavaScript和Jqurery相关推荐

【AJAX】JavaScript的面向对象
Ajax中后端数据返回后需要前端通过JavaScript来实现动态数据更新的问题.所以,在Ajax中加深了一遍JavaScript面向对象的印象. 基础部分: JavaScript中创建对象并简单对象 ...
【JavaScript总结】JavaScript语法基础：JS高级语法
作用域链: 1.JS中只有函数能够限定作用域的范围: 2.变量处理在制定的函数范围内,还有一个特殊的作用域,就是没有用var 声明的全局作用域 3.js中的作用域链是为了清晰的表示出所有变量的作用范围 ...
【JavaScript总结】JavaScript语法基础：DOM
->DOM的理解:文档对应dom树 ->有了DOM能做什么:DOM的操作 html文档做为DOM树模型,DOM树的节点就是对象.对象会触发事件来执行一些事件代码. C#中的事件是一个委托变 ...
【JavaScript总结】JavaScript语法基础：JS编码
运算符数学:+. -. *. / 逻辑:>. < .>= .<=. == . !=.&&.|| . === .!==(完全等于) 对象相关 new delet ...
【JavaScript总结】JavaScript语法基础：数据类型
------>数据类型有哪些? ->基本类型:数字类型,布尔类型,字符串类型 ->引用类型:对象类型,函数类型 ->空类型:null 和 undefined ->运算符: ...
【JavaScript总结】JavaScript发展与学习内容
发展: 最初浏览器是为大学里浏览文档用,从地址栏输入文档地址,找到文档显示. 后来各种需求(购物网站,个人博客)出现,已有功能不能满足需求. 可人们依旧在努力满足这种需求,但实现后的效果很不尽人意. ...
Python：模拟登录、点击和执行 JavaScript 语句案例
案例一:网站模拟登录 # douban.pyfrom selenium import webdriver from selenium.webdriver.common.keys import Keys ...
[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
[JavaScript] JavaScript 数组挖掘，不只是讲数组哟
课程来源:后盾人数组引用类型分析数组的定义 const array = new Array('hello', 'dust', 1, 2, 3, 4, 5) console.log(array) l ...

JavaScript和Jqurery

JavaScript和Jqurery相关推荐

最新文章

热门文章