• jquery篇


    jQuery

    快速、简洁的JavaScript框架,设计宗旨:write Less, Do More
    作用:简化原生js的语法,解决浏览器兼容性问题。

    引入jQuery
    可以直接引入在线地址,也可以在jQuery[官方网站][1]上下载,然后使用src属性引入:

    [1]: https://jquery.com/

    基础语法:$(selector).action()

    • $jQuery对象
    • selector:选择器,用于定位HTML元素
    • action():方法,用于对元素进行操作

    文档就绪函数

    //HTML文档加载完成后,再开始执行该方法里面的函数
    $(document).ready(function(){
        //代码段
    })
    

    jQuery选择器

    jQuery选择器相比原生javascript功能更加强大

    元素选择器

    • $('#id')id选择器,类似document.getElementById("#id")
    • $('.class')class选择器,类似document.getElementsByClassName('.class')
    • $('tag')tag选择器,类似document.getElementsByTagName('tag')
    • $('tag.class'):父子选择器

    属性选择器

    • $("[attr]"):选取所有带有attr属性的元素
    • $("[attr='value']")选取所有带有attr属性并值为value的元素
    • $("[attr$='value']")选取所有带有attr属性并以value结尾的元素

    jQuery事件

    事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。

    常用事件:
    ready():文档就绪事件,HTML加载完成后调用
    bind():为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
    focus():当元素获得焦点的时候调用
    blur():当元素失去焦点的时候调用
    change():当元素的值发生改变时调用(仅仅适用于form表单中的textfieldselecttextarea
    click():当点击元素的时候调用
    dblclick():当双击元素的时候调用
    keydown():当键盘按钮被按下时调用
    keyup():当键盘按钮被松开时调用
    keypress():当键盘按钮被按下时调用(必须插入字符才能被调用)
    mousedown():当鼠标指针移动到元素上方,并按下鼠标按键时调用
    mouseup():当在元素上放松鼠标按钮时调用,常与mousedown()一起使用
    mousemove():当鼠标指针在指定元素上移动时调用
    submit():当提交表单的时候调用

    jQuery是为处理HTML事件而特别设计的,当遵循以下原则时,代码会更容易维护:

    • 把所有jQuery代码置于事件处理函数中
    • 把所有事件处理函数置于文档就绪事件处理器中
    • jQuery代码置于单独的.js文件中

    关于DOM

    相比原生javascriptjQuery拥有更为强大的可操作HTML元素和属性的方法。

    查找HTML元素

    • $("#id")
    • $(".class")
    • $("tag")

    对元素的操作

    • append():在被选元素的结尾插入内容
    • prepend():在被选元素的开头插入内容
    • after():在被选元素之后插入内容
    • before():在被选元素之前插入内容
    • remove():删除被选元素(及其子元素)
    • empty():从被选元素中删除子元素

    对属性的操作

    • attr():设置或返回所选元素的属性和值
    • removeAttr():从所选元素中移除指定的属性
    • addClass():为所选元素添加指定的类名
    • removeClass():为所选元素删除全部或指定的类
    • hasClass():判断所选元素是否拥有指定的类

    对文本的操作

    • text():设置或返回所选元素的文本内容
    • html():设置或返回所选元素的内容(包括HTML标记)
    • val():设置或返回表单字段的值

    CSS的操作

    • css():设置或返回所选元素的样式属性
    • height():设置或返回所选元素的高度
    • width():设置或返回所选元素的宽度
  • 相关阅读:
    前端实现文件下载
    es6 Promise简单介绍
    es6开发环境搭建,babel 将es6转化成es5
    如何让写得html页面自动刷新
    es6箭头函数
    js对象跟数组多层嵌套,检测没有此数据就添加有则不添加以及超过限制条件删除操作
    小程序分享进入H5动态网页
    数据结构与算法--基本概念
    Unity中的常用输入
    Unity中的物体旋转
  • 原文地址:https://www.cnblogs.com/jackw1/p/12597425.html
Copyright © 2020-2023  润新知