zoukankan      html  css  js  c++  java
  • JQuery

    原理:DOM对象转化成JQ对象,才能操作JQ的API

    1.常见的ID、classs、标签选择器

    2.基本::first :odd :even :last :lt :gt :eq ….. 看名字识别选择器功能   注意JQ中索引是从0开始 ,而CSS中的nth-child(n)。。是从1开始

    3.属性选择器

    [属性名]包含指定元素           [属性名=值] 满足指定关系名和值               [属性名!=值]包含名 但不是这个值的 

    [属性名^=值] 以值开头        [属性名$=值]值结尾                             [属性名*=值]值包含   前提条件都是要求存在此属性名

    attr(”“,值) prop(”“,值) 可删和加

    3.过滤选择器

    子元素过滤:其实css中的位置伪类  :first-child  :nth-child(n)  :only-child  -->选择作为父元素下指定位置的子元素

    与基本过滤 ,基本过滤是先查找所有符合条件的元素,在选择结果集合中制定位置的元素

    4.表单选择器:

    :input选择所有form元素  input textarea select button

    :type类型  –>:txt:password:radio  :checkbox :submit :button :image :file :hidden  --实际是[type=”“]简化

    --------------------------

    状态伪类:   :disabled  :enabled :checked :selected

    5.添加&删除 

    .addClass(“className”)   .removeClass(“className”)   配合页面交互效果,绑定自定义属性,用属性选择器

    .toggleClass(“className”) 有就移除  没就给他加  万能的神

    Notice :事件函数中一样能用this, this指向发生此事件行为的对象,但需要$(this) 转化为dom对象

    .html(”内容“)  .value(‘表单内容’)

    .append末尾添加  .prepend 开头 –>相当于insertBefore()   此时点前对象是parent

    .before  .after  此时点前对象是child…

    6.查找替换:

    .hasClass(”className”)  children()直接子元素   find()所有符合条件的   $(child).before在child 之前插入 .after 在child 之后插入

    要替换的.replaceWidth(“新元素的代码”)  

    新元素代码片段.replaceAll(“要替换的元素”)          $(“”).clone([false/true])  默认false浅克隆,只复制属性,不复制行为 ,true深克隆,不但复制实行,而且复制行为

    7.事件绑定

    bind   1.(事件名,fn)   2.one(事件名,fn)一次性的绑定   3.$().事件名(fn) 

             bind只能已经有的元素添加事件绑定 ,但是也可以通过事件冒泡解决 ev.target,事情变复杂,于是出现了事件委托(利用冒泡)

              $(“parent”).delegate(“select”,事件类型,fn)三个参数  Notice:delegate中this是目标元素 (select) 省了 e.target

    delegate:事件监听个数少  bind通常是在子元素上添加事件监听  对于动态添加的元素,delegate可以让动态添加的元素自动响应指定事件

             bind则是页面上的

    .bind+冒泡 =.delegate

    .unbind  有3个重载   1.(事件名,fn)   2.(事件名)   3.()  注意匿名函数的解绑

    简化集合了.bind和.delegate : .on(事件,fn)  .on(事件,select,fn)

    8.模拟触发

    平级的具有相同事件处理函数时候,直接模拟触发    ().trigger(“事件名”)

    9.为了提高用户体验,在dom树和js加载完成的时候,就绑定事件  domcontentLoaded  css和图片加载不了  相当于<script>放body后面

    $(document).ready(事件处理)  window.onload()

  • 相关阅读:
    面向对象三大特性:封装,继承,多态(三、多态的进一步讲解)
    面向对象三大特性:封装,继承,多态(二、多态)
    面向对象三大特性:封装,继承,多态(一,封装和继承)
    zookeeper+dubbo+demo
    Eclipse常见版本和JDK常用版本对应关系
    Navicat 连接MySQL 8.0.11 出现2059错误
    Neo4j elk Elasticsearch kibana kettle
    jvm垃圾回收机制GC
    jvm 这我就能会了 擦
    spring的4种事务特性,4种隔离级别,7种传播行为
  • 原文地址:https://www.cnblogs.com/godbutton/p/6000708.html
Copyright © 2011-2022 走看看