jQuery学习理解(详细)

一.简介

JavaScript的一个库
为了简化JavaScript对dom的操作

二.使用

1.要指定jQuery库文件的位置，使用相对路径

<script type="text/javascript" src="jQuery/jquery-3.4.1.js"></script>

2.入口函数简写方式

相当于js中的onLoad()函数
当页面中的dom对象加载成功后，自动执行的函数

  $(function (){})

3.dom对象和jquery对象

dom对象：使用js语法创建的对象
jquery对象：使用jquery语法创建的对象，他是一个数组

dom对象转化为jquery对象：$(dom对象)
例：

var domobj = document.getElementById("btn");
      alert(domobj.value);

//将dom对象转化为jQuery对象
      var jobj = $(domobj);
      alert(jobj.val());

jquery对象转化为dom对象：将数组中的对象拿出即可

//jquery对象转为dom对象
      var obj = $("#one")[0];
      //或者 var obj = $("#one").get(0);

      var num = obj.value;

4.基本选择器

根据ID，class属性，标签类型定位HTML元素，转为jquery对象
即定位dom对象，然后就可以通过jquery的函数操作dom对象

（1）ID选择器

：$("#id")

定义一个ID为one的div

<div id="one" style="width: 100px;height: 100px">我是id为one的div标签</div><br>

使用id选择器修改其颜色

 function fun1(){
            var obj = $("#one");
            obj.css("background","red")
        }

（2）class选择器

：$(".class名称")
定义一个样式为two的div

<div class="two" style="width: 100px;height: 100px">我是样式为two的div标签</div><br>

使用样式选择器修改其颜色

        function fun1(){
            var obj = $(".two");
            obj.css("background","red")     

（3）标签选择器

：$("标签名称")
定义一个没有ID和样式的div标签

<div style="height: 100px;width: 100px">我是没有id和样式的div标签</div><br>

使用标签选择器修改其颜色

function fun1(){
            var obj = $("div");
            obj.css("background","red")
        }

5.表单选择器

使用input标签的type属性值，定位dom对象

$(":type属性值")
$(":text")
$(":checkbox")
$(":button")
$(":radio")

如果页面中同一属性值有多个，则所有对象会成为一个数组，通过下标来获取某个dom对象。

6.基本过滤器

定位了多个dom对象后，根据一些条件筛选dom对象
注：这种方式获取得到的对象依然是jquery对象，可以调用jquery库中的方法

（1）$("选择器:first") 数组中的第一个dom对象
（2）$("选择器:last") 数组中的最后一个dom对象
（3）$("选择器:eq(数组下标)") 指定下标的dom对象
（4）$("选择器:lt(数组下标)") 获取小于该下标的所有dom对象
（5）$("选择器:gt(数组下标)")获取大于该下标的所有dom对象

7.表单属性过滤器

根据dom对象的状态来选定对象
启用状态：enabled
不可用状态：disabled
选择状态：checked

$(":text:enabled")
$(":text:disabled")
$(":checkbox:checked")
$("select>option:selected")

8.函数

（1）val()

操作对象的value属性

（2）text()

操作数组中所有 DOM 对象的【文字显示内容属性】

（3）attr()

（4）remove()

删除父和子对象
empty（） 删除子对象
例如：
定义一个select

<select>
  <option value="一号">一号</option>
  <option value="二号">二号</option>
  <option value="三号">三号</option>
</select>

使用remove()删除后：

使用empty()删除后：

（5）append()

添加dom对象

$("#btn3").click(function (){
              $("#one").append("<input type='button' value='我是新增的按钮'>")
          })

（6）html()和html(参数)

html() 获取数组中第一个dom对象的文本值，并且保留html标签
html(参数) 设置dom对象的文本值，在文本值中写入html标签时会生效

与text()的区别：
如果文本中有html标签时，使用html()会保留标签输出，而text()会将标签忽略。

（7）each()函数

可用于遍历数组，json和dom对象,对每个元素调用一次function函数

$.each(要遍历的对象,function(index,element){})
//index是数组下标，element是数组对象

例：
定义一个json并且使用each()遍历：

var json = {"name":"张三","age":"18"};
 $.each(json,function (index,element){
                  alert("key="+index+",value="+element);
              })

结果为：

9.jquery中给dom对象绑定事件

（1）$(选择器).事件名称(函数)

一定要在$(function(){})中绑定事件

 $("#btn1").click(function (){
            })

（2）$(选择器).on(事件名称,事件处理函数)

$("#btn4").on("click",function (){})

10.使用jquery函数实现ajax的请求

（1）$.ajax(参数)

最核心的函数
参数说明：
async：boolean类型的值，默认为true，表示异步请求。
contentType:一个字符串，表示从浏览器发送到服务器的参数类型
data：可以是字符串，数组，json。表示请求的参数和参数值,使用json最多
dataType：表示期望服务端返回的数据格式。可选的有：xml，html，text， json
error：一个function，表示请求发生错误时所执行的函数
success：一个function，请求成功了，从服务端返回了数据，执行该函数
url：请求地址
type：请求方式，get/post，默认为get

$.ajax({
      async:true,
      contentType:"application/json",
      data:{"name":"林二","age":20},
      dataType:"json",
      error:function (){
        //请求发生错误时执行的函数}
      },
      success:function (data){
        //这个data就是responseText
      },
      url:"one",
      type:"get"
    })
//其中主要使用的是: url,data,datatype,success

（2）$.get()

表示使用get方式实现ajax请求

$.get(url,data,function(resp),datatype)
//参数说明同上

（3）$.post()

表示使用post方式实现ajax请求

$.post(url,data,function(resp),datatype)