JS和JQuery在运用时的基础区别

谈谈JS和JQuery在运用时的基础区别

jQuery能大大简化Javascript程序的编写,但是对于刚刚学习使用jQuery的同志来说,会因为js源码的使用而产生混淆...

要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:

<script language="javascript" src="/js/jquery.min.js"></script>

         ①JavaScript源代码         ②jQuery代码

1.获取id,以及获取class,tagname
document.getElementById('idName')   document.getElementsByTagName('tagName') //注意js没有直接获取class的方法
$('#idName')      $('.className')    $('tagName') 

2.在页面一开始加载就运行的函数 

①js源码时 需要在<body οnlοad="写好的方法名function" >

②jQuery代码时  只需要直接在$(function(){   $(选择器).把要用的内容写在后面 });  //运行页面后便会自行加载javascript里的脚本


3.在一个标签中插入指定文字

例如<div><li><lable>..假如他的id="id1" 我们要插入helloworld。

①js源码时 document.getElementById("id1").innerHTHL = "helloworld";

②jQuery代码时 $("#id1").html("helloworld"); 并且使用$("#id1").html()或.text()还能取到原本标签里存在的值

4.例如重新创建一个元素节点 我们创建一个input输入框 并且将其插入到一个标签("id1")

①js源码时   var n =document.getElementById("id1");

var txt = document.createElement("input");//新建文本框节点

txt.setAttribute("value",10);//设置里面的默认值为10,修改属性.setAttribute("onclick","update()");还可以添加方法
n.appendChild(txt);
//插入到id=id1的标签内

②jQuery代码时

var $b =$("<input type='text'/>"); //新建文本框节点

$b.attr("value",10); //设置里面的默认值为10,修改属性.attr()

$("#id1").append($b);//把新建的文本框插入到id=id1的标签内

5.取得文本框中的内容

<input type='text'id="id1 " value="10" />

①js源码时document.getElementById("id1").value;

②jQuery代码时$("#id1").val();

6.添加样式时的区别 <style> .bg{color:red; }</style>

①js源码时document.getElementById("id1").ClassName = 'bg';

②jQuery代码时$("#id1").addClass('bg');









评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值