JavaScript和Jqurery

xiaoxiao2021-02-28  11

简单介绍

   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() 8CSS操作  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

 

转载请注明原文地址: https://www.6miu.com/read-2450345.html

最新回复(0)