zoukankan      html  css  js  c++  java
  • jquery学习笔记

    偶尔翻出以前学习jquery框架做的一些笔记,大体是当时觉得有必要留心的一些东西,怕一不留心删了又错过了,就贴在这里,做个纪念。

    1、冒号(:)表示过滤,空格表示所有下级,(>)表示下一级(只一级),(+)表示紧接一个元素,(~)表示同辈,中括号[]表示属性过滤,(,)逗号表示将每一个选择器匹配到的元素合并后一起返回
    2、注意css和attr的区别,css是样式,attr是属性。例如:图片的src、alt都是属性,但非样式。
    3、若名称是由两个单词合并的第二个单词的首字母大写。例如:nextAll/wrapInner/prevUntil/andSelf等。
    4 、$("button").click();错误,button是input里面的一个属性,可以这样选择input里type属性为button的元素--$("input[type='button']").click();
    5、查找特殊字符的元素,要用// 例如$("#id//-hou") -- <p id="id-hou"></p>
    6、如果属性名包含 "-"的话,必须使用引号
    7、$("input[name='newsletter']").attr("checked", true);添加属性,checked--true不是(checked,checked)
    8、$("input[id][name$='man']") 复合条件,表示选择有id的而且name属性是以man结尾的input元素。
    9、$("ul li:first")和$("ul li:first-child")区别在于,若文件有多个ul,first只选择匹配到第一个,first-child是所有ul下的第一个li
    10、$("form :input")会匹配form下所有 input, textarea, select 和 button 元素,但$("form input")只匹配form下的input元素
    11、:password/radio/reset/button/image/file/checkbox/submit/--$(":password")和$("input[type='password']")同效果。
    12、为匹配到的对象添加属性$("xx")attr({name:"woshixingm",alt:"xingming"});--$("xx").attr("alt","xingming");
    13、html()会取得选定里面的html信息,text()只取文本信息,val()获取匹配元素的值,若是多选则返回数组。这三个若里面若有值则是给匹配元素赋值。
    14、$("#xx")append()在这#xx之后添加内容,<p id="xx"><b>lalala</b>内容添加在这里。。</p>
    15、选择器-过滤$("li:first")和筛选里面$("li").first();
    16、append(prepend)/after(before)/insertAfter(insertbefore)区别,一个(append)是把内容添加到元素内部的后面,一个(after)外面后面,insertAfter是把匹配内容添加到后面,与after插入倒置,A-B与B-A的差别。。。还有注意$("p").after($("#xx"));id=#xx里面的内容不会复制,而是直接转移过去了,原地方不会有保留,原地方要保留可以先复制(clone)再操作。
    17、删除有empty/remove/detach,empty删除所有子元素,外面标签(p/div等)保留,remove删除包括标签,但删除的内容还可以匹配操作,但绑定的事件无效了,detach除包括标签,但删除的内容还可以匹配操作,绑定的事件也还有效了
    18、offset(相对窗口)、position(相对父元素)只有left和top属性,scrollleft/scrollTop(相对滚动轴)
    19、innerHeight(不含边框)、outerHeight(含边框)
    20、事件--$('#foo').bind('click', function() {$(this).toggleClass('entered');});===$("#foo").click();
    21、hover(鼠标滑过)/toggle(鼠标点击)要绑定两个事件function。
    22、$("xx").click(function(){alert("显示");})。。。这边所有事件都要放在$(document).ready(function({ }))里面才会执行。
    22、 ajax格式
    $.ajax({
    type:"get",
    url:"some.php",
    date:"name=xx&age=yy",
    success:function(msg){
    alert("处理后的数据是:"+msg);
    }
    })
    注意要点:1、type默认get,选post要设定type,
    2、date两种方式,一种(a=xx&b=yy)另一种({a:"xx",b:"yy"})


    jq疑问:
    1、$("input:radio", document.forms[0]);里面用逗号隔开什么意思???input:后面冒号是表示筛选属性吗???
    解答:(,)逗号表示将每一个选择器匹配到的元素合并后一起返回,即返回(,)前后匹配到的结果,相加意思。
    2、DOM 对象而不是 jQuery 对象区别???
    3.怎么添加事件?
    4、$("ul li").attr(function(){retrun "cming"+$(this).index()});这个可以给导航的每个li加上对应的class值,但怎能每个class【i】都定义一遍呢??
    5、eq/first/last/等--$("li:eq(i)")和$("li").eq(i)区别???$("li:eq()")是选择器,$("li").eq()是获取该元素内容
    6、$("p").not( $("#selected")[0] )里面[0]什么意思??不是索引值
    7、{username:"long",age:"15"}传递到处理文件,$arr = $_REQUEST;$myjson=json_encode($arr); echo $myjson;,传递回来是什么数据怎么处理???eval怎么用?var aa=eval();、、、json_encode()处理后是什么数据?ajax里面urldecode和json_encode的用法???是sql出来多条结果(如parentid=1下有多个子栏目),就要用urldecode和$.each(msg,function(i,m){}),若搜索出来只有一个数据或数组(如id=1只有一个结果)
    8、animate里面background-color怎么用骆驼形式表示????


    1、$("div>p"); 选择div里面的p--例子:<p>one</p> <div><p>two</p></div> <p>three</p> 得到:<p>two</p>
    2、$("input:radio");选择input里面type为radio的所有单选按钮
    3、$(document.body);body操作
    4、$("myform.elements");表单内所有元素

    7、$("form input")表示form表单里面所有input元素,不管多少层嵌套
    $("form > input")表示form里面的直接下一级input元素,再嵌套的二级以后的不算
    $("label + input")紧接后面的一个元素。是紧接、一个。。。
    $("form ~ input") 所有和form同辈元素,不是form里面。。。同辈。。。
    8、first/last/not/even/odd/eq/gt/lt/header/animated
    例如:$("tr:first")
    $("input:not(:checked)")注意not的使用,别丢了(:)冒号
    9、contains/empty/has/parent
    例如:
    $("img").attr("title", function() { return this.src });设置图片title属性值为其src值
    10、append向匹配里面的末尾添加内容,prepend向匹配里面的前面添加内容。

    1、addClass/removeClass/toggleClass

  • 相关阅读:
    poj 3321 Apple Tree
    hdu 1520 Anniversary party
    Light OJ 1089 Points in Segments (II)
    Timus 1018 Binary Apple Tree
    zoj 3299 Fall the Brick
    HFUT 1287 法默尔的农场
    Codeforces 159C String Manipulation 1.0
    GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)
    使用 TypeScript & mocha & chai 写测试代码实战(17 个视频)
    GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)
  • 原文地址:https://www.cnblogs.com/lola/p/8030329.html
Copyright © 2011-2022 走看看