JQuery小结(转)
一、页面加载
- JQ的页面加载比JS要快,当整个dom树结构生成完毕后就会加载
- JQ页面加载不存在覆盖问题,加载的时候是顺序执行
- JQ的页面加载最简写的方式为:
-
$(function(){ alert("显示页面加载内容"); }) //对比JS的页面加载为: window.onload = function(){ alert("显示页面加载内容"); }
二、JQ的获取
<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script> $(function(){ //1.JS方式获取 /*document.getElementById("btn").onclick= function(){ location.href="惊喜.html"; }*/ //2.JQ方式获取=====>>>$("#btn") $("#btn").click(function(){ location.href="惊喜.html" }); }); </script>
三、DOM对象和HQ对象的转化
- 注意JQ不能操作JS中的属性和方法,一样的DOM对象也无法操作JQ对象里面的属性和方法!!!
- JQ的html()方法:取得第一个匹配元素的html内容。
- JQ的html(val)方法:用于设定HTML内容的值,其中val是String类型
//1.JS的DOM操作 function write1(){ document.getElementById("span1").innerHTML = "js的dom操作"; } //2.JQ的DOM操作 $(function(){ $("btn").click(function){ //注意JQ不能操作JS中的属性和方法,例如 $("span1").innerHTML=""的写法是错的 $("span1").html("jq的dom操作") }); })
-
JQ对象向DOM对象转化:使用jQuery 对象访问中的get()方法可以取得所有匹配的DOM元素集合,get(index)可以取得其中一个匹配的元素,即可调用JS中的属性方法。图中使用的是元素选择器,即可以通过角标获取多个
- JQ对象向DOM对象转化
-
-
将DOM对象转换成JQ对象:直接把dom对象用$括起来
var spanEle = document.getElementById("span1"); //将DOM对象转换成JQ对象 $(spanEle).html("DOM对象转换成JQ对象");
- JQ效果中的方法可以实现淡入淡出,上下滑入滑出,使用toggle可以实现一个标签的显示和隐藏
-