浅谈 -- ♡ ‧₊˚ JS 与JQ的区别 ‧₊˚ ♡

浅谈 -- ♡ ‧₊˚ JS 与JQ的区别 ‧₊˚ ♡

jQuery是一个Javascript库,是对于ECMAScript、dom、bom的一个浅封装,让用户更方便操作。

让我们简单谈谈JS与JQ的区别吧!

♡ ‧₊˚  定义  ‧₊˚ ♡

js是网页的脚本语言,js是语言.

jQuery是用js语言写出来的一个框架.

♡ ‧₊˚  入口函数  ‧₊˚ ♡

JS:等到所有内容,以及我们的外部图片之类的文件加载完了之后,才会去执行。只能写一个入口函数。

jQUery:是在 html所有标签都加载之后,就回去执行。可以写多个。

  1. // 原生JS与JQ入口函数的区别
  2. // 原生JS入口函数
  3. window.onload = function(){
  4. alert('我是入口函数1')
  5. }
  6. // 后面的会覆盖前面的
  7. window.onload = function(){
  8. alert('我是入口函数2')
  9. }
  10. jQuery的入口函数
  11. $(function(){
  12. alert('我是入口函数1')
  13. });
  14. // 两个都会执行,依次弹出
  15. $(function(){
  16. alert('我是入口函数2')
  17. });

 

♡ ‧₊˚  创建DOM元素  ‧₊˚ ♡

JS:利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。   

jQuery:使用$就可以直接创建DOM元素。

  1. // 原生JS使用DOM去操作文本中的节点
  2. var container = document.getElementById('container')
  3. console.log(container);
  4. // 创建一个节点
  5. var newP= document.createElement('p')
  6. console.log(newP);
  7. // 给节点设置内容
  8. newP.innerHTML = '我是一个大帅哥'
  9. // 将节点添加到页面对应的结构中
  10. container.appendChild(newP)
  11. // 使用JQ
  12. $(function(){
  13. // 创建一个div到body尾部
  14. $('<div>我是一个div标签</div>').appendTo('body')
  15. })

♡ ‧₊˚ 获取DOM元素  ‧₊˚ ♡

  1. // js:
  2.   document.getElementById("elementId");//返回一个元素,按元素的ID名称来访问
  3.   document.getElementsByName("elementName"); // 返回一组元素,按元素的name名称来访问
  4.   document.getElementsByTagName("tagName"); // 返回一组元素,按标签来访问
  5.   document.getElementsByClassName("classname"); // 返回一组元素,按class来访问
  6. // jquery:
  7.   // 通过id获取
  8. $("#id").event;
  9.   // 通过class获取,
  10. $(.“css”).event();
  11.   // 通过属性html标签获取
  12. $(“p”).event(); // 是选中所有的p标签元素  
  13.   // 通过属性值获取,
  14. $(“div[pig]”).event() // 是选中div的属性为pig的元素
  15. $('div:first') // 选中第一个div
  16. $('div:last') // 选中最后一个div
  17.   // event是对选中的元素的操作。
  18.   // $(“div.p1”)和 $(“div .p1”)的区别。
  19.   $(“div.p1”) // 是对所有div进行筛选,选出class="p1"的div。
  20.   $(“div .p1”) // 是选中div下面的class="p1"的元素,不是这个div

♡ ‧₊˚ 操作CSS样式  ‧₊˚ ♡

  1. // JavaScript:
  2.   // 1.使用setAttribute设置class和style
  3.   document.getElementById("first").setAttribute("style","color:red");
  4.   // 2.使用.className添加一个class选择器
  5.   document.getElementById("third").className = "san";
  6.   // 3.使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法
  7.   document.getElementById("four").style.fontWeight = "900";
  8.   // 4.使用.style或.style.cssText添加一串行级样式:
  9.   document.getElementById("five_times").style = "color: blue;";//IE不兼容
  10.   document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";
  11. // JQuery:
  12.   $("#div2").css("color","yellow");
  13.   $("#div2").css({
  14.   "color" : "white",
  15.   "font-weight" : "bold",
  16.   "font-size" : "50px",
  17.   });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值