zoukankan      html  css  js  c++  java
  • 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方式,

  • 相关阅读:
    基于摸板匹配的目標跟蹤算法
    spoj 2713 Can you answer these queries IV
    zoj 3633 Alice's present
    hdu 3642 Get The Treasury
    poj 1195 Mobile phones
    poj 2760 End of Windless Days
    zoj 3540 Adding New Machine
    spoj 1716 Can you answer these queries III
    spoj 1043 Can you answer these queries I
    spoj 2916 Can you answer these queries V
  • 原文地址:https://www.cnblogs.com/1877chl/p/13341360.html
Copyright © 2011-2022 走看看