JQuery笔记

前端：
jQuery前端JS框架
框架都是为了简化操作产生的。实际上就是对一些复杂、冗余的逻辑代码的封装。
jQuery基础
$是jQuery的简写方式。是一个方法对象。

jq对象：
和js传统的对象是完全不同的。不能使用js对象的属性。js对象也不能使用jq对象的方法。
jq对象是一个自定义类型的对象。可以当作数组来使用，数组中的元素就是jq对象对应的js对象。
例如：
js对象.innerHTML jq对象.html()
js对象.value jq对象.val()
在jq对象上调用api，如果jq是一个对象的集合，集合中的每个元素都会调用此api。自带遍历。
$("div").html("aaa")
jq对象和js对象的互转
jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
js -- > jq : $(js对象)
也可以把一个js的数组传入$中，构造为一个jq的对象。
jq开发的通用语法（api的用法）
入口函数：
$(function(){
// 入口函数，可以设置多次，都会执行。
});
window.onload 是一个属性，如果多次赋值会覆盖。
事件绑定
js对象.onXXX = function(){}//属性
jq对象.XXX(function(){});//方法
样式控制
css()
jq的选择器
作用：快速查找元素
jq的选择器语法和css选择器语法基本一致。
基本选择器
id选择器选择的时候，如果一个页面中有多个此id的元素，只会查找到第一个元素。
层级选择器
直接子元素和后代元素的区别
属性选择器
有某个属性
某个属性等于指定值
某个属性不等于指定值
过滤选择器
奇数偶数选择器
指定索引
表单选择器
表单元素
查找指定状态的元素
jq的dom操作
元素的增删改查
元素内容操作
1. html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>
相当于js中的innerHTML
2. text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
和html()不同，如果在标签内用text()设置了html标签，也不会解析，而是直接输出字符串。
相当于js中的innerText
3. val()： 获取/设置元素的value属性值
相当于js中的value
元素属性的操作
新增或修改属性值
attr()
prop()
移除属性
removeAttr()
removeProp()
使用原则：优先使用prop，如果使用后没有效果，再修改attr。
对class属性操作
1. addClass():添加class属性值
在原有的样式的基础上添加
2. removeClass():删除class属性值
3. toggleClass():切换class属性 ToggleButton
toggleClass("one"):
判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加
4. css()
相当于js中的style属性
元素的增删改
append()
在当前元素内部最后方添加元素。append的参数可以是一个jq对象，也可以是一段html代码。
remove()
在jq中，remove是把自己删除掉。
empty()
清空某个元素，但是不删除自己。
作业：
在下拉列表左右移动中，移动到对面下拉列表后，选中状态清除。
任意一个option，在双击的时候，移动到对面下拉列表

 

----------------------------------------------------------------------------------------

 

 

jq开发的基本流程
1.查找元素
前提：页面已经加载完毕，入口函数
2.确定事件
3.注册事件的监听
编写function的逻辑
4.完成业务的编写
查找api
jq的动画（了解）
如何显示和隐藏组件
show()
hide()
jq的循环（*****）
普通for循环（js语法）
for (var i = 0; i < citys.length; i++)
可以使用js的for循环遍历。
注意：
变量声明时，使用var关键字，不要使用int
jq对象的each方法（jq的语法）
jq对象.each(function(index,element){
});
function的参数
没有参数：使用this获取当前遍历的元素。this还是js的对象。
有一个参数：该参数为当前循环的索引。
有两个参数：第一个参数为当前循环的索引。第二个参数为当前遍历的元素。
function的返回值
在each循环中，不能使用break和continue关键字。
如果function返回true，相当于continue，跳过本次循环继续下一次
如果function返回false，相当于break，直接结束循环。
全局的each方法（jq的语法）
$.each() == jQuery.each()
$.each(要遍历的集合,function(){})
要遍历的集合，可以是jq对象，也可以是js的数组。
function和上面的function用法一致。
jq的事件绑定和切换
事件绑定
把js中的事件的on去掉，就是事件绑定的方法名。
如果绑定事件时不传递任何参数，就是手动触发该事件。常用于提交表单。
表单jq对象.submit()
通用的事件绑定和解绑方式
使用jq对象.on("事件名称",function(){})绑定事件
使用jq对象.off("事件名称")绑定事件
如果使用off但是没有传递事件名称，就会解绑该对象上的所有事件。
事件切换
toggle
参数：传入多个function对象，每次点击元素时，轮询调用每一个函数。
hover
参数：可以传入两个function对象，
第一个函数对应鼠标移入的操作
第二个函数对应鼠标移出的操作
作用：
当鼠标放到表格某行上时，该行变色。
jq的插件机制(了解)
作用：用于扩展jq框架。
1. $.fn.extend(object)
参数的格式：
{
函数名:function(){},
函数名2:function(){}...
}
增强通过Jquery获取的对象的功能 $("#id")
2. $.extend(object)
增强JQeury对象自身的功能,一般用于添加工具方法。 $/jQuery
$.XXX()
参数的格式：
{
函数名:function(){},
函数名2:function(){}...
}