jQuery慢慢啃之核心(一)
1.
$("div > p"); div 元素的所有p子元素。
$(document.body).css( "background", "black" );设置页面背景色
$(myForm.elements).hide()隐藏一个表单中所有元素。
$("input:radio", document.forms[0]);在文档的第一个表单中,查找所有的单选按钮
$("div", xml.responseXML);在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。
2.$("<input type='checkbox'>"); // 创建一个 <input> 元素 在 IE和其他浏览器 中有效:因为IE中必须 <input> 元素的 type 只能写一次
$("<div><p>Hello</p></div>").appendTo("body");创建一个元素并且添加到指定元素中
$("<div>", { "class": "test", text: "Click me!", click: function(){ $(this).toggleClass("test");}}).appendTo("body");创建一个元素并添加其属性和事件。
$("<input>", {type: "text",val: "Test",focusin: function() {$(this).addClass("active");},
focusout: function() {$(this).removeClass("active");}).appendTo("form");
3.$(document).ready()加载完成后要执行的函数,简化为$(function(){// 文档就绪});
4.$.holdReady(true);$.getScript("myplugin.js", function() {$.holdReady(false);});//延迟文档加载,主要使用于动态脚本加载器。此方法必须早在文件调用,在这样<head> jQuery脚本后,立即标记
5.$("img").each(function(i){this.src = "test" + i + ".jpg";});//对每个元素执行处理,注意i是一个索引
$("img").each(function(){$(this).toggleClass("example");});//转化为jquery对象
$("button").click(function () {$("div").each(function (index, domEle) {//第一个是索引,第二个是函数依次执行到的元素
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false; } });});
6.$("img").size();
$("img").length;
7.$("ul").selector//返回当前选择器,此处为ul
8. $("ul").context//返回原始的DOM节点内容,即jQuery()的第二个参数,此处为[object HTMLDocument] IE返回[object]
9.$(this).get(0)与$(this)[0]相同,取得其中一个匹配的元素
$("img").get().reverse();当get没有索引时将获取所有元素数组。
10.$('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1,传递一个jQuery对象
$('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的索引位置
$('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。
11.在元素上定义数据,格式随意
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").removeData("blah"); //移除blah
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;
$("div").removeData("desc url");// 移除键名为"desc"、"url"的数据项,注意中间有空格
12.
$("span").queue("p",[function(a){alert(11);},function(b){alert(22);},function(c){alert(33);}]);//添加函数组
var ff=$("span").queue("p");//获取第一个元素的函数组
alert(ff.length);
$("#a").dequeue("p");//执行第一个函数
$("#a").dequeue("p");//执行第二个函数
alert(ff.length);
$("#a").queue("p",function(){alert("补充函数;")});//在追加一个函数
alert(ff.length);
//$("#a").clearQueue("p");//清空函数数组
//$("div").queue("fx", []);//清空函数数组
13.
//第一种扩展方法
$.fn.extend (
{
tanchu:function(){alert("我是扩展函数")},
shuxing:"我是扩展属性",
zaitan:function(){alert("第二次弹出")},
intext:function(){this.value="ooooo";alert("看看设置内容是否成功。")},
check: function(){// 这里的this表示当前jQuery对象
this.prop("checked", true);
return this;}
} );
//第二种扩展方法
$.fn.site = "CodePlayer";
$.fn.check = function(){
// 扩展到jQuery原型上后,这里的this表示当前jQuery对象
this.prop("checked", true);
return this; };
$.fn.isEmpty = function(){
return !$.trim( this.val() );
//调用
$("[name=opt]").check( );// 全选复选框
$("#b").tanchu();
$("#b").intext();
$("#b").zaitan();
alert($("#b").shuxing);
14.扩展jquery本身
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
15.
jQuery.noConflict();//使$失去原来的含义,用原始的jQuery作为关键字
// 使用 jQuery
jQuery("div p").hide();
var j = jQuery.noConflict();//使用j作为关键字
// 基于 jQuery 的代码
j("div p").hide();
var dom = {};//命名空间
dom.query = jQuery.noConflict(true);//使用dom.query代替原来的关键字
// 新 jQuery 的代码
dom.query("div p").hide();
jQuery慢慢啃之核心(一)的更多相关文章
- jQuery慢慢啃之工具(十)
1.jQuery.support//一组用于展示不同浏览器各自特性和bug的属性集合 2.jQuery.browser//浏览器内核标识.依据 navigator.userAgent 判断. 可用值: ...
- jQuery慢慢啃之回调(十三)
1.callbacks.add(callbacks)//回调列表中添加一个回调或回调的集合 // a sample logging function to be added to a callback ...
- jQuery慢慢啃之事件对象(十一)
1.event.currentTarget//在事件冒泡阶段中的当前DOM元素 $("p").click(function(event) { alert( event.curren ...
- jQuery慢慢啃之ajax(九)
1.jQuery.ajax(url,[settings])//通过 HTTP 请求加载远程数据 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.error.dataFi ...
- jQuery慢慢啃之特效(八)
1.show([speed,[easing],[fn]])\\显示隐藏的匹配元素 //speed:三种预定速度之一的字符串("slow","normal", o ...
- jQuery慢慢啃之事件(七)
1.ready(fn)//当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){ // 在这里写你的代码...}); 使用 $(docume ...
- jQuery慢慢啃之CSS(六)
1.css(name|pro|[,val|fn])//访问匹配元素的样式属性 $("p").css("color");//获取 $("p") ...
- jQuery慢慢啃之文档处理(五)
1.append(content|fn)//向每个匹配的元素内部追加内容. $("p").append("<b>Hello</b>"); ...
- jQuery慢慢啃筛选(四)
1.eq(index|-index) 获取第N个元素 其中负数:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数.(1算起) $("p").eq(1)//获取匹配的第二个元 ...
随机推荐
- java生成随机整数
1. 使用Random类的nextInt方法: Random rand = new Random(); rand.nextInt(max);, 此时输出[0,max),注意右边是开区间,如果需要设定最 ...
- attitude
刚看到一段挺有趣的游戏,分享一下. 如果 令 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 分别等于 1 2 3 4 5 6 7 8 9 10 ...
- NGUI-学习笔记(2)一个项目需求
using UnityEngine; using System.Collections; public class ins1 : MonoBehaviour { //bool isTarget = f ...
- Bzoj 1222: [HNOI2001]产品加工 动态规划
1222: [HNOI2001]产品加工 Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 486 Solved: 298[Submit][Status ...
- Top 10 Java Debugging Tips with Eclipse
In this tutorial we will see about debugging java applications using Eclipse. Debugging helps us to ...
- java 检查是否是数组 检查是否是空数组 检查数组是否包含某个元素
/** * Determine whether the given object is an array: * either an Object array or a primitive array. ...
- spring mvc 介绍
Spring MVC Tutorial tag. * * If you do not want to deal with the intricities of the noscript * secti ...
- [转]jquery中使用event.target的几点
转自: http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html 1.this和event.target的区别: js中事件是会冒泡的,所 ...
- c#基础语言编程-常用函数
类型转换Convert Convert考虑数据意义的转换. Convert是一个加工.改造的过程.在使用Convert的转换过程中不会返回异常,当遇到类型转换的不知道的时候,用Convert找找. T ...
- JS代码获取当前日期时支持IE,不兼容FF和chrome,解决这个问题,我们需要把获取时间的getYear()函数换成getFullYear()
以前在页面中获得当前时间的方法如下: function SelectTodayClient() { var d = new Date(); var taday = d.getYear() + &quo ...