JQuery的介绍与使用

    科技2024-01-27  101

    文章目录

    基本语法和常用方法jQuery对象与原生js对象jQuery选择器jQuery事件绑定等相关机制jQuery的DOM操作元素节点操作属性节点操作

    基本语法和常用方法

    基本语法结构 $(选择器).jquery方法(); 常用方法 $(function(){}) 页面加载结束后执行;$(选择器).css(“css属性”,“css属性值”)$(选择器).prop(“html属性”,“html属性值”)$(选择器).html() 双标签中的内容$(选择器).val() 表单元素的value 以上几个方法较常用,且用法类似如果有参数是设置属性,如果没参数是读取属性。

    jQuery对象与原生js对象

    Jquery对象与原生js对象不可通用 Jquery对象只能调用jquery的方法, 不能调用原生对象的属性原生对象只能调用原生的方法和属性, 不能调用jquery的方法 原生对象与jquery对象可以转换 注意:this是原生对象 在jquery中使用this时 需要$(this)

    jQuery选择器

    常见选择器(同css)

    id选择器 #id名 只选到一个元素class选择器 .class名标签(元素)选择器 标签名 选择范围较大 经常和其他选择器一起使用全局选择器 * 选择全部元素交集选择器 选择器选择器 先元素 再其他并集选择器 选择器,选择器 同时选择多个选择器后代选择器 选择器 选择器 找元素中的元素子代选择器 选择器>选择器 找直接包含的元素属性选择器 [属性] [属性=‘属性值’] 通过属性选择元素相邻元素选择器 选择器+选择器 同级相邻 一个相邻同级选择器 选择器~选择器 同级相邻 多个

    集合中筛选元素

    :first 第一个:last 最后一个:even 奇数:odd 偶数:eq(idx) 指定索引:lt(idx) 小于指定:gt(idx) 大于指定

    表单元素选择器

    :input:text:password:radio:checkbox:button:submit:image:checked 选中的项:selected 下拉列表中 选中的option

    辅助筛选元素的方法(可以链式调用)

    jquery元素.find(选择器) 子元素jquery元素.eq(idx) 集合中根据索引查找jquery元素.not(选择器) 排除某个特征jquery元素.next() 同级元素向后查找jquery元素.prev() 同级元素向前查找

    jQuery事件绑定等相关机制

    jQuery事件绑定有四种:bing()、live()、delegate()、on(),其中live(),已经被淘汰了,其存在很多的问题,不适合使用,而delegate能够在绑定事件后,依然可以添加动态元素事件。on()可以说是前三种方法的结合体(推荐使用on)。

    jquery中选择元素,有隐式循环机制

    多个元素 统一赋值时 可以利用隐式循环 节省代码;取值时没有此特性 需要循环取值。

    绑定事件,.click等,同js时事件去掉on

    .事件 给元素绑定事件 必须保证页面元素已存在$(this) 发生对应事件的元素表单提交 动态绑定事件

    元素集合遍历.each(function(i){})

    i表示遍历时的索引$(this) 当前遍历到的元素

    jQuery的DOM操作

    元素节点操作

    子节点 A.append(B) A里添加节点B B.appendTo(A) 把B添加到A的内部 A.prepend(B) A里添加节点B 头部插入 B.prependTo(A) 把B添加到A的内部 头部插入同辈节点 A.after(B) A后边添加同辈节点B B.insertAfter(A) 把同辈节点B添加到A后边 A.before(B) A前边添加同辈节点B B.insertBefore(A) 把同辈节点B添加到A前边替换节点 A.replaceWith(B) B替换A B.replaceAll(A) B替换A复制节点 A.clone(true) 复制A节点 参数决定是否复制元素上绑定的事件删除节点 A.remove() 删除A节点及其子孙 A.empty() 删除A的子孙节点 根据层次获取获取子节点 A.children() 获取A的子节点获取同辈节点 A.next() 获取A的紧邻下个节点 A.prev() 获取A的紧邻上个节点 A.siblings() 获取A的所有同辈节点获取父节点 A.parent() 获取父节点 A.parents() 获取所有父节点

    属性节点操作

    attr() 可以获取自定义属性 对disabled checked等属性返回undefined或者字符串值prop() 不可以获取自定义属性 对disabled checked等属性直接返回bol值removeAttr() 删除属性removeProd() 删除属性注意: 属性节点操作在普通属性上 选择两个方法都可以在有bol值的属性上 适合使用propattr可以通过自定义属性进行传值
    Processed: 0.012, SQL: 9