• jQuery


    1.JQuery封装了Javascript相关方法的调用,简化js对HTML DOM的操作,是一个js库
    2.优点:代码少,容量小,兼容主流浏览器,免费,开源的js库
    3.运行平台:记事本,idea,HBuilderx,vs等等
    4.引入当前项目下的JQuery相对路径:<scripttype="text/javascript" src="jquery3.5.1.js"></script>
    5.代码演示:<script type="text/javascript">
            $(document).ready(function(){
                alert("hello,JQuery");
            })
        </script>
    $(document):$号是JQuery中的函数名称,表示将js中的document对象转换成JQuery中可使用的对象
    ready:是JQuery中的函数,是准备的意思,当js中的DOM对象加载成功后执行ready函数中的内容,相当于js中的onload事件
    function():自定义的表示要执行的操作
    5.$(document).ready()与$(),window.jquery(),jquery()等价,后边是简写;

    6.DOM对象和jQuery对象:
    使用js语法创建的对象是dom对象,也叫js对象
    使用jQuery语法创建的对象是jQuery对象,注意:jQuery表示的对象都是数组
    例如;var jobj=$("#text1");

    7.dom对象和jQuery对象可以相互转换:
    DOM对象转为jQuery对象  语法:$(dom对象)
    jQuery对象转为DOM对象  语法:从数组中获取第一个对象,这个对象就是DOM对象,使用[0]或get[0]
    为什么要转换?可以使用对象的方法和属性,不同对象有不同的方法和属性

    8.我们习惯在jQuery对象名前加上$,以区分js对象

    9.jQuery选择器:
    1.ID选择器;   语法:$("#id")
    2.class选择器  语法:$(".class样式名")
    3.标签选择器   语法:$("标签名")
    4.通配符选择器  语法:$("*")
    5.组合选择器    语法:$("#id,.class")-->很灵活
    6.表单选择器    语法:$(":type属性值")  它通过type属性的属性值来找元素

    10.过滤器:在获取到dom对象集合后,根据一些条件来筛选DOM对象,必须和选择器一起使用,语法如下;
    1)$("选择器:first") :获取第一个DOM对象--》结果任然是一个jQuery对象
    2)$("选择器:last") :获取最后一个对象
    3)$("选择器:eq(数组下标)") :获取指定下标的对象(equal)
    4)$("选择器:lt(下标)") :获取小于下标的所有对象(less than)
    5)$("选择器:gt(下标)") :获取大于下标的所有对象(greate than)

    11.表单对象属性过滤器:根据表单对象的状态来过滤,如文本有enabled disabled状态,复选框有 checked 状态  下拉列表有 selected 状态
    语法:$("表单选择器:状态")  例如:var obj=$(":text:enabled");var obj2=$(":checkbox:checked");var obj3=$("select>option:selected");

    12.如果jobj1是一个jQuery对象数组,那么jobj1[i]就是DOM对象;jquery对象获取值:val() DOM对象获取值:value

    13.绑定事件:语法
    $("选择器").click(function(){......})

    14.on() 绑定事件
    语法:$("选择器").on("要绑定的事件",function(){....})  注意:这里的绑定事件名省去on;区别于js;

    15.jQuery中的常用函数:
    val  语法:$("选择器").val()  表示获取jQuery数组中的第一个DOM对象的value值
               $("选择器").val("赋值")  表示给jQuery中的所有DOM对象的value赋值
    text  语法:$("选择器").text() 获取所有的value
                $("选择器").text("") 给所有的value赋值
    attr   语法:$("选择器").attr("属性","值"); 给其他的属性设置值

    remove  $("选择器").remove()  将数组中所有的DOM对象及其子对象删除
    empty  $("选择器").empty(); 将数组中所有的DOM对象的子对象删除
    append $("选择器").append("<div>我动态添加的div</div>") 为数组中所有的DOM对象添加自对象
    html   $("选择器").html()  获取DOM数组中第一个对象的内容
           $("选择器").html(...) 设置DOM数组中所有元素的内容

    16.each语法:可以对数组,json,DOM数组循环处理,每个成员都会调用一次自定义函数;
    语法:$.each(循环的内容,处理函数) :表示使用jQuery中的每个成员都调用一次处理函数,可以理解为$是类名,each是其中的静态方法
    处理函树: function(index,element)
    语法格式二:jQuery对象.each(function(index,element){.....}) 这种方法就只能遍历jQuery对象了;

    17.使用jQuery的函数来实现ajax请求的处理,没有jQuery之前,是哦用XMLRequest做ajax,有4个步骤,jQuery简化了ajax请求的处理,使用三个函数可以实现ajax请求的处理。

        1>$.ajax():jQuery中实现ajax的核心函数
        2>$.post():使用post方式做ajax请求
        3.$.get():使用post方式做ajax请求

        $.post()和$.get(),他们在内部都是调用$.ajax()

    18.介绍$.ajax()的作用,函数的参数表示请求的URL,请求的方式,参数值等信息。$.ajax()参数是一个json的结构
        1.例如:$.ajax({名称:值,名称:值.....})
            $.ajax({asyno:true,
                contentType:"application/json",
                data:{name:"lisi",age:23,
                dateType:"json",
                error:function(){发生错误时执行},
                success:function(data){//data表示responseText,是jQuery处理后的数据},
                url:"/one",
                type:"get"
    }})
        2.json 结构的参数说明:
            1.async是一个Boolean类型的值,默认是TRUE,表示异步请求,可以不写;
            2.contentType;一个字符串,表示从浏览器发送服务端的参数类型,可以不写;
            3.data:可以是字符串,数组,json,表示请求的参数和参数值,常用的是json格式的数据
            4.dataType:表示【期望】从服务器端返回的数据格式,可选的有:xml,html,text,json,当我们使用$.ajax()发送请求时,会把dataType的值发送给服务端,那我们的Servlet能够读取到dataType的值,就知道你的浏览器需要的是什么类型的数据,name服务端就可以返回你需要的数据格式
            5.error:一个function,表示当请求发送错误时执行的函数。定义方式:error.function(){发生错误时执行}
            6.success:一个function,请求成功了,从服务端返回了数据,会执行success指定函数,之前使用的XMLRequest对象,当readyState==4&&status==200的时候,
            7.url:请求地址
            8.type;请求方式,get或者post,不区分大小写,默认是get方式,

  • 相关阅读:
    7-30-组队赛
    POJ 3125 Printer Queue
    7-28-比赛
    POJ 3922 A simple stone game
    POJ 1845
    第一次组队训练
    I-number
    Radar Installation
    Robots on a grid(DP+bfs())
    Dividing a Chocolate(zoj 2705)
  • 原文地址:https://www.cnblogs.com/1877chl/p/13341360.html
Copyright © 2020-2023  润新知