JQuery笔记（五）

什么JQuery:jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（*或JavaScript框架*）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等JQuery的作用:1. 写更少的代码,做更多的事情: write Less ,Do more2. 将我们页面的JS代码和HTML页面代码进行分离为什么学习JQuery:提高我们的工作效率

<script>//js文档加载完成的事件window.onload = function(){alert(\"window.onload   111\");}window.onload = function(){alert(\"window.onload   222\");}/*文档加载完成的事件*/jQuery(document).ready(function(){alert(\"jQuery(document).ready(function()\");});/*jQuery  简写成 $*/$(document).ready(function(){alert(\"$(document).ready(function()\");});/*最简单的写法*/$(function(){alert(\"$(function(){\");});</script>

【JQ中根据ID查找元素】html全都是根据选择器去找的#ID{}.类名{}$(\"#ID的名称\")

【JQ和JS之间的转换】- JQ对象,只能调用JQ的属性和方法- JS对象 只能调用JS的属性和方法function changeJS(){var div = document.getElementById(\"div1\");//div.innerHTML = \"JS成功修改了内容\"//将JS对象转成JQ对象$(div).html(\"转成JQ对象来修改内容\")}$(function(){//给按钮绑定事件$(\"#btn2\").click(function(){//找到div1//$(\"#div1\").html(\"JQ方式成功修改了内容\");//将JQ对象转成JS对象来调用var $div = $(\"#div1\");//var jsDiv = $div.get(0);var jsDiv = $div[0];jsDiv.innerHTML=\"jq转成JS对象成功\";});});

JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)1. 导入JQ相关的文件2.  文档加载完成事件: $(function)  : 页面初始化的操作: 绑定事件, 启动页面定时器3. 确定相关操作的事件4. 事件触发函数5. 函数里面再去操作相关的元素显示和隐藏  img.style.display

【JQ中的动画效果】javascriptshow()hide()slideUpslideDownfadeInfadeOutanimate : 自定义动画

定时器：<script>//显示广告function showAd(){$(\"#img1\").slideDown(2000);setTimeout(\"hideAd()\",3000);}//隐藏广告function hideAd(){$(\"#img1\").slideUp(2000);}$(function(){setTimeout(\"showAd()\",3000);});</script>

JQuery中的选择器1.基本选择器的案例让我们能够更加精确找到我们要操作的元素<!--- ID选择器 :     #ID的名称- 类选择器:     以 . 开头  .类名- 元素选择器:    标签的名称- 通配符选择器:   *- 选择器,选择器:  选择器1,选择器2--><script>//文档加载事件,页面初始化的操作$(function(){//初始化操作: 给按钮绑定事件$(\"#btn1\").click(function(){$(\"#two\").css(\"background-color\",\"palegreen\");});//找出mini类的所有元素$(\"#btn2\").click(function(){$(\".mini\").css(\"background-color\",\"palegreen\");});$(\"#btn3\").click(function(){$(\"div\").css(\"background-color\",\"palegreen\");});$(\"#btn4\").click(function(){$(\"*\").css(\"background-color\",\"palegreen\");});/*选择器分组*///找出mini类 和 span元素$(\"#btn5\").click(function(){$(\".mini,span\").css(\"background-color\",\"palegreen\");});});</script>2.JQ中的层级选择器<script>//文档加载事件,页面初始化的操作$(function(){//初始化操作: 给按钮绑定事件//找出body下面的子div$(\"#btn1\").click(function(){$(\"body > div\").css(\"background-color\",\"palegreen\");});//找出body下面的所有div$(\"#btn2\").click(function(){$(\"body div\").css(\"background-color\",\"palegreen\");});$(\"#btn3\").click(function(){$(\"#one+div\").css(\"background-color\",\"palegreen\");});$(\"#btn4\").click(function(){$(\"#two~div\").css(\"background-color\",\"palegreen\");});});</script>3.JQ中的基本过滤器<script>$(function(){/<script>//文档加载事件,页面初始化的操作$(function(){//初始化操作: 给按钮绑定事件//过滤出所有div中第一个元素$(\"#btn1\").click(function(){$(\"div:first\").css(\"background-color\",\"palegreen\");});//过滤出所有div中偶数位的div$(\"#btn2\").click(function(){$(\"div:even\").css(\"background-color\",\"palegreen\");});$(\"#btn3\").click(function(){$(\"div:odd\").css(\"background-color\",\"palegreen\");});$(\"#btn4\").click(function(){$(\"div:gt(2)\").css(\"background-color\",\"palegreen\");});});</script>4.JQ中的属性选择器$(function(){//找到有name属性的input$(\"#btn1\").click(function(){$(\"input[name]\").attr(\"checked\",true);});$(\"#btn2\").click(function(){$(\"input[name=\'accept\']\").attr(\"checked\",true);});$(\"#btn3\").click(function(){$(\"input[name=\'newsletter\'][value=\'Hot Fuzz\']\").attr(\"checked\",true);});});5.JQ中的表单过滤器<script>//1.文档加载事件$(function(){$(\":text\").css(\"background-color\",\"pink\");});</script>

使用JQ完成表格的隔行换色$(function(){//获得所有的行 :   元素选择器$(\"tbody > tr:even\").css(\"background-color\",\"#CCCCCC\");//修改基数行$(\"tbody > tr:odd\").css(\"background-color\",\"#FFF38F\");//$(\"tbody > tr\").css(\"background-color\",\"#FFF38F\");});

使用JQuery完成表单的全选全不选功能<script>$(function(){//获得所有的行 :   元素选择器$(\"tbody > tr:even\").css(\"background-color\",\"#CCCCCC\");//修改基数行$(\"tbody > tr:odd\").css(\"background-color\",\"#FFF38F\");//$(\"tbody > tr\").css(\"background-color\",\"#FFF38F\");});/*表格全选和全不选进一步确定事件: 点击事件*/$(function(){//绑定点击事件//this 代表的是当前函数的所有者$(\"#checkAll\").click(function(){//获取当前选中状态//alert(this.checked);//获取所有分类项的checkbox// 选择器[属性名称=\'属性值\']//$(\"input[type=\'checkbox\']:gt(0)\").prop(\"checked\",this.checked);//使用层级选择器来实现  tbody > tr > td > input//	$(\"tbody > tr > td > input\").prop(\"checked\",this.checked);  //这个可行//	#tab > tbody > tr:nth-child(4) > td:nth-child(1) > input[type=\"checkbox\"]$(\"input\").prop(\"checked\",this.checked);});});</script>

使用JQ完成省市联动效果技术分析:1. 准备工作 : 城市信息的数据2. 添加节点 :  appendChild (JS)1. append  :  添加子元素到末尾2. appendTo  : 给自己找一个爹,将自己添加到别人家里3. prepend : 在子元素前面添加4. after :   在自己的后面添加一个兄弟3. 遍历的操作:代码实现：$(function(){$(\"#province\").change(function(){//alert(this.value);//得到城市信息var cities = provinces[this.value];//清空城市select中的option/*var $city = $(\"#city\");//将JQ对象转成JS对象var citySelect = $city.get(0)citySelect.options.length = 0;*/$(\"#city\").empty();  //采用JQ的方式清空//遍历城市数据$(cities).each(function(i,n){$(\"#city\").append(\"<option>\"+n+\"</option>\");});});});

使用JQ完成下拉列表左右选择<script type=\"text/javascript\" src=\"../js/jquery-1.11.0.js\" ></script><script>$(function(){$(\"#a1\").click(function(){//找到被选中的那一项//将被选中项添加到右边$(\"#rightSelect\").append($(\"#leftSelect option:selected\"));});//将左边所有商品移动到右边$(\"#a2\").click(function(){$(\"#rightSelect\").append($(\"#leftSelect option\"));});});</script>