JQ笔记,一天进步一点点

1、 选择器 如: $(":first");  [(":过滤条件")] <==>  $("*:first");


        1> $("#id");


        2> $(".class");


        3> $("标签名");


        4> $("*");


        5> $("div,span,p, .class,#div");        --将每一个选择器匹配到的元素合并后一起返回。


        6> $("#div span");          -- 匹配后代的第一个元素


        7> $("parent > child");        -- 匹配子代的第一个元素


        8> $("prev + next");        -- 匹配后面紧跟着的第一个元素


        9> $("#div ~ span");        -- 匹配后面所有元素


        通过一些特殊条件过滤元素


        10> $("span:first"); -- 获得匹配的第一个元素


        11> $("span:last");            -- 匹配最后的一个元素


12> $("span:not");


13> $("input:not(:checked)");  --匹配没有选中的input


14> $("span:even"); -- 匹配所有索引值为偶数的元素,从0 [0为偶数] 开始


15> $("span:odd"); -- 匹配所有索引值为奇数的元素,从0开始[即1,3,5]


16> $("span:eq(index)");    -- 根据索引值来匹配元素,索引从0开始找


        17> $("span:gt(index)");    -- 匹配大于索引值的元素


        18> $("span:lt(index)");    -- 匹配小于索引值的元素


        19> $("span:lang(language)");  -- (1.9+)匹配带有指定语言[以属性的形式出现在标签中]的所有元素[会匹配lang="en" 和 lang="en-us"]


        20> $(":header");          -- 匹配h1-h6的标签


        21> $(":animated");        -- 匹配所有正在执行动画效果的元素


        22> $(":focus");            -- (1.6+)匹配当前获得焦点的元素


        23> $(":root");            -- (1.9+)选择该文档的根元素


        24> $(":target");          -- (1.9+)***不懂****


        25> $(":contains(text)");  -- 匹配包含给定文本的元素


        26> $(":parent");          -- 匹配所有包含子元素或者文本的元素


        27> $(":empty");            -- 匹配所有不包含子元素或者文本的空元素


        28> $(":has(标签)");        -- 匹配含有选择器所匹配的元素的元素


        29> $(":hidden");          -- 匹配所有不可见元素,或者type为hidden的元素


        30> $(":visible");          -- 匹配所有的可见元素


        通过属性过滤元素


        31> $("span[attribute]");          -- 匹配包含[在标签中使用了此属性]此属性的元素


        32> $("span[attribute = 'value']");    -- 匹配包含属性是指定的值的元素


        33> $("span[attribute != 'value']");    -- 匹配不包含属性是指定的值的元素


        34> $("span[attribute ^= 'value']");    -- 匹配属性的值以value开头的元素


        35> $("span[attribute $= 'value']");    -- 匹配属性的值以value结尾的元素


        36> $("span[attribute *= 'value']");    -- 匹配属性的值包含value的元素


        37> $("span[attr1 = 'val1'] [attr2 = 'val2'] [attr3 = 'val3']");    --匹配满足多个筛选条件的元素(复合属性选择器)


        38> $(":first-child");      -- 匹配给定选择器的第一个子元素


        39> $(":last-child");      -- 匹配给定选择器的最后一个子元素


        40> $("span:first-of-type");    --  (1.9+)匹配给定的选择器[span]的父级中的第一个选择器[span]类型的元素[选择器好像必须是标签形式]


        41> $("span:last-of-type");    --  最后一个元素[其他同上]


        42> $("ul li:nth-child(n)");    -- (正序)匹配ul下的li的第n[n从1开始,index从0开始]个子元素


        43> $("ul li:nth-last-child(n)");  -- (倒序)其他同上


        44> $("span:nth-of-type(n)");  --选择同属于一个父元素之下,并且标签名相同的子元素中的第n个


        45> $("ul li:only-child");      -- 如果此元素在父元素下是唯一一个元素,此元素就会被匹配


        46> $("span:only-of-type");      --选择所有没有兄弟元素,且具有相同的元素名称的元素。如果父元素有相同的元素名称的其他子元素,那么没有元素会被匹配


        匹配表单元素


        47> $(":input");        -- 匹配所有input标签


        48> $(":text");        -- 匹配所有文本框(不包括文本域)


        49> $(":password");    -- 匹配所有密码框


        50> $(":radio");        -- 匹配所有单选按钮


        51> $(":checkbox");    -- 匹配所有复选框


        52> $(":submit");      -- 匹配所有提交按钮(很多浏览器,button元素默认的type即为submit)


        53> $(":image");        -- 匹配所有的图像域(input中属性为image)


        54> $(":reset");        -- 匹配重置按钮


        55> $(":button");      -- 匹配所有按钮


        56> $(":file");        -- 匹配所有文件域


        57> $(":enabled");      -- 匹配所有可用元素(好像针对input元素,未被禁用的)


        58> $(":disabled");    -- 匹配所有不可用的元素(文本框不可输入)


        59> $(":checked");      -- 匹配所有选中的元素(radio、checkbox、select都行)


        60> $(":selected");    -- 匹配所有选中的option元素


        61> $.escapeSelector("selector");  --这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候,


                                        这个方法基本上与CSS中CSS.escape()方法类似,


                                        唯一的区别是jquery中的这个方法支持所有浏览器。

  2、Ajax

3、属性

        1> $("span").attr(name | name, value | key, f(index,value));

            -- 获得属性值[name] | 修改属性值或设置属性及属性值 | 找到属性名,执行函数,函数参数(索引,原先属性值)

        2> $("span").removeAttr(name);

            -- 删除所匹配对象的指定属性

        3> $("span").prop();

            -- 不懂

        4> $("span").removeProp();

            -- 不懂

        5> $("span").addClass(class ..  | f(index, class));

            -- 参数为多个class时,给对象添加class,参数为f时,执行函数,参数为:对象索引,对象类名

        6> $("span").removeClass(class | f(index, class));

        7> $("span").toggleClass(class | class, switch | f());

        8> $("span").html(val | f(index, html));

            -- 无参,用于获取,有参,用于修改或设置

        9> $("span").text(val | f(index, text));

            -- 不能解析html标签,其他同上

    4、CSS

        1> $("span").css(name, value);

        3> $("span").offset({top, left} | f(index, oldValue));

            -- 无参,用于获取相对于浏览器视口的相对位置 | 有参,用于设置 | 回调函数

        4> $("span").position();

            -- 获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性:top 和 left。

        5> $("span").scrollTop(val);

            -- 无参用于获取,有参用于设置

        6> $("span").scrollLeft(val);

        7> $("span").height(val);

        8> $("span").width(val);

        9> $("span").innerWidth();

            -- 匹配元素内部区域宽度(包括补白、不包括边框)可见和隐藏元素均有效

        10> $("span").innerHeight();

        11> $("span").outerWidth([boolean]);

            -- 匹配元素内部区域宽度(默认包括补白、包括边框,boolean默认为false,为true时,计算边距在内)可见和隐藏元素均有效

        12> $("span").outerHeight([boolean]);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,236评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,867评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,715评论 0 340
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,899评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,895评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,733评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,085评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,722评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,025评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,447评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,057评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2 343