Failed to obtain JDBC Connection; nested exception is java.sql.SQLException: Connections could not b

aws认证sap考试经验有哪些?aws认证运维人员考察什么?

  返回  

jQuery 常用方法

2021/7/21 14:26:19 浏览:

jQuery 常用方法

排序

  1. eq() 方法
    • jQuery 中获得的对象,内部包含选择的一组原生 js 对象,在 jQuery 对象中会进行一个大的排序,这个排序与原来的 HTML 结构没有关系。
    • eq() 方法在 jQuery 对象中通过下标获取某个对象,下标是 jQuery 对象中的大的排序的下标。
      let $ps = $('p'),$ps.eq(0).css('background-color', 'red')
  2. index() 方法
    jQuery 对象调用 index() 方法时,得到的是它自己在 HTML 结构兄弟中的下标位置,不是得到对象。与 jQuery 大排序没有关系。
    $ps.index()

排他思想

在一些事件中,希望自己是特殊的,而它的兄弟们是默认的。

排他方法

jQuery 中可以让 this 特殊设置,让兄弟 siblings 设置成默认。

  1. Tab 栏特效中的排他
    • 自己的级别的排他:给自己this添加 current 类名,让其他的兄弟删除 current 类。
    • 对应的部分的排他:给对应位置的元素添加 current,其他的兄弟删除 current 类。
    • 找对应关系,使用的是自己的 index() 下标,让另一组中下标相同的项作为对应项。
    • 通过选中另一组的对应项利用 eq() 方法选择下标项。

jQuery 操作标签的内容

  1. html() 方法
    html() 方法相当于原生 JS 中的 innerHTML 属性,用来获取或设置标签内部内容。 方法可以传递一个参数,自定义的字符串内容。

    • 获取:文本和内部标签(只获取到第一个元素的内容)
      语法:jQuery对象.html();
    • 设置:若设置标签时,标签会被渲染(会批量更改选择的所有元素)
      语法:jQuery对象.html(‘文本内容’);
  2. text() 方法
    相当于原生 JS 中的 innerText 属性,用来获取或设置标签内部文字

    • 获取:仅仅是文本(获取到所有元素的内容)
      语法:jQuery对象.text();
    • 设置:若设置标签时,标签会被当做普通文本(会批量更改选择的所有元素)
      语法:jQuery对象.text(‘文本内容’);
  3. val() 方法
    val() 方法相当于原生 JS 中的 value 属性,用来获取或设置 表单元素的内容。

    • 获取:表单元素的 value
      语法:jQuery对象.val();
    • 设置:表单元素的value
      语法:jQuery对象.val(‘文本内容’);

    注意:
    textarea 可以用这三个方法
    select获取到的是当前选中项的value,设置时是修改选中的项
    option获取到的是第一项的value,设置时是修改所有的value

jQuery 操作标签的属性

  1. attr() 方法
    attr:全称 attribute,属性的意思。
    作用:用来获取或者设置标签的属性值。

    • 设置标签的属性(可以设置自定义属性)
      语法:jQuery对象.attr(name,value);
      let $ps = $('p');$ps.attr('class', 'para')
    • 获取标签属性值
      语法:jQuery对象.attr(name);
  2. removeAttr() 方法
    作用:移除标签的属性
    语法:removeAttr(name);
    $ps.removeAttr('class')

  3. prop() 方法
    针对:selected、checked、disabled 等表单元素的属性。此类属性的属性值与属性名相同。

    • 获取语法:$(‘input’).prop(‘属性名’);
    • 设置语法:$(‘input’).prop(‘属性名’,值);
     <input type="button" disabled='disabled' class='btn'>
     <input type="checkbox" checked='checked' class="choose">
     <script>
     // 原生js 用这种方法设置或者删除
     let btn = document.getElementById('btn')
     // false表示没有这个属性,true则为有
     btn.disabled = false
     // btn.removeAttribute('disabled') 这种方法也可以移除属性
     
     // jq 中采用如下方法
     let $btn = $('.btn'),
         $choose = $('.choose')
     //获取时,打印结果为true或false,如果设置了就是true,没设置就是false
     console.log($btn.prop('disabled'));
     console.log($choose.prop('checked'));
     // 设置方法
     $btn.prop('disabled',false)
     $btn.prop('disabled',true)
     </script>
    

