189 8069 5689

jquery和Js的区别和基础操作

jquery的语法和js的语法一样，算是把js升级了一下，这两种语法可以一起使用，只不过是用jqery更加方便

创新互联主营盐池网站建设的网络公司,主营网站建设方案,成都app软件开发公司,盐池h5微信小程序搭建,盐池网站营销推广欢迎盐池等地区企业咨询

一个页面想要使用jquery的话，先要引入一下jquery包，jquery包从网上下一个就可以，一般用带有min的，是压缩版的，如果还要引用其他js文件的话，一定要jquery包在上面，其他的引用放在他下面

先来看看如果使用Jquery的话，怎么来引用Jquery包

jquery和Js的区别和基础操作

这样来引用，然后就可以用Jquery方法了

和js的语法一样，都是写在这里面的

在Jquery中，$ 代表选择器

很多点击事件，特效都是在页面加载完成后再去执行

Jquery中在使用时，要在js代码最外层加上这样一句话   $(document).ready(function(e){})  选中当前页面有个ready事件，页面加载完成事件，页面加载完成后就进去走里面的事件，所以一般代码都写在花括号里面

来看一下用Jquery和Js输出统一内容，运行的结果会怎么样

jquery和Js的区别和基础操作

  



无标题文档

Jquery
    $代表选择器
JS
     选取样式
     操作内容
     操作属性
     操作样式11
//页面加载完成$(document).ready(function(e){//页面加载完成之后执行     //JS     //找元素     var a = document.getElementById("aa");     alert(a);    //Juery     //找元素     var b = $("#aa");     alert(b);     });

jquery和Js的区别和基础操作

运行后的结果

jquery和Js的区别和基础操作

点击确定

jquery和Js的区别和基础操作

 

 第一个弹出的是用Js写的

第二个弹出的是用Jquery写的

有的人就会问，为什么运行的结果会不一样呢？

因为Js中找元素，找的是DOM对象

Jquery中找对象，找的是Jquery对象

Jquery是JS的升级版，所以功能比较强大，Jquery对象中也包括DOM对象

来看一下怎么用Jquery取到DOM对象

jquery和Js的区别和基础操作

取b的索引0

看一下运行的结果

jquery和Js的区别和基础操作

点击确定

jquery和Js的区别和基础操作

两个是一样的结果

所以在使用中要知道怎么把Jquery对象转换成DOM对象

一般是不需要转换的，特殊情况才需要转

上面那种是根据div来找的，下面再来根据class来做

jquery和Js的区别和基础操作

代码截了关键的一部分

这里的a 包括div中的，还有span中的

看一下它运行的结果

jquery和Js的区别和基础操作

collection一般是集合的意思，但是在js中没有集合，它代表的是数组

如果要取它的第一项，可以找它的索引0

jquery和Js的区别和基础操作

看一下运行的结果

jquery和Js的区别和基础操作

找的是div

再把它改成索引1

jquery和Js的区别和基础操作

看看运行的结果

jquery和Js的区别和基础操作

索引1  找到的是span

所以如果想取到某一项时，可以使用索引来找到它

再来看一下Juery部分

jquery和Js的区别和基础操作

看一下运行结果

jquery和Js的区别和基础操作

输出的还是Jquery对象

要想取到div和span,看看来怎么做

jquery和Js的区别和基础操作

索引0，看取到的结果

jquery和Js的区别和基础操作

是div的

再看索引1

jquery和Js的区别和基础操作

看运行结果

jquery和Js的区别和基础操作

取到的是span

还有一种方式

jquery和Js的区别和基础操作

看看运行的结果

jquery和Js的区别和基础操作

取到的是Jquery对象

再看用标签名来找，先来看Juery中

jquery和Js的区别和基础操作

取它的索引0，看看运行的结果

jquery和Js的区别和基础操作

再看Js中，根据name找

jquery和Js的区别和基础操作

先做个表单

然后取索引0，运行一下

jquery和Js的区别和基础操作

取到的是input

Juery里面没有根据name找的方式

但是有属性的方式

根据属性来找

jquery和Js的区别和基础操作

看一下它运行的结果

jquery和Js的区别和基础操作

找的了input

如果给他自定义一个属性，aa="bb"

jquery和Js的区别和基础操作

jquery和Js的区别和基础操作

看运行的结果

也一样找到了

还可以用id的属性来找

jquery和Js的区别和基础操作

找的的结果div

jquery和Js的区别和基础操作

 

一般Juery常用的方式有这几种

jquery和Js的区别和基础操作

接下来来看一下js,Juery 在操作内容   操作属性和操作样式的区别

jquery和Js的区别和基础操作

Jquery
    $代表选择器

JS
    选取元素
    操作内容
    操作属性
    操作样式    
11
22
33 //页面加载完成$(document).ready(function(e) {         //页面加载完成之后执行          //JS         //找元素,DOM对象         //var a = document.getElementById("aa");         //alert(a);                  //var a = document.getElementsByClassName("aa");         //alert(a[1]);                  //var a = document.getElementsByTagName("div");                  //var a = document.getElementsByName("uid");         //alert(a[0]);                  //操作内容         //a.innerHTML //操作元素里面的html代码         //a.innerTEXT //操作元素里面的文本                  //a.value //操作表单元素的值                  //操作属性         //a.setAttribute("",""); //设置         //a.removeAttribute(""); //移除         //a.getAttribute(""); //获取                  //操作样式         //a.style.backgroudColor = "red";                   //Jquery         //找元素,Jquery对象         //var b = $("#aa"); //根据ID找         //alert(b[0]);                  //var b = $(".aa"); //根据class找         //alert(b[1]); //找到的是DOM对象         //alert(b.eq(1)); //找到的是Jquery对象                  //var b = $("div"); //根据标签名找         //alert(b[0]);                  //var b = $("[id='aa']"); //根据属性找         //alert(b[0]);                  //操作内容             //非表单元素             //b.html(); //操作元素里面的HTML代码，可以往里面放标签，设置样式             //b.text(); //操作元素里面的文本,可以往里面放参数                          //表单元素             //b.val("hello");                      //操作属性             //设置属性             //b.attr("bs","test");             //获取属性             //alert(b.attr("aa"));             //移除属性             //b.removeAttr("aa");                          //b.prop("checked",false);                      //操作样式,可以获取内嵌的样式         //b.css("background-color","red");         //alert(b.css("width"));         //alert(b.css("background-color"));        });

jquery和Js的区别和基础操作

操作的内容可以自己试验一下

相比之下，Jquery方式更为简便，同样的结果，js需要代码很长，Jquery需要的代码很短

 


文章标题：jquery和Js的区别和基础操作
文章来源：http://cdxtjz.cn/article/pccijc.html

其他资讯

联系我们

您好HELLO!
感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们， 我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
  • 电话：028- 86922220 18980695689
  • 商务合作邮箱：631063699@qq.com
  • 合作QQ： 532337155
  • 成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！

小谭观点

相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
友情链接： 成都网站建设   网站解决方案   定制网站   成都多线服务器托管   成都艺考培训   软文营销   成都微商城   分类目录网站   成都网站设计公司   四川艾名斯   
© Copyright 2023 小谭建站工作室All Rights Reserved.  成都网站建设 / 成都网站建设 / 响应式网站建设 / 成都服务器租用