zoukankan      html  css  js  c++  java
  • 2021 1 17 jQuery学习笔记

    越发觉得jQuery的必要性,用jQuery的话Ajax和json会方便很多

    jQuery学习笔记

    1、jQuery是封装好的跨浏览器的js函数库,功能类似于自定义的函数,封装了相关的方 法调用,能操作对象,DOMAjax

    2、使用jQuery,先加入js文件,调用文件就可以

    3、$jQuery中的一个函数名,例如:

    页面加载完成后执行函数(window.onload):$(document).ready(函数(){})

    简化:$(函数(){})  即可

     

    4、DOM对象和jQuery对象

    DOM对象可以使用js代码获取,创建的对象,HTML中的对象都是DOM对象,jQuery 对象是使用jQuery获得的对象,只有jQUery对象可以使用jQuery的函数,要用 jQuery操作DOM对象要把DOM对象和jQuery对象相互转换,为了区分两种对象, 可以在jQuery对象前加一个‘$

    A、DOMjQuery:   $(DOM 对象) 获得jQuery对象

     

    B、jQueryDOMjQuery对象是一个数组,数组成员是DOM对象,顺序为DOM 声明顺序使用[下标]get(下标)

    使用jQUery的方式表示DOM对象:$(“DOMID”) 即可

     

    5、使用jQuery获取对象

    使用jQUery的方式表示DOM对象:$(“#DOMID”) 即可

    6、选择器

    选择器是一个定位DOM对象的字符串,用这个字符串定位DOM对象,可以用id,class 样式名称,标签名字等作为选择器使用,定位DOM对象

    (1) 基本选择器

    ① id选择:  $(“# id”)

    ② class选择:   $(“.class名称”)

    ③ 标签选择器:   $(“标签名称”)

    ④ 所有选择器:   $(“*”)

     

    ⑤ 组合选择器:  $(“#id,.class,标签名”)

     

    ⑥ 

    表单选择器 语法: $(“: inputtype属性值”)

     

     

    7、css函数可以设置css内容

    8、过滤器 可以筛选选择器选择的DOM对象,是一个字符串,和选择器一起使用,在选择 DOM对象之后再进行筛选

    (1) 基本过滤器 使用DOM在数组中的位置为过滤条件

    比如数组第一个DOM$(选择器:first”)

    数组最后一个DOM$(选择器:last”)

    数组第三个DON$(选择器:eq(3)”)

    数组下标大于4DOM$(选择器:gt(下标)”)

    下标小于4DOM:  $(选择器:lt(下标)”)

    (2) 表单对象过滤器 根据表单对象状态进行筛选

    可用文本框:$(“:textenable”)

    不可用文本框: $(“:text:disabled”)

    选中复选框:  $(“:checkboxchecke”)

    选中下拉列表框: $(“选择器>option:selected”)

    9、jQUery绑定事件的两种方式

    第一种:$(“选择器”).事件名称(事件处理函数)  

     

    第二种: on,语法:$(选择器).on(“event事件名称function(){事件处理函数})

     

    10、jQUery的一些函数

    (1) val(),操作DOM对象的value,没有参数表示获取DOM数组第一个DOM对象的value值;有参数表示给DOM数组的所有DOM对象的value

    (2) text(),操作标签的文本内容,标签开始和结束之间的内容,没有参数表示将DOM数组中的所有内容连接起来形成一个字符串并返回,有参数表示给DOM数组的所有成员赋予新的文本

    (3) attr(),操作value,和文办以外的值,attr(“属性名”),获取DOM数组中第一个DOM对象的此属性值,attr(“属性名”,”属性值”),DOM数组中所有DOM成员的此属性赋值

    (4) remove(),语法:$(“选择器”).remove();删除选择的DOM对象和子对象

    (5) empty(),删除所选择的DOM对象的子对象

    (6) Append(),DOM对象的后面增加新的DOM对象

    (7) html(),获取DOMM对象数组中第一个DOM的文本值,返回结果相当于innertHTML,带参数之后表示给所有DOM对象设置新的文本

    (8) each(),可以循环数组,jsonDOM对象数组,第一种:$.each(要循环的内容 数组,jsonDOM数组)function(index循环变量的值,element数组成员){循环处理函数也就是每个成员所执行的函数}

     

    第二种:jQUery对象.each(function(index,element){处理程序})

     

    11、AJAX

    jQuery提供多个与AJax相关的方法代替直接使用异步对象

    第一种:$.ajax({json})

    Json格式的key定义好了,需要赋值:主要的key有:

    url:服务器地址,例如servlet地址

    type:请求方式(get post),默认get

    date:表示提交的请求参数,可以是json,String,数组  

     

    dateType:数据格式有html,xml,json,表示发起请求后希望服务器端返回的格式,将 返回的数据转换为指定对象,服务器端可以获取到dateType的值

    Success:函数function(形参,表示返回的数据){},服务器返回数据后,执行这个函 数。

    Erroe:函数function(){},表示请求出错是执行的函数

    Async:truefalse,表示异步或同步,默认异步 true

    第二种: $.get(url,请求参数,success函数,dateType),执行get方式的AJAX

     

    第三种:  $.post(url,请求参数,success函数,dateType),执行post方式的AJAX

  • 相关阅读:
    nginx启动时指定配置文件
    idea修改忽视文件产生得bug
    SpringBoot整合RabbitMQ出现org.springframework.amqp.AmqpException: No method found for class
    解决git速度太慢的问题,亲测有效
    HttpRequestException encountered解决方法
    mybatis大于等于小于等于的写法
    Could not initialize class sun.awt.X11GraphicsEnvironment异常处理
    CF377C Captains Mode
    AT1251 たのしいたのしい家庭菜園
    CF1057C Tanya and Colored Candies
  • 原文地址:https://www.cnblogs.com/fuxw4971/p/14289914.html
Copyright © 2011-2022 走看看