jQuery 操作样式方法

  1. css() 方法

    • 用于调用 css 属性值或者更改 css 属性值。
    • 语法:jQuery对象.css(name,value);
    • 参数1:字符串格式的 css 样式属性名
    • 参数2:设置或更改的属性值。

    注意:

    • 一个参数:表示调用 css 属性的值,得到的是某个元素的计算后样式,值为字符串格式。
    • 两个参数:表示设置 css 样式属性,第二个参数可以是字符串格式的属性值,如果带单位的数字的 属性值,可以写成带单位的字符串格式、不带单位的字符串、纯数字、带 += 等赋值运算的字符串。
    let $div = $('div')  
    $div.css('width', '100px')  
    $div.css('width', '100') 
    // 可以不带单位 
    $div.css('width', 100)  
    //表示在原来的宽度上加100
    $div.css('width', '+=100')
    
    • css() 方法的第一个参数,复合属性的单一属性写法可以是驼峰命名法,也可以是横线写法。
    • 可以给同一个对象同时设置多条 css 属性,将多条属性的属性和属性值写成对象格式,传给 css() 的参数
    $div.css({
    'width': '+=100',
    'height': 300,
    // 驼峰命名和横线写法都可以
    'background-color': 'red',
    'backgroundColor': 'yellow'
    })
    

jQuery 操作类名方法

优点:三个方法只操作参数部分的类名,不影响原有的其他类名

  1. addClass() 添加类名

    • 语法:jQuery对象.addClass(‘类名’)
    • 参数:字符串格式的类名。
      let $div = $('div');$div.addClass('blue')
  2. removeClass() 移除类名

    • 删除指定的类名
    • 语法:jQuery对象.removeClass();
      $('div').removeClass('blue')
    • 参数:字符串格式的类名。
    • 不传参数,表示删除所有的类名
      $('div').removeClass()
  3. toggleClass() 类名切换

    • 若这个类名存在,则会移除该类名。否则添加该类名
    • 语法:jQuery对象.toggleClass(‘类名’);
    • 参数:字符串格式的类名。
  4. hasClass()
    检测类名是否存在

    • 语法:jQuery对象.hasClass(‘类名’);
    • 返回值:true 和 false

jQuery 常用事件方法

  • jQuery 对象封装了一系列的事件方法。
  • 事件方法与原生 JS 事件方法名称类似,不需要写 on。
  • 事件方法需要 jQuery 对象打点调用,小括号内的参数是事件函数。
  • 例如点击事件:click() 方法
  1. mouseenter() 方法
    • jQuery 中自己的事件方法。
    • 鼠标进入一个元素触发的事件。
  2. mouseleave() 方法
    • jQuery 中自己的事件方法。
    • 鼠标离开一个元素触发的事件。
    • 对比 注意:
      mouseenter 和 mouseleave 没有事件冒泡。
      在使用时替换 mouseover 和 mouseout 更加合适。
  3. hover() 方法
    • hover 事件相当于将 mouseoenter 和 mouseleave 事件进行了合写。
    • 参数:有两个参数,第一个参数是鼠标移上执行的事件函数,第二个参数是鼠标离开执行 事件函数。

jQuery 关系查找方法

  1. $(this) 自己
    在原生的 DOM 操作中,事件函数内部有一个 this 关键字指向的就是触发事件的事件源,在 jQuery 中将 this 关键字传递给 $() 方法,得到就是指向自己的 jQuery 对象,就可以使用 JQ 的方法。
  2. parent() 父级
    • jQuery 对象都有一个 parent() 方法,得到的是自己的父亲级。
    • 父级得到的也是一个 jQuery 对象,直接继续打点调用 JQ 方法和属性
  3. children() 子级
    • jQuery 对象内部有一个 children() 方法,可以得到自己的所有子级元素组成的 jQuery 对象。
    • 得到的子级组成的 jQuery 对象可以继续调用 JQ 方法和属性。
    • 获得子级时,不限制标签类型。
    • children() 可以传参数:参数是字符串格式的选择器,在选中所有子级的情况下,保留满足选择器的部分,进行了二次选择。
  4. siblings() 兄弟
    • jQuery 对象通过调用 siblings() 方法可以得到除了自己以外的所有同级元素(兄弟)组 成 jQuery 对象,找到的只能是亲的兄弟,不能是叔叔家的兄弟。
    • siblings() 方法得到的 jQuery 对象可以进行二次选择,通过给参数传递字符串格式的选择器
    • 得到 jQuery 对象可以继续使用 JQ 的方法和属性。

