js与JQ区别

来源：互联网发布：淘宝导航所有分类代码编辑：程序博客网时间：2024/06/06 11:04

javascript简单介绍
ECMAScript
1.语法
2.变量：只能使用var定义，如果在函数的内容使用var定义，那么他是一个局部变量，如果没有使用var定义他是一个全局变量，弱类型
3.数据类型：原是数据类型（undefined/null/string/number/boolean)
4.语句
5.运算符：==与===的区别
6.函数：两种写法（有名称的，匿名的）
BOM对象：
window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(参数),back(),forward()
location:href属性
事件：
onsubmit()此事件写在form标签中，必须有返回值，onsubmit=return checkForm()
onload()此事件只能写一次并且放到Body标签中，页面加载事件，所有的其他操作（匿名方式)都可以放到这个绑定的函数里面
其他事件放到需要操作的元素位置(onclick,onfocus,onblur)
onfocus,onblur:聚焦离焦事件，用于表单校验是的时候比较合适
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress:搜索引擎使用较多
onmouseover/onmouseout/onmousemove:购物网站详情页
onchange:当用户改变输入内容的时候使用这个事件(二级联动)
获取元素：
document.getElementById("id")
获取元素的值：
document.getElementById("id").value;
向页面输出
弹窗：alert()
向浏览器中写入内容:document.write("内容")

向页面指定位置写入内容innerHTML

js与jq加载

<!DOCTYPE html><html><head><title>获取元素</title><script type="text/javascript" src="../jq/jquery-1.8.3.js"></script><script>window.onload=function(){alert("张三");}//传统的方式页面加载会存在覆盖问题，加载比jq慢(整个页面加载完毕<包括里面的其他内容>)window.onload=function(){alert("李四");}//jQuery的加载比js加载快(当整个dom树结构绘制完毕就会加载)jQuery(document).ready(function(){alert("老王");});//jq不存在覆盖问题，加载时顺序执行$(document).ready(function(){alert("王五");});$(function(){alert("汾酒");});</script></head><body></body></html>

JQ的获取

<!DOCTYPE html><html><head><title>获取元素</title><script type="text/javascript" src="../jq/jquery-1.8.3.js"></script><script>$(function(){//传统方式获取document.getElementById("btn").onclick=function(){location.href="a.html";}//jq方式的获取$("#btn").click(function(){location.href="b.html";});});</script></head><body><input type="button" value="点我有惊喜" id="btn"/></body></html>

DOM与jQ对象之间的转换关系

<!DOCTYPE html><html><head><title>Dom与JQ对象之间的转换</title><script type="text/javascript" src="../jq/jquery-1.8.3.js"></script><script>function write1(){//js的DOM操作document.getElementById("span1").innerHTML="萌萌哒";var spanEle=document.getElementById("span1");//将DOM对象转换为JQ对象$(spanEle).html("思密达");}$(function(){$("#btn").click(function(){//jq对象无法操作js里面的属性和方法！！！//$("#span1").innerHTML="呵呵哒";$("#span1").html("呵呵哒");//JQ对象想DOM对象转换$("#span1").get(0).innerHTML="美美哒";$("#span1")[0].innerHTML="棒棒哒";});});</script></head><body><input type="button" value="js写入" onclick="write1()"/><input type="button" value="jq写入"id="btn"/><br/>班长：<span id="span1">你好帅</span></body></html>

1.引入JQ相关文件
2.书写页面加载函数
3.在页面加载函数中，获取显示广告图片的元素
4.设置定时操作（显示广告图片的函数）
5.在显示广告图片的函数中，使用JQ的方法让广告图片显示(show());
6.清除显示广告图片的定时操作
7.设置定时操作（隐藏广告图片的函数）
8.在隐藏广告图片的函数中，使用JQ的方法让广告图片隐藏(hide());
9.清除隐藏广告图片的定时操作

<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script><script>$(function(){//书写显示广告图片的定时操作time=setInterval("showAd()",3000);});//书写显示广告图片的函数function showAd(){//获取广告图片,并让其显示//$("#img2").show(1000);//$("#img2").slideDown(5000);$("#img2").fadeIn(4000);//清除显示图片定时操作clearInterval(time);//设置隐藏图片的定时操作time=setInterval("hiddenAd()",3000);}function hiddenAd(){//$("#img2").hide();//$("#img2").slideUp(5000);$("#img2").fadeOut(4000);//清除隐藏图片的定时操作clearInterval(time);}</script>

toggle元素

阅读全文

0 0