zoukankan      html  css  js  c++  java
  • jQuery入门基础(事件、DOM操作)

    http://www.w3school.com.cn/b.asp

    一、事件

    1、常规事件——把js事件前面的on去掉

    比如:js:onclick——JQuery:click

    下面是 jQuery 中事件方法的一些例子:

    2、复合事件

    (1)hover(function(){},functiaon(){})——相当于把mouseover()mouseout()合二为一

    (2)toggle(function(){},function(){},....)——点击事件循环执行,具体看下面的代码用法展示

    3、事件冒泡
    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

    在事件执行完后添加return false

     4、未来元素

    对象.live("事件名",function(){});

    方法描述
    bind() 向匹配元素附加一个或更多事件处理器
    blur() 触发、或将函数绑定到指定元素的 blur 事件
    change() 触发、或将函数绑定到指定元素的 change 事件
    click() 触发、或将函数绑定到指定元素的 click 事件
    dblclick() 触发、或将函数绑定到指定元素的 double click 事件
    delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器
    die() 移除所有通过 live() 函数添加的事件处理程序。
    error() 触发、或将函数绑定到指定元素的 error 事件
    event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。
    event.pageX 相对于文档左边缘的鼠标位置。
    event.pageY 相对于文档上边缘的鼠标位置。
    event.preventDefault() 阻止事件的默认动作。
    event.result 包含由被指定事件触发的事件处理器返回的最后一个值。
    event.target 触发该事件的 DOM 元素。
    event.timeStamp 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
    event.type 描述事件的类型。
    event.which 指示按了哪个键或按钮。
    focus() 触发、或将函数绑定到指定元素的 focus 事件
    keydown() 触发、或将函数绑定到指定元素的 key down 事件
    keypress() 触发、或将函数绑定到指定元素的 key press 事件
    keyup() 触发、或将函数绑定到指定元素的 key up 事件
    live() 为当前或未来的匹配元素添加一个或多个事件处理器
    load() 触发、或将函数绑定到指定元素的 load 事件
    mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件
    mouseenter() 触发、或将函数绑定到指定元素的 mouse enter 事件
    mouseleave() 触发、或将函数绑定到指定元素的 mouse leave 事件
    mousemove() 触发、或将函数绑定到指定元素的 mouse move 事件
    mouseout() 触发、或将函数绑定到指定元素的 mouse out 事件
    mouseover() 触发、或将函数绑定到指定元素的 mouse over 事件
    mouseup() 触发、或将函数绑定到指定元素的 mouse up 事件
    one() 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
    ready() 文档就绪事件(当 HTML 文档就绪可用时)
    resize() 触发、或将函数绑定到指定元素的 resize 事件
    scroll() 触发、或将函数绑定到指定元素的 scroll 事件
    select() 触发、或将函数绑定到指定元素的 select 事件
    submit() 触发、或将函数绑定到指定元素的 submit 事件
    toggle() 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。
    trigger() 所有匹配元素的指定事件
    triggerHandler() 第一个被匹配元素的指定事件
    unbind() 从匹配元素移除一个被添加的事件处理器
    undelegate() 从匹配元素移除一个被添加的事件处理器,现在或将来
    unload() 触发、或将函数绑定到指定元素的 unload 事件

    二、DOM操作

    (1)、操作属性

    1、获取属性:$(“选择器名”).attri("属性名")

    2、设置属性:$("选择器名").attri("属性名","属性值")

    3、删除属性:$(“选择器名”).removeAttri("属性名")

    (2)操作样式

    1、获取样式:$(“选择器名”).css(“样式名”)

    2、设置样式:$(“选择器名”).css(“样式名”,“值”)

    3、添加class
    $("选择器").addClass("class名")    -向被选元素添加一个或多个类
    4、移除class
    $("选择器").removeClass("class名")   -从被选元素删除一个或多个类
    5、添加移除交替class
    $("选择器").toggleClass("class名")   -对被选元素进行添加/删除类的切换操作

    CSS 属性描述
    css() 设置或返回匹配元素的样式属性。
    height() 设置或返回匹配元素的高度。
    offset() 返回第一个匹配元素相对于文档的位置。
    offsetParent() 返回最近的定位祖先元素。
    position() 返回第一个匹配元素相对于父元素的位置。
    scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
    scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
    width() 设置或返回匹配元素的宽度。

     (3)操作内容

    1、表单样式:取值:$("选择器名").val()

                      赋值:$("选择器名").val(“值”)

    2、非表单元素:取值:$("选择器名").html()或$("选择器名").text()

                          赋值:$("选择器名").html(“值”)或$("选择器名").text(“值”)

    (4)操作相关元素

    查找:1、上几级:

    父级:parent()-- 返回被选元素的直接父元素。

    祖级:parents(选择器)-- 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。

    2、后几级:

    子级:children(选择器)-- 方法返回被选元素的所有直接子元素。

    后级:find(选择器)-- 方法返回被选元素的后代元素,一路向下直到最后一个后代。

    3、同级:

    哥哥级:prev()--返回被选元素的上一个同胞元素,该方法只返回一个元素。

    prevAll(选择器)--返回被选元素的所有前面的同胞元素。

    例:var p = $(this).prev();//查找该元素的哥哥,可以prev().prev()
    var p = $(this).prevAll("#div6");//prevtAll("选择器"),前提知道需要查找的哥哥的选择器

    弟弟级:next()--返回被选元素的下一个同胞元素。

    nextAll(选择器)--方法返回被选元素的所有跟随的同胞元素。

    例:var p = $(this).next();//查找该元素的弟弟,可以next().next()
    var p = $(this).nextAll("#div6");//nextAll("选择器"),前提知道需要查找的弟弟的选择器

    操作:

    1、新建:$(“HTML字符串”)

    例:$("选择器名").append("$('<div></div>')")

    2、添加
    append(jquery对象):在被选元素的结尾插入内容。

    prepend() :在被选元素的开头插入内容。

    after(,..):在被选元素之后插入内容。

    before("..."):在被选元素之前插入内容

    3、移除:empty()--清空内部全部元素

    remove()--移除元素

    4、复制:clone()

    var a=$("选择器名").clone()

    $("选择器名").append(a)

  • 相关阅读:
    Win(Phone)10开发第(7)弹,Extended Execution
    Win(Phone)10开发第(5)弹,本地媒体服务器的一些注意事项
    Win(Phone)10开发第(4)弹,HTTP 实时流播放 m3u8
    Win(Phone)10开发第(3)弹,简单的Demo程序网络请求json解析列表显示
    Win(Phone)10开发第(2)弹,导出APPX包并签名部署
    Win(Phone)10开发第(1)弹,桌面和手机的扩展API,还我后退键
    WP8里dll类库(SDK)实现多语言多主题
    Windows Phone中解决多模块多程序集之间相互循环引用的问题一种思路
    在继承中子类自动实现单例模式
    ansible---基础
  • 原文地址:https://www.cnblogs.com/hclyz/p/6955088.html
Copyright © 2011-2022 走看看