刚离职，一直忙于弄简历，整理面试题。今天得空吧前几天学习复习的jq基础知识整理一下，长时间不用还真的忘记了。所有在深入学习中也不要忘记复习之前的知识。做巩固，老话说的好打好根基才能盖好房。基础知识过后，下面还有联系题，注意看
分享一个jquery好手册：http://www.css88.com/jqapi-1.9/
小知识点
2、$("") 获取元素 （包括标签名，类名，id名）
3、事件源 . 方法（function(){}）
//jq版 ???$(document).ready(function(){ ???????//获取元素 ???????var jqBut=$("button");//更具标签名获取元素 ???????var jqDiv=$("div"); ???????//绑定事件 ???????jqBut.click(function(){ ???????????//驱动事件 ???????????jqDiv.show(1000); //显示盒子 ???????????jqDiv.html("中秋快乐")//设置文字 ???????}) ???});jQuery特点
1、链式编程
jqDiv.show(3000).html(ss)相当于 jq.show(3000)jq.html(内容)
jq入口问题
js 也有入口， window.onload === ￥（document）.ready();为了防止页面为加载完就执行
1、jq可多个入口函数
2、js只能有一个，多次会覆盖
3、$实际上表示一个函数 $()调用函数
4、jquery ===$ 相等
?//jq入口函数 1、当页面加载完毕的时候，图片没有加载，执行这个函数 ???????$(document).ready(function(){ ???????????alert(1) ???????}); ???????//jq入口函数2、当页面加载完毕的时候，图片没有加载，执行这个函数 ???????$(function(){ ???????????alert(1) ???????}) ????????//jq入口函数 1、当页面加载完毕的时候，图片也加载完，执行这个函数 ????????$(window).ready(function(){ ???????????alert(1) ???????})jq和js 改变样式对比
1、jq对象是一个数组，包含原生jsDOM对象
2、原声js对象是一个原生对象
//js改变多个样式div.style.cssText="width:100px; height:100px; background:black; margin-bottom:20px;"; //jq改变多个样式，是josg数组方式jqdiv.css({"width":100,"height":100,"background":"red","margin-bottom":20});jq对象转换为js对象
A）jq对象名（索引值）
b）jq对象名.get[ 索引值 ]
<script src="jquery-1.11.1.js"></script> ???<script> ???????//入口函数 ???????jQuery(document).ready(function () { ???????????//如果想要那种方式设置属性或方法，必须转换成该种类型。 ???????????//1.js对象转换成jquery对象。 ????$(js对象); ???????????var box = document.getElementById("box"); ???????????var cbox = document.getElementsByClassName("box"); ???????????var div = document.getElementsByTagName("div"); ???????????????????????//js转换成jq ???????????box = $(box); ???????????cbox = $(cbox); ???????????div = $(div); ???????????????????????//转换成了jquery对象，皮上面有功能可以直接调用。 ???????????div.css({"width": 100, "height": 100, "border": "1px solid red"}); ???????????box.css("background", "red"); ???????????cbox.css("background", "yellow"); ???????????//jquery对象是一个数组。数组中包含着原生JS中的DOM对象。 ???????????var jqbox = $("#box"); ???????????var jqCbox = $(".box"); ???????????var jqdiv = $("div"); ???????????//2.jquery对象转换成js对象。 ????1.jquery对象[索引值] ??2.jquery对象.get(索引值) ???????????//jquery对象转换成js对象 ???????????jqdiv[0].style.backgroundColor = "black"; ???????????jqdiv.get(4).style.backgroundColor = "pink"; ???????}); ???</script>案例
隔行变色
<script src="js/jquery-1.11.1.min.js"></script> ???<script> ???????//jq函数入口 除了图片，页面加载后立即执行 ???????jQuery(function(){ ???????????//获取元素 ???????????var jqli=$("li"); ???????????//for遍历所有li ???????????for(var i=0; i<jqli.length; i++){ ???????????????//判断条件 ???????????????if(i%2===0){ ???????????????????//jq对象转化成js对象 ???????????????????jqli[i].style.background="red"; ???????????????}else{ ???????????????????jqli.get(i).style.background="yellow" ???????????????} ???????????} ???????}) ???</script>开关灯案例
<script src="js/jquery-1.11.1.min.js"></script> ???<script> ???????//函数入口 ???????jQuery(document).ready(function(){ ???????????//获取函数 ???????????var butArr=document.getElementsByTagName("input"); ???????????var bd=$("body"); ???????????//绑定事件 js对象 转换成 jquery对象 ???????????$(butArr[0]).click(function(){ ???????????????//jquery对象转化成js ???????????????bd[0].style.background="white"; ???????????}); ???????????$(butArr[1]).click(function(){ ???????????????//jquery对象转化成js ???????????????bd[0].style.background="black"; ???????????}); ???????}) ???</script>jquery转换js
原文地址：http://www.cnblogs.com/wdz1/p/7732560.html