jQuery

jQuery

HelloWorld
<script src="jquery-1.7.2.js"></script>
<script>
$(function(){
　　　　$("button").click(function(){
　　　　　　alert("hello");
　　　　});
});
</script>
<button>按钮</button>

$是jQuery中的核心函数，核心函数根据实参的不同，有四种不同的用法。
① 传一个函数作为参数　　作用：这个函数会在整个文档加载完毕之后执行，作用和window.onload=function(){}类似　　例子：$(function(){})
② 传一段HTML代码作为参数　　作用：可以根据这段HTML代码创建对象　　例子: $("<li>广州</li>")
③ 传一个选择器的字符串　　作用：根据选择器去网页中查找对象　　例子：$("#id") $(".class")
④ 传一个DOM对象　　作用：可以将一个dom对象转换为jQuery对象　　例子：$(this)

jQuery对象
①DOM对象- 通过原生JS获取到对象，是DOM对象
②jQuery对象- 通过jQuery核心函数包装过的对象是jQuery对象
③比较
- dom对象和jQuery对象不能互相调用方法和属性
- dom对象命名上没有特殊要求。
- jQuery对象的名字习惯上加一个$作为前缀。
④转换
- dom --> jQuery　　var $obj = $(domObj);
- jQuery --> dom　　- jQuery对象的本质实际上就是一个DOM对象的数组，所以将jQuery对象转换为dom对象，只需要从数组中取出dom对象即可　　- var domObj = $obj[0];

jQuery的选择器
> jQuery的最厉害的地方就是它拥有众多的选择器。
> jQuery的选择器主要是集合CSS和xPath部分语法。
> 选择器可以很方便的获取到页面中元素。
> jQuery选择器的使用：$(选择器字符串)
①基本选择器　　id选择器: $("#id")　　类选择器：$(".class")　　元素选择器: $("标签名")　　选择全部元素: $("*")　　选择器分组：$("选择器1,选择器2,选择器N")
②层次选择器　　选择后代元素：$("祖先 后代")　　选择子元素：$("父元素 > 子元素")　　后边一个兄弟元素：$("前一个 + 后一个");　　后边所有的兄弟元素: $("前一个 ~ 后边所有");
③过滤选择器
参考文档　　祖先元素、后代元素、父元素、子元素
祖先元素：直接或间接包含后代元素的元素。
后代元素：直接或间接被祖先元素包含的元素。
父元素：直接包含子元素的元素。
子元素：直接被父元素包含的元素。

DOM查询　　- 这里dom查询指在已经获取到了jQuery对象的基础上，在做进一步的查询
- 常用的方法：
- eq(index) : 查询指定索引的元素　　- first() : 查询第一个元素　　- find(选择器) ： 在当前元素的后代元素中查找　　- children(选择器) ：在当前元素的子元素中查找
- filter(选择器) ：从当前对象中筛选出符合条件的元素　　- not(选择器) ：从当前对象中删除调用符合条件的元素　　- parent() : 获取当前元素的父元素
- parents(选择器) : 获取当前元素的祖先元素　　- add() ： 向对象中添加指定的元素

DOM增删改
- 根据父子关系插入节点：
- 向父节点的后边插入子节点　　append()　　appendTo()
- 向父节点的前边插入字节　　prepend()　　prependTo()
- 根据兄弟节点关系插入节点
- 向一个节点的前边插入一个节点　　before()　　insertBefore()
- 向一个节点的后边插入一个节点 　　after()　　insertAfter()
- 替换节点　　replaceWith()　　replaceAll()
- 删除一个节点　　remove()
- 清空一个节点　　empty()
- 获取元素内部的html代码　　html()
- 获取元素内部的文本内容　　text()
- 设置元素内部的html代码　　html("代码")
- 设置或读取元素的指定的属性　　- attr()
- 读取属性值：　attr("属性名")　　比如：attr("value")　　 attr("id")
- 设置属性值：attr("属性名","属性值")　　比如：attr("value","hello")

样式操作
①类操作
- 添加一个或多个类　　addClass()
- 删除一个或多个类　　removeClass();
- 切换一个或多个类　　toggleClass();
- 判断是否包含某个类　　hasClass();
②样式操作
- 读取或设置一个元素的样式　　css();
- 读取：css("background-color");
- 设置：css("color","#bfa");
- 获取或设置一个元素的高度和宽度　　height() width()
- 获取和设置一个元素的位置　　offset();
- 网页中表示一个元素的位置，表示的元素左上角那个点的坐标
- 所以使用offset方法返回的是一个对象　　- 使用 对象.top 获取顶边距　　- 使用 对象.left 获取左边距
- 设置：offset({ top:10, left:20});
③显示隐藏
- 隐藏一个元素　　hide()
- 显示一个元素　　show()
- 切换元素的显示状态　　toggle()

文档加载
①window.onload = function(){ };　　- 函数会在整个网页加载完毕之后执行。（包括外部资源）
②$(function(){  });　　- 函数会在当前网页的文档加载完毕之后执行。（不包括外部资源）

事件
①绑定　　

- 直接通过对应事件的方法绑定　　对象.click(function(){ });
- 通过bind()方法　　对象.bind("事件字符串",function(){  });
- 绑定一个一次性的事件　　对象.one("事件字符串",function(){  });
- 为现有的以及后边添加的元素都绑定一个指定事件　　对象.live("事件字符串",function(){  });
②解除绑定- unbind();　　- 解除指定事件unbind("事件名")　　- 解除所有事件unbind()

冒泡
> 事件的冒泡指，当一个元素上绑定的事件被触发，这时它祖先元素上的同类事件也会被触发。
> 在jQuery中解决冒泡问题只需要在响应函数的最后 return false;

事件对象
> 浏览器在调用响应函数时，会将一个事件对象作为实参传递进响应函数。
> 事件对象中封装了当前事件相关的一些属性：
比如：- 鼠标指针的坐标　　- 键盘的那个按键被按下
> 我们如果想获取到这个对象，只需要在响应函数中定义一个形参：btn.onclick = function(event){ };

 

jQuery-UI

jQuery-Mobile