jquery选择器

1. window.onload与$(document).ready()的对比 2. jquery对象和Dom对象的区分： 　　　　·jquery对象：通过jquery包装DoM对象后产生的对象。 　　　　·DOM对象：可以通过javascript中的getElementByTagName或者getElementById来获取元素节点。 　　　　·Jquery对象有自己特有的方法，它不能调用DOM对象中的方法，同样，DOM对象也不能使用jquery对象的方法。 3.jquery对象和DOM对象的相互转化： 　　　　 ·jquery对象转成DOM对象： 　　　　　　第一种方法：通过[index]的方法得到相应的DOM对象。　　例如：var $cr=$("#cr"); var ct=$cr[0]; 　　　　　　第二种方法：通过get(index)方法得到相应的DOM对象。　　例如：var $cr=$("#cr"); var $cr=$cr.get(0); 　　　　 ·DOM对象转成Jquery对象 　　　　只需要用$()把DOM对象包装起来，就可以获得一个jquery对象，方式$(DOM对象) 　　　　 例如： 　　　　　　var cr=document.getElementById("cr"); //DOM对象 　　　　　　var $cr=$(cr);　　//jquery对象 4.

一、jQuery的优势 1.轻量级：压缩之后大小只有30KB左右。 2.强大的选择器：jQuery允许CSS1到CSS3几乎所有的选择器以及自身独创的选择器。 3.出色的DOM操作的封装：jQuery封装了大量常用的DOM操作，是开发者在编写DOM操作相关程序的时候能够得心应手。 4.可靠的事件处理机制：jQuery事件处理机制在处理事件绑定的时候相当可靠。 5.完善的Ajax：jQuery将所有的Ajax操作封装在一个函数$.ajax()里面，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 6.不污染顶级变量：jQuery只建立一个名为jQuery的对象，其所有函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝不污染其他对象。 7.出色的浏览器兼容性：jQuery修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。 8.链式操作方式：jQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。 9.隐式迭代：当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。 10.行为层与结构层分离：开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。

JQ uer y介绍： 【官网】 http://jquery.com 【参考API】http://jquery.cuishifeng.cn/ JQuery的低版本支持IE低版本，JQuery的2版本不太支持IE的低版本，推荐用1版本的最高1.12 - 找元素（直接，间接） - 操作 （属性..） JQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 JQuery对象: jQuery = $ jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . jQuery 对象可以使用 jQuery 里的方法 : $(“#test”).html(); 比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 这段代码等同于用DOM实现代码： document.getElementById("

jQuery 知识点梳理 一、 jquery选择器 基本选择器 ID选择器 类选择器 标记选择器 分组选择器 通配符选择器 层次选择器 $(“ancestor descendent”)：祖先后代选择器 空格 $(“parent > child”)：父子选择器 大于 $(“prev + next”)：相邻后兄弟元素选择器 加号 $(“prev ~ siblings”)：所有后兄弟元素选择器 波浪线 过滤选择器：基本过滤选择器 ：first、:last、:odd、:even、:eq(index)、:gt(index)、：lt(index)、not(selector) 过滤选择器：内容过滤选择器 :contains(text)、:empty、:parent、has(selector) 过滤选择器：可见性过滤选择器 ：visible、:hidden 过滤选择器：属性过滤选择器 [attribute]、[attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value] 过滤选择器：表单过滤选择器 :checked、:selected :text、：password、:radio、:checkbox、:submnit、:button、:image、:reset、:file、

jQuery对象和javascript对象间的转换 // js对象转换为jq对象 var tdiv = document.getElementById("tDiv"); $(tdiv).html("nihao"); // jq对象转换为 $("#tDiv")[0].innerHTML="java"; $("#tDiv")get(0).innerHTML="java"; 使用jQuery操作元素的属性 使用css方法 # 使用:jq对象.css(属性参数); * $("div").css("background", "red"); // 单个参数时,属性和属性值用逗号隔开 * $("div").css({"background":"red","border":"2px solid blue"}); // 多个参数时,使用键值对形式 使用CSS类的方法 # 添加属性:addClass()方法 * 用法:jq对象.addClass(class类) * $("tbody tr:odd").addClass("odd"); // 将tbody标签内的奇数行添加样式类odd # 删除属性:removeClass()方法 * 用法:jq对象.removeClass(class类) * $("tbody tr:odd").removeClass("odd"); //

表单筛选器 :text :password :file :radio :checkbox :submit :reset :button 例子： $(":checkbox") // 找到所有的checkbox 表单对象属性: :enabled :disabled :checked :selected 例子： 找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签 找到被选中的option： <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option 链式操作：每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。 筛选器方法 下一个元素： $("#id").next()　

表单筛选器 :text :password :file :radio :checkbox :submit :reset :button 例子: $(':checkbox') // 找到所有的checkbox 表单对象属性: :enabled :disabled :checked :selected 例子: 找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签 找到被选中的option: <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的optio 筛选器方法 下一个元素: $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") 上一个元素: $("

一.jQuery介绍 　　1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库 　　2.jQuery使用户能够方便的处理HTML Document,Events,实现动画效果,方便的进行Ajax交互,能够极大地简化JavaScript编程,它的宗旨是:Write less,do more. 二.jQuery优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

　　jQuery插件分类3中： 　　1.封装对象方法的插件。 　　2.封装全局函数的插件。 　　3.选择器插件。 　　jQuery插件机制 　　jQuery提供了两个用于扩展jQuery功能的方法： 　　1.jQuery.fn.extend()方法——封装对象方法。 　　代码如下： 　　;(function($){ 　　　　　　////这里写插件代码 　　})(jQuery); 　　2.jQuery.extend()方法——封装全局函数、选择器插件，还有一个很强大的功能，用于扩展已有的Object对象。 　　代码如下： 　　jQuery.extend(target.obj1,......[objN]);////用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。 　　表格隔行变色示例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .odd { background-color: Red; }

jQuery核心的方法有两个： 1、$.extend(object)可以理解为jQuery添加一个静态方法。 2、$.fn.extend(object)可以理解为jQuery实例添加一个方法。 基本的使用 $.extend({ fun1: function() { alert(11); } }) $.fun1(); $.fn.extend({ fun2: function() { alert(22); } }) $(this).fun2(); //等同于 $.fn.fun3 = function() { alert(33); } $(this).fun3(); jQuery(function() {})与(function($) {})(jQuery)的区别 1、jQuery(function() {})相当于$(document).ready(function() {})当dom元素加载完成执行的方法 2、(function($) {})(jQuery)相当于 var fun = function($) {}; fun(jQuery); 定义了一个匿名函数，其中jQuery代表了这个函数实参。通常用在jQuery插件开发中，起到了定义插件的私有域作用。 <div id="link"><a href="#" >jQuery</a></div> <script src="http:/