链式调用

  • jQuery 对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回 值就是 jQuery 对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用 JQ 的方法和属性。
  • 可以使用 jQuery 对象进行连续打点调用。

jQuery 其他关系查找方法

  1. find() 后代元素
    • jQuery 对象可以利用 find() 方法,传递一个参数,参数部分规定的选择器,查找范围是 jQuery 对象的所有后代。
    • 参数是字符串格式的选择器。
  2. 兄弟元素 紧邻的兄弟元素方法
    • next() 下一个兄弟
    • prev() 前一个兄弟 多选方法
    • nextAll() 后面所有兄弟
    • prevAll() 前面所有兄弟
    • 通过传递参数可以进行二次选择,参数是字符串格式的选择器,在前面或后面兄弟中选中符合选择器规定的部分。
  3. parents() 祖先级
    • 通过该方法得到的是指定对象的包含 body 在内的所有祖先级元素组成的 jQuery 对象。
    • 通过传参进行二次选择,参数位置是字符串格式的选择器

遍历

jQuery 对象进行的操作都是批量操作,批量操作只能执行一些简单的效果。如果想对 JQ 对象中的每一个元素以及内部的后 代元素进行一些复杂操作,程序很难执行

  1. each()

    • 参数是一个函数。
    • 作用:就是对 jQuery 对象中的元素每一个都执行函数内部的操作。
    • each 方法的基本原理就是 for 循环,从对象的下标为 0 的项一直遍历到最后一项,然后 对每一项进行操作。
    • 优点:
      each 的函数内部,也有一个 this,指向的是进来遍历的每一次的元素。
      each 的函数可以传一个参数 i,i 表示的是这一次的遍历对象在整体的 jQuery 对象大排队中的下标位置。
    let $div = $('div');
    $div.each(function (i) {
    // i记录的是当前遍历的元素在大排序中的位置,需要写在形参位置
    console.log(i);
    // each 参数内的函数有一个this,指向的是每一次遍历的元素
    $(this).children().eq(2).css('background-color', 'yellow')
    })
    
    • 案例 表格隔列变色

jQuery 切换效果方法

  1. hide() 和 show() 方法

    • hide():元素隐藏,隐藏的前提是元素设置 display:block;
    • show():元素显示,显示的前提是元素 display:none;
    • toggle():在元素隐藏和显示之间进行切换。
    • 这三个方法可以设置元素的显示和隐藏效果,在过程中还可以出现过渡动画。
    • 如果不传参数:直接显示和隐藏,没有过渡动画。
    • 如果传递参数:有过渡效果。过渡时间内,伴随着宽度和高度以及透明度的变化。
      单词格式:“slow”,“normal”, “fast”
      数字格式的时间,单位是毫秒,在规定时间之内会出现显示或隐藏的动画。
  2. slideDown() 和 slideUp() 方法
    滑动 显示隐藏,让元素在 display 属性的 block 和 none 之间进行切换

    • slideDown():滑动显示(方向不一定)
    • slideUp():滑动隐藏
    • slideToggle():滑动切换
    • 如果不传参数:默认的过渡时间为 400 毫秒。
    • 如果传递参数:
      单词格式:“slow”,“normal”, “fast”
      数字格式的时间,单位是毫秒,在规定时间之内会出现显示或隐藏的动画。
    let $div = $('div');
    // 收到左上角消失
    $div.hide('slow')
    // 从左上角扩大显示
    $div.show('fast')
    // 收到上面 消失
    $div.slideUp()
    // 从上面放下来 显示
    $div.slideDown('slow')
    
    • 注意:
      • 如果滑动的元素没有设置宽高,没有滑动效果,会和hide和show一样,是收缩到左上角。
      • 如果元素设置了高度和宽度,会进行上下垂直方向的滑动。
      • 动画的效果:高度属性在 0 到设置值之间的变化,没有透明度动画。
      • 如果元素设置了定位(fixed或absolute),偏移量方向如果是 bottom 参与了,滑动方向会发生变化。会收到下方隐藏或者从下方向上显示。
  3. 淡入淡出 fadeIn() 和 fadeOut() 方法

    • 动画效果,执行的是透明度动画。也是在 display 属性的 block 和 none 之间切换。
    • fadeIn():淡入,透明度逐渐增大最终显示。
    • fadeOut():淡出,透明度逐渐降低最终隐藏。
    • fadeToggle():切换效果。
    • fadeTo():淡入或淡出到某个指定的透明度。
      fadeTo(400,0.5)第一个参数为时间,第二个参数是透明度
    • 如果不传参数:默认的过渡时间为 400 毫秒。
    • 如果传递参数:
      单词格式:“slow”,“normal”, “fast”
      数字格式的时间,单位是毫秒,在规定时间之内会出现显示或隐藏的动画。

