zoukankan      html  css  js  c++  java
  • JavaWeb学习笔记(四)jQuery

    一、jQuery简介

    • jQuery就是JavaScript和Query,是辅助JavaScript开发的JS类库
    • 好处:jQuery 的语法设计可以使开发更加便捷,例如操作文档对象、选择 DOM 元素、 制作动画效果、事件处理、使用 Ajax 以及其他功能

    二、jQuery使用前的准备工作

    1. 导入jQuery类库
    2. 学会使用核心函数$()

    三、核心函数 $()

    • 传入不同的参数,对应不同的功能
    出入的参数 含义
    函数 表示页面加载完成之后,相当于 window.onload = function(){}
    HTML字符串 会创建HTML标签对象
    选择器字符串 id选择器:$("#id属性的值"):根据id查询标签对象
    标签名选择器:$("边签名"):根据标签名查询标签对象
    类型选择器:$(".class属性的值"):根据class属性查询标签对象
    DOM对象 把DOM对象转换为jQuery对象

    四、jQuery对象和DOM对象的区别

    1、首先清楚什么是jQuery对象,什么是DOM对象

    • DOM对象
      • 通过getElementById()、getElementsByName()、getElementsByTagName()查询出来的对象,是DOM对象
      • 通过createElement()方法创建的对象,是DOM对象
      • DOM对象Alert 出来的效果是: [object HTML 标签名 Element]
    • jQuery对象
      • 通过 JQuery 提供的 API 查询到的对象,是 JQuery 对象
      • 通过 JQuery 提供的 API 创建的对象,是 JQuery 对象
      • 通过 JQuery 包装的 Dom 对象,也是 JQuery 对象
      • jQuery 对象 Alert 出来的效果是:[object Object]

    2、jQuery的本质是什么

    jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

    3、使用区别

    • 各自用各自的属性和方法,互不干涉

    4、相换转换

    • dom 对象转化为 jQuery 对象:$( DOM对象 )
    • jQuery 对象转为 dom 对象:jQuery对象[下标]取出相应的DOM对象

    五、 jQuery 选择器

    1、基本选择器

    • 查找所以元素:*

    • id选择器:#id

    • class选择器:.class

    • 标签选择器:element

    • 组合选择器:selector1.selector2(用.连接,表示的关系)

    2、层级选择器

    • 后代选择器:如,form input,获取form表单下的所有input元素

    • 子元素选择器:parent > child,获取父元素的所有子元素

    • 相邻元素选择器:prev + next,获取进阶在prev元素后的所有next元素

    • 之后的兄弟元素选择器:prev ~ sibings,获取所有pre之后的所有sibings元素

    3、过滤选择器

    • :first:获取第一个元素
    • :last:获取最后一个元素
    • :eq(index):找到给定索引值的元素

    4、内容过滤器

    • :contains(text):获取包含指定文本的元素
    • :empty:获取空元素
    • :parent:获取非空元素
    • :has(selector):获取含有选择器所匹配的元素的元素

    5、属性过滤器

    • [attribute]:匹配包含给定属性的元素
    • [attribute=value]:匹配给定属性是某个值的元素

    6、表单过滤器

    • :input:匹配所有input、textarea、select、button元素
    • :text:匹配所有文本输入框
    • :password:匹配所有密码输入框
    • :radio:匹配所有单选框
    • :checkbox:匹配所有复选框

    7、表单对象属性过滤器

    • :checked:匹配所有选中的单选、复选、下拉列表中选中的option标签对象
    • :selected;匹配所有选中的option元素
  • 相关阅读:
    js人工智能对话框
    html 实现相册
    thinkphp5 三种重定向(跳转)
    thinkphp5 分页实现
    常用的Mysql数据库操作语句大全
    FormData之file图片上传
    FormData对象
    input file 上传图片时限制格式
    form 中Enctype=multipart/form-data 的作用
    thinkphp5 不刷新退出
  • 原文地址:https://www.cnblogs.com/liuzhixian666/p/13844241.html
Copyright © 2011-2022 走看看