zoukankan      html  css  js  c++  java
  • jQuery学习总结1

    一、下载集CDN引入

    1.1、官方下载

    地址:http://jQuery.com/download/

    jq2.0版本开始,不再支持IE9一下浏览器;自3.0版本开始,针对移动端做了优化处理;


    引入

    <script src="jQuery-1.8.3.js"></script>

    1.2、CDN加速

    如果将我们的代码放在各大城市,根据用户所在地去距离用户最近的地方下载,那么我们网站的打开速度将会大大提升,这就是所谓的CDN加速的基本原理;

    http://www.bootcdn.cn

    http://cdn.code.baidu.com

    引入

    <script src="https://cdn.bootcss.com/jQuery/3.2.1/jQuery.js"></script>

     

    1.3、手册

    在线手册   http://www.jb51.net/shouce/jQuery1.82/

    手册下载    http://www.php.cn/xiazai/shouce/14

    二、jQuery中的选择器

    定义:获取元素的各种方式,我们统称为选择器,使用方式$(‘选择器’)

    2.1基本

    #id                                            //id

    element                                       //标签

    .class                                          //类名

    *                                             //全选包含body

    selector1,selector2,selectorN                      //多选

    2.2层级

    ancestor descendant                            //祖先 后代

    parent > child                                  //父>子

    prev + next                                   //兄+弟,紧邻的一个

    prev ~ siblings                                 //兄~弟,之后所有的

    2.3简单

    :first                                          //兄弟,第一个

    :last                                          //最后一个

    :not(selector)                                  //除了()之外

    :even                                         //偶数,从0开始

    :odd                                          //奇数,

    :eq(index)                                     //相等,从0开始

    :gt(index)                                      //大于

    :lt(index)                                       //小于

    :header                                        //匹配h1-h6标题

    :animated                        //所有正在执行动画效果的元素

    :focus                                           //获得焦点的

    2.4内容

    :contains(text)                               //包含给定文本的元素

    :empty                                     //空

    :has(selector)                                //如:$("div:has(p)")

    :parent                                //含有子元素或者文本的元素

    2.5可见性

    :hidden                 //所有不可见元素,或者type为hidden的元素

    :visible                                     //所有的可见元素

    2.6属性

    [attribute]                               //包含给定属性的元素

    [attribute=value]                      //如:$("input[class='red']").

    [attribute!=value]                     //不含有指定的属性

    [attribute^=value]                    //属性名以某些值开始

    [attribute$=value]                     //属性名以某些值结束

    [attribute*=value]                    //属性是以包含某些值的元素

    [attrSel1][attrSel2][attrSelN]             //需要同时满足多个条件

    2.7子元素

    :nth-child                    //如:$("ulli:nth-child(2)"),从1开始

    :first-child                                        //第一个

    :last-child                                        //最后一个

    :only-child                             //是父元素中唯一的子元素

    2.8表单

    :input                                    //input标签

    :text                                     //Type类型为text

    :password

    :radio

    :checkbox

    :submit

    :image

    :reset

    :button

    :file

    :hidden               //所有不可见元素,或者type为hidden的元素

    2.9表单对象属性

    :enabled                                       //所有可用元素

    :disabled                                      //所有不可用元素

    :checked                           //所有选中的,单选框,复选框

    :selected                              //所有选中的option元素,下拉

    三、属性操作

    3.1、基本属性

    attr(name) : 根据属性的名称获取元素的属性值

    attr(key,value) : 设置元素的属性, key属性, value属性值

    attr(properties) : 一次为元素设置多个属性, 要求参数是一个json对象

    attr(key,fn) : 通过函数的返回值设置元素的属性

    removeAttr(name) : 移除元素的属性

    3.2、class属性

    addClass(class)为元素添加class属性

    removeClass(class)移除元素的class属性

    toggleClass(class)切换元素的class属性,如果有就移除,没有就添加

    hasClass(class)判断元素是否具有某个class属性

    3.3、css样式

    css(name)根据name获取元素的css属性值

    css(name,value)设置元素的属性值

    css(properties)一次为元素设置多个属性值,要求参数是一个json对象

    3.4 offset位置

    offset():获取元素的横纵坐标,返回一个json对象,拥有lefttop属性

    offset(coordinates):设置元素位置要求是一个json对象,必须包含lefttop属性

    3.5宽高设置

    width()获取元素的宽度

    width(value)设置元素的宽度

    height()获取元素的高度

    height(value)设置元素的高度

    3.6、表单值和文件内容

    val() 获取表单元素的value

    val(val)设置表单元素的value

    html() 获取元素的内容

    html(val)设置元素的内容

    text() 获取元素的文本内容

    text(val)设置元素的文本内容

    3.7、复选框

    attr(‘checked’,true);      复选框设置为选中

    attr(‘checked’,false);      复选框设置为不选中

    this.checked=!this.checked         复选框设置反选

    四、jQuery对象 与 dom对象关系

    jQuery对象: $(‘#one’)  $(‘li’)  等选择器使用返回的信息就是对象,称为“jQuery对象”

    dom对象: document.getElementById()  ocument.getElementsByTagName()等返回的信息就是“dom对象”

    4.1、 jQuery对象àdom对象

    jQuery对象[下标]

    4.2、dom对象àjQuery对象

    $(dom对象)

    五、事件编程

    5.1、页面加载事件

    $(document).ready(function(){})

    $(document)是把document的dom对象变为jQuery对象

    $().ready(function(){});

    $()也是创建jQuery对象,不过内部没有dom对象的组成部分   不加载资源

    $(function(){});

    该加载事件是对第①种加载事件的封装,运行决定速度稍慢(没有第①种快)对第一种加载的封装而已

    5.2、 jq中的事件绑定

    原生js事件绑定语法:

    DOM对象.on事件名称=事件的处理程序

    jq事件绑定语法:

    jq对象.事件名称(事件的处理程序);    事件监听

     

    5.3jq中常用事件

    所有事件都是方法

    blur(fn)当失去焦点时触发

    change(fn)当状态改变时触发

    click(fn)当单击时触发

    dblclick(fn)当双击时触发

    focus(fn)当获得焦点时触发

    keydown(fn)当键盘按下时触发

    keyup(fn)当键盘弹起时触发

    keypress(fn)当键盘按下时触发

    load(fn)ready一样都是页面载入事件

    unload(fn)当页面关闭时触发

    mousedown(fn)鼠标按下时触发

    mouseup(fn)鼠标弹起时触发

    mousemove(fn)鼠标移动时触发

    mouseover(fn)鼠标悬浮时触发

    mouseout(fn)鼠标离开时触发

    resize(fn)当窗口大小改变时触发

    scroll(fn)当滚动条滚动式触发

    select(fn)当文本框中的文本选中时触发

    submit(fn)当表单提交时触发

     

    5.4、事件切换

    hover(fn1,fn2)

    当鼠标移动到一个匹配的元素上面时, 会触发指定的第一个函数。

    当鼠标移出这个元素时, 会触发指定的第二个函数。

    toggle(fn1,fn2,fn3...fnN)

    点击切换事件,第一次点击执行fn1,第二次点击执行fn2,第三次点击执行fn3,当所有函数执行完后再点击,则再次从第一个开始执行;

    5.5、事件处理

    one('事件1事件2事件N',fun)

    为选中元素绑定一次性事件(多个事件用空格隔开)

    bind('事件1事件2事件N',fun) :   为选中元素绑定一个或多个事件(多个事件用空格隔开);注:jQuery 3.0中已弃用此方法,请用on()代替。

    unbind('事件1事件2事件N') :

    bind 的反向操作,为选中元素删除一个或多个事件(多个事件用空格隔开)jQuery 3.0中已弃用此方法,请用off()代替。

     

    5.6、事件对象

    event.stopPropagation()

    防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数。

    event.preventDefault()

    阻止默认事件行为的触发。

  • 相关阅读:
    robotframework +selenium 自动化测试之浏览器与驱动的兼容问题。
    robotframework+selenium自动化robotramework版本问题
    一个业务逻辑引发的对多表连接的思考
    第一次接触WebSocket遇到的坑以及感受
    关于读写APP.config文件能读却写不了的问题
    poj2392 space elevator
    洛谷P1197 星球大战
    poj3421&poj3292&poj2689 基础数论
    洛谷P1006 传纸条
    挑战程序设计竞赛2.3节习题选解
  • 原文地址:https://www.cnblogs.com/idjl/p/9610608.html
Copyright © 2011-2022 走看看