动画方法

  1. animate() 方法

    • 作用:执行 CSS 属性集的自定义动画。
    • 语法:$(selector).animate(styles,speed,easing,callback)
    • 参数1: 对象形式的 css 的属性名和运动结束位置的属性值的集合。
    • 参数2:可选,规定动画的速度,默认是 “normal”。其他值,“slow”、“normal”、 “fast”,数字格式,单位为毫秒。
    • 参数3:可选,规定在不同的动画点中设置动画速度的 easing 函数,值包含 swing 和 linear。
    • 参数4:可选,animate 函数执行完之后,要执行的函数。
    • 注意:其他的运动方法比如 slideUp() 等,也有参数3 和参数4.
    let $div = $('div');
    $div.animate({
    "width": 500,
    'height': 500
    }, 2000, 'swing', function () {
    $div.css('background-color', 'grey')
    })
    // swing 表示变速运动
    // 如果绑定事件,那么函数内的$(this)指向就是事件源
    
  2. 动画排队

    • ①同一个元素对象身上,如果定义了多个动画,动画会排队等待执行。
    • ③如果是的其他非运动的代码,不会等待运动完成。
    • ②如果是不同的元素对象都有动画,不会出现排队机制。
    • ④之前学习的自带动画的显示隐藏方法,如果设置给同一个元素,也有动画排队。
    • 同一个元素身上的运动,可以简化成链式调用的方法。
      $('div').fadeIn().fadeOut().fadeIn().fadeOut()
  3. delay() 延迟方法

    • delay:延迟的意思。
    • 将 delay() 设置在某个运动方法之前,表示后面的运动要在规定的时间之后再执行,有延迟运动的效果。
    • 参数:时间的数值,表示延迟的时间。
    • 除了 animate 方法之外,其他的运动方法也有延迟效果。
      $('div').delay(2000).fadeIn().fadeOut().fadeIn().fadeOut()
  4. stop() 停止动画方法
    设置元素对象身上的排队的动画以何种方式进行停止。

    • 有两个参数,都是布尔值。
    • 参数1:设置是否清空后面的动画排队,如果是 true 表示清空,如果是 false 表示不清 空只停止当前的一个动画。
    • 参数2:设置当前动画是否立即完成,如果是 true 表示立即完成,对象会立刻走到结束位 置,如果是 false 表示不完成当前动画,立即停止在当前位置。
    • 默认情况下,两个参数值默认值为 false。
    • 根据两个参数的值,可以得到四种停止方式。
    • 实际工作中,一般要求清空后面的排队,停止在当前位置,多使用 stop(true),第二个参数不设置默认为 false
  5. 清空动画排队
    如果将开启运动的程序放在一个事件函数中,事件多次被触发,会执行多次函数,就会在一个元素身上添加了多个动画,会进行动画排队。所以需要去清除排队的动画,进行防骚扰操作。

    • 方法1 利用 stop() 方法。
      在每一个运动函数之前都增加一个 stop(true),表示在运动执行之前,会将前面排队的动 画清空,然后停止在当前位置。
    • 方法2
      1.利用函数节流方法,如果元素在运动,直接 return,不要执行后面的运动代码。
      2.每个 jQuery 对象,都能调用一个 is() 方法,作用是显示元素对象的某种状态。
      3.如果参数位置是 is(":animated"),返回值是布尔值,true 表示正在运动,false 表示没有运动。

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号