Jquery

--------------------------------基本选择器:
id .
标签 标签名
类 #
交集, 没有符号
并集, 逗号隔开
通配符 *

--------------------------------层次选择器:
后代符号为 空格
子选择器 >
相邻 +
同辈 波浪号
--------------------------------属性选择器:
[ ]

--------------------------------过滤器选择器:
:last 最后
:first 第一
:odd 偶数
:even 奇数
:eq 等于
:gt 大于
:lt 小于
:not() 从匹配集合元素中删除元素
:foucus 获取焦点的元素
:header 选取所有标题元素
:visible 选取当前所有可见元素
:hidden 选取当前所有隐藏元素

---------------------------------------------------------| 事件 |-------------------------------
---------------------------------------鼠标事件
click( ) 点击事件:当鼠标点击时触发
mouseover( ) 悬停事件:当鼠标悬停在元素上时触发
mouseout( ) 鼠标离开事件:当鼠标离开悬停的元素时触发
---------------------------------------键盘事件
keydown( ) 当按键按下时触发
keyup( ) 当按键弹起时触发
keypress( ) 当按键在按压状态时触发
--------------------------------------复合事件
hover( ) 鼠标悬停和离开时:悬停时会触发mouseover( )
toggle( ) 当指定元素被点击时,在两个或多个函数之间轮流切换在 显示和隐藏之间进行切换。
--------------------------------------表单事件
foucus( ) 当元素获得焦点时,发生 focus 事件
blur( ) 当输入域失去焦点 (blur) 时改变其颜色
change( ) 当元素的值发生改变时,会发生 change 事件。

--------------------------------------------------| 动画 |----------------------------------------------
$("img").show(2000)
$("img").hide(2000)
$("img").fadeIn(2000)
$("img").fadeOut(2000)
$("img").slideDown(2000);
$("img").slideUp(2000)

原生js可以和jq可以同时存在
同时存在是需要注意,jq函数只能被jq节点使用
jq节点指 通过jq选择器获取到的节点

-------$(select): select 选择

dom如果想要使用jq函数的话,需要将js节点转换成jq节点。

-------$(element): 把js节点转换成jq节点
element(元素)表示的是节点对象

点一次button添加一条li
原理:
先获取原本的数据,在原本的数据上添加
新建一个节点:
原生js var li = "

  • 22222
  • "
    获取原本数据
    var newli = $("#ul").html()+li
    插入
    $("#ul").html(newli)

    ------------------------------------ 》》》Dom操作实现《《《------------------------------

    ------------------------------------------在元素内部追加子节点------------------------------
    $(a).append(b) 把b添加到a中
    append 追加,在元素内部追加新的节点
    //append是jq函数,参数严格意义老说也是一个jq节点

    ------新建一个节点
    var li = $("

  • 22222
  • ") //把html标签转换成jq节点
    ------插入
    $("#ul").append(li)

    可以传入多个参数
    ------append(b) //把b添加到a中 在a之后追加
    ------appendTo(b) //把a添加到b中 在b之后追加
    ------prepend(b) //把b添加到a中 在b之前追加
    ------prependTo(b) //把a添加到b中 在a之前追加

    -----------------------------------------在同辈元素外部添加----------------------------------
    after(content) //$(A).after(B) 表示 将B插入到A之后。
    insertAfter(content) //$(A).insertAfter(B) 表示将A插入到B之后
    before(content) //$(A).before(B) 表示将将B插入A之前
    insertBefore(content) //$(A).insertBefore(B) 表示将A插入B之前

    ----------------------------------------------| 替换节点 |--------------------------
    replaceWith( ) 和 replaceAll( ) 用于替换某个节点 (node)节点 replace替换

    $("ul li:eq(2)").replaceWith($("newnode"))
    $("newnode").replaceAll$("ul li:eq(2)")
    //两个函数效果一样,但是前后对象顺序不同

    ----------------------------------------------| 复制节点 |---------------------------------
    clone()用于赋值某个节点 参数true 表示复制除了复制节点意外还复制事件
    对于要新建一个复杂的节点可以先复制一个存在的节点 在他的基础上修改

    $("ul li:eq(1)").clone(ture).appendTo("ul")//复制一个元素并添加到~~~

    -----------------------------------------| 获取元素属性 |----------------------------------
    attr() 获取 与 设置元素属性

    attr只有一个参数的时候可以根据属性名来获取值
    $("#img").attr("style")

    两个参数表示表示选择一个属性,并修改值
    $("#img").attr("src","~~~")

    同时设置多个属性(1)
    ·$("#img").attr("src","~~~")
    ·$("#img").attr("src","~~~")
    ·$("#img").attr("src","~~~")
    同时设置多个属性(2) 组装一个js对象,(大括号括起来的多个键值对)
    ¥("#img").attr({
    width:"300",
    hight:"200"
    })

    json字符串和js对象的区别
    removeAttr() 用来删除元素数据

    -------------------------------------------| 删除节点 |---------------------------------------

    //移除节点 事件没了
    remove():删除整个节点
    直接把节点在整个文档中移除

    //移除节点,附加的 事件还在
    detach():删除整个节点

    //清空节点
    empty():清空 与$("#div").html("")效果类似
    清空节点中的内容

    empty清空节点 不移除节点
    remove datech 都是删除节点 移除之后可以找回,
    remove找回节点的时候只能找回标签 和标签内容,事件丢失
    datech找回节点的时候连事件也可以找回。

    ------------------------------------------------| 遍历元素 |---------------------------------------
    children() 获取所有子元素,方法可以有参数 参数为过滤
    $("body").children()获取的子元素,但是不包含子元素的元素

    find() 获取被选取元素所有的后代元素

    -----------------------------| 遍历同辈元素 []这里表示的是可选 可以填参数也可以不填
    --next([expr]) 获取紧邻匹配元素之后的元素
    nextAll
    nextUntil(4)

    --prev([expr]) 用于获取紧邻匹配元素之前的元素
    prevAll()
    prevUntil
    --slibings([expr]) 用于获取匹配元素前面和后面的所有的同辈元素

    -----------------------------| 遍历前辈元素
    parent() 获取父辈元素
    parents() 获取祖辈元素
    parentUntil(4)

    table标签在被浏览器解析的时候,浏览器会在table
    和tbody标签 表示表格主体,没有实际意义
    但是代码中有用到层级关系时需要注意下

    -------------------------样式操作、
    css()、addClass()、removeClass()、toggleClass()

    $("") .text .val

    你可能感兴趣的:(Jquery)