|
jquery最重要的工作就是替开发者解决了兼容性问题
1. jquery 选择器 $(selector) : selector选择器，支持CSS2选择器，及CSS3大多数选择器，并且自身做了兼容性问题。基本上，各浏览器中都可以生效，如：IE7 2.解决window.onload函数冲突 倘若页面中有多处都需要使用window.onload, 冲突问题十分棘手。 jquery 中的ready 方法很好的解决了上述问题，它能够自动将其中的函数在页面加载完成后运行，并且同一个页面中可以使用多个ready（）方法，互相不冲突 $(document).ready( function(){ } ); 简写，省略(document).ready 代码如下： $( function(){ } ); 3. jquery 直接创建DOM元素 DOM： var oNewP = document.createElement("p"); var oText = document.createTextElement("hello world"); oNewP.appendChild(oText); Jquery: var oNewP = $("<p>hello world</p>"); oNewP.insertAfter("#myTarget"); 4. 自定义添加“$” jquery 提供了用户自定义添加“$”的方法。 $.fn 是扩展jquery 时所必须的。 如： 定义一个禁用的方法 $.fn.disable = function (){ return this.each(function(){ if(typeof this.disabled != "undefined") this.disabled = true; }); } 调用禁用的方法： $("input[name='xxx']").disable(); 5.解决"$" 冲突 因为其他框架中可能也使用了“$”,从而发生冲突。Juery 同样提供了noConflict(); 方法来解决“$”的冲突问题。 如： jquery.noConfict(); 执行以上代码后，便可以使“$”按照其他的javascript 框架的方式运算，这时在jquery 中便不能再使用"$", 而必须使用Jquery. 如：$("div p")必须写成 jquery("div p") 6. 方法说明 not() : 反向过滤 如： $(":input:not(:checkbox):not(:radio)").addClass("myClass"); addClass() : 给指定元素添加类 size: 获取元素的个数 如：$("img").size(); get(index) : 提取元素 注 ： get() 方法在不设置任何参数时，可以将元素转化为一个元素对象的数组 index(element) : 可以查找元素element所处的位置 add() : 添加选择的元素 如： $("img[alt]").add("img[title]") 相当于 $(" img[alt],img[title]") filter() : filter可以接受两种类型的参数，一种与Not()方法一样，另一种类型的参数是函数。 注意，在fliter里不能使用直接的等于匹配(=) find() : 通过匹配选择器来筛选元素 is()：检查是否包含指定的元素，返回布尔值，当至少包含一个匹配项时为true, 否则为false; jquery链，jquery的语句可以链接在一起，在jquery链中，后面的操作都是以前面的操作结果为对象的。 end() : 将操作的对象，设置为上一步的对象。 andSelf() : 将前面两个对象进行组合后共同处理。 如： $("div")find("p").addClass("myBackground").andSelf().addClass("myBorder"); // myBorder样式，将对div 与 p 两个对象的第一次， 如果没有用andSelf, 将只对于p生效。 控制页面： each():遍历元素 ，语法each(callback); 主要用于对选择器中的元素进行遍历 attr(name) : 获取属性 ， 如果没有匹配项，返回undefined; attr(name,value) : 设置属性的值 attr(name,fn):, attr,接受函数作为参数 样式控制： addClass() : 添加样式 romoveClass() ： 删除样式 toggleClass() : 动态切换CSS类别。 // 注：只能设定一种CSS类别，不能同时对多个CSS类别进行切换，如：$(this).toggleClass("highlight under"); 错误方式 css(): 直接获取、设置元素的样式风格；如：$(this).css("color"); //获取属性值 $(this).css("color","red"); //设置对应属性值 hasClass(name) : 判断某个元素是否设置了某个CSS类别。 获取、编辑见容 html(): 相当于节点的innerHTML text(): 相当于节点的innerTEXT empty() : 直接删除子元素 如： $("p").empty(); 获取表单元素的值： val() : 获取选择器中第一个表单元素的value值。 val(sValue): 将sValue的值，赋给表单元素的value属性 事件处理 绑定事件： 方式1: $("img").bind("click",function(){ w #("#show").append("<div>点击事件1</div>"); }).bind("click",function(){ #("#show").append("<div>点击事件2</div>") }).bind("click",function(){ #("#show").append("<div>点击事件3</div>") }); IE, fireFox运行结果，都是点击事件1,点击事件2,点击事件3; 注： 对于多个事件， $("p").on("mouseenter mouseleave",function(){ }); 方法2： $("p").click(function(){ }); 方法3： 该方法绑定事件触发一次之后会自动删除，不再生效 $("div").one("click",function(){ }); 移除事件 $("div").unbind(); $("div").unbind(click,myFunc); 单击事件的动态交互替： 动态交替，接受两个参数，这两个参数均为监听函数，在click事件中交替使用。 $(this).toggleClass(fun1,fun2); 实现感应鼠标： hover(over, out ); over: 鼠标指针移动到对象上时触发 out: 鼠标指针移出对象时触发 show() : 显示元素 hide() : 隐藏元素 toggle() :实现显示，隐藏的切换 渐入渐出效果 show(duration, [callback]); hide(duration,[callback]); toggle(duration,[callback]); fadeIn(): // 主要是透明度的改变 fadeOut(): //渐渐褪色 fadeTo(duration,opacity,callback); opacity : 0.0 - 1.0 slideUp(duration,[callback]); slideDown(duration,[callback]); //模拟PPT中的类似幻灯片拉窗帘的特效 $.inArray(value,array) ; 返回第一个匹配元素在数组中的位置，如果没有找到则返回-1 获取外部代码 ： $.getScript( url, [callback] ); eval() : 将类似的字符串转化为JSON格式 |
|
最新喜欢： Yuer
|
公众号
