jQurey


阅读数: 次   

一:jQurey

1:dom对象

dom对象:(使用javascript的语法创建的对象叫做dom对象,也叫做js对象)

1
var obj = document.getElementById("");

jquery对象是一个数组,数组中就一个值

2.dom对象转jquery对象:

1
var jobj = $(obj)

3.jquery对象转dom对象

1
var obj = $("#id")[0]

4.使用jQuery条件

1
2
讲jQuery库引入
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

3.$()

1
2
3
4
5
6
7
$(document).ready()函数是当DOM 对象加载完毕后，马上执行的函数。
$(document).ready()
与$()、
jQuery()、
window.jQuery()是等价的，
所以$(document).ready()可以写成 
$(function() { alert(“Hello jQuery”) } );

二:选择器

2.1: 基本选择器

来定位dom对象的

1.==id选择器==

1
语法: $("#dom对象的id")

2.==class(样式)选择器==

class表示css中样式,使用样式名称定位dom对象

1
语法: $(".class 名称")

3.==标签选择器==

1
语法: $("标签名")

4.==class样式==

1
2
3
4
5
6
7
8
9
10
11
<span class= "two" value="样式">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .two{
            background : red
            width : 200px
            height : 100px
        }
    </style>
</head>

5.全部选择器

1
var obj = $("*")

6.混合选择器

1
var obj = $("#id,.class,标签名")

2.2 : 表单选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
语法: $(":type 属性值")
<input type="text">
<input type="password">
<input type="radio"> 
<input type="checkbox">
<input type="button"> 
<input type="file">
<input type="submit">
<input type="reset"> 
例如:
$(":text")选取所有的单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
$(":file")选取所有的上传按钮

2.3: 过滤器

过滤器不能单独使用， 必须和选择器一起使用。

2.3.1:first

1
$("选择器:first") : 第一个dom对象

2.3.2:last

1
$("选择器:last"): 数组中的最后一个dom对象

2.3.3: eq(数组下标),指定dom

1
$("选择器:eq(数组的下标)") ：获取指定下标的dom对象

2.3.4: lt(下表),小于

1
$("选择器:lt(下标)") ： 获取小于下标的所有dom对象

2.3.5: gt(小标),大于

1
$("选择器:gt(下标)") ： 获取大于下标的所有dom对象

2.3.6:表单属过滤器

1
2
3
启用状态， enabled , 
不可用状态  disabled
选择状态 ， checked ， 例如radio， checkbox

2.3.7: 表单对象属性过滤器

1.选择可用的文本框
1
$(“:text:enabled”)
2.选择不可用的文本框
1
$(“:text:disabled”)
3.复选框选中的元素
1
$(“:checkbox:checked”)
4.选择指定下拉列表的被选中元素
1
选择器>option:selected

2.4:函数

第一组:

1.val

(操作数组中 DOM 对象的 value 属性. )

1
2
3
$(选择器).val() ：无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值 

$(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值

2.text

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

1
2
3
4
$(选择器).text():无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回

$(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值

3.attr

对 val, text 之外的其他属性操作

1
2
3
4
5
$(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值

$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值 
可以转换图片:
	$("img").attr("src","图片资源路径")

第二组:

1.hide

1
$(选择器).hide() :将数组中所有 DOM 对象隐藏起来

2.show

1
$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来

3.remove

1
$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除

4.empty

1
$(选择器).empty()：将数组中所有 DOM 对象的子对象删除

5.append

为数组中所有 DOM 对象添加子对象 

1
$(选择器).append("<div>我动态添加的 div</div>")

6.html

设置或返回被选元素的内容（innerHTML）。

1
2
 $(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。 
$(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容。

==7.each==

each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
语法 1：$.each( 要遍历的对象, function(index,element) { 处理程序 } ) 
 
语法 2：jQuery 对象.each( function( index, element ) { 处理程序 }  ) index: 数组的下标
element: 数组的对象 

例子:
第一种语法:
$("#id").click(function(){
  var domArray = $(":text");//dom数组
  $.each(domArray,function(i,n){
      alert("i="+i+ ", n="+n.value);
  })  
 })
第二种语法:
$("#id").click(function(){
  $(":text").each(domArray,function(i,n){
      alert("i="+i+ ", n="+n.value);
  })  
 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1). 可以对 数组， json ，dom数组循环处理。 数组， json中的每个成员都会调用一次处理函数。
     var arr = [1, 2, 3] //数组
	  var json = {"name":"lisi","age":20 } 
     var obj = $(":text");

     语法： $.each( 循环的内容， 处理函数 ) ：表示使用jquery的each，循环数组，每个数组成员，都会执行后面的“处理函数”一次。

     $: 相当于是java的一个类名
	  each:就是类中的静态方法。
	  静态方法调用，可以使用 类名.方法名称 

		var arr = [1, 2, 3] //数组
	  处理函数:function(index, emelent) :
	     index, element都是自定义的形参， 名称自定义。
		  index：循环的索引(下标0,1,2)
		  element：数组中的成员(数组中对应位置的数据,1,2,3)

2.5:==事件绑定==

1.jquery对象绑定事件

1
2
3
4
5
6
7
8
语法：$(选择器).监听事件名称(处理函数);
说明：监听事件名称是 js 事件中去掉 on 后的内容， js 中的 onclick 的监听事件名称是 click

例如： 为页面中所有的 button 绑定 onclick,并关联处理函数 fun1 
	  $("button").click(fun1) 

	  为页面中所有的 tr 标签绑定 onmouseover，并关联处理函数 fun2
      $("tr").mouseover(fun2)

2.on() 绑定事件

on() 方法在被选元素上添加事件处理程序(可以给内存中新创建的对象绑定事件)

1
2
3
4
5
6
7
8
9
10
11
12
语法：$(选择器).on(event,data,function)
 $(选择器).on( 监听事件名称 , 事件的处理函数)

	  监听事件名称： 就是js事件中去掉on的部分， 例如js中onclick ,这里就是click
	  事件的处理函数： function 定义。

	  例如， <input type="button" id="btn">
	   $("#btn").on("click", function() { 处理按钮单击 } )
event：监听事件一个或者多个，多个之间空格分开
data：可选。规定传递到函数的额外数据，json 格式
function: 可选。规定当事件发生时运行的函数。

2.6:AJAX

2.6.1:==$.ajax()==

$.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。 

1
2
3
语法：
$.ajax( { name:value, name:value, ... } ) 
说明：=="参数是 json 的数据"==，包含请求方式，数据，回调方法等 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
>例如： $.ajax(  {名称:值， 名称1:值1..... } )

         例如： $.ajax(  { 
            async:true , 
		 contentType:"application/json" , 
		 data: {name:"lisi",age:20 },
		 dataType:"json",
		 error:function(){
                                	 请求出现错误时，执行的函数
		 },
		 success:function( data ) {
               // data 就是responseText, 是jquery处理后的数据。
			 },
			url:"bmiAjax",
			type:"get"
			}  
									 
		 )
	 json结构的参数说明：

  1)async:是一个boolean类型的值， 默认是true ，表示异步请求的。可以不写async这个配置项
        xmlHttp.open(get,url,true),第三个参数一样的意思。
  2)contentType: 一个字符串，表示从浏览器发送服务器的参数的类型。 可以不写。
                例如你想表示请求的参数是json格式的， 可以写application/json
  	  3)data: 可以是字符串，数组，json，表示请求的参数和参数值。 常用的是json格式的数据
  4)dataType: 表示期望从服务器端返回的数据格式，可选的有： xml ， html ，text ，json
      当我们使用$.ajax()发送请求时， 会把dataType的值发送给服务器， 那我们的servlet能够
		读取到dataType的值，就知道你的浏览器需要的是 json或者xml的数据，那么服务器就可以
		返回你需要的数据格式。
  5)error: 一个function ，表示当请求发生错误时，执行的函数。
    error:function() {   发生错误时执行  }  

          6)sucess:一个function , 请求成功了，从服务器端返回了数据，会执行success指定函数
             之前使用XMLHttpRequest对象， 当readyState==4 && status==200的时候。

  7)url:请求的地址
  8)type:请求方式，get或者post， 不用区分大小写。 默认是get方式。

 主要使用的是 url , data ,dataType, success .

2.6.2: $.get()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
语法：
$.get(url,data,function(data,status,xhr),dataType)

url 必需。规定您需要请求的 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
参数说明：
data - 包含来自请求的结果数据
status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"）
xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。默认地，jQuery 会智能判断。可能的 类型：
"xml" - 一个 XML 文档
"html" - HTML 作为纯文本
"text" - 纯文本字符串 
"json" - 以 JSON 运行响应，并以对象返回

2.6.3: $.post()

$.post() 方法使用 HTTP POST 请求从服务器加载数据

1
2
3
4
5
6
7
8
9
10
语法：
$.post(URL,data,function(data,status,xhr),dataType)
参数同$get() 

例子:
	var obj = $("#province>option:selected");
	var provinceId = obj.val();//1,2,3
	$.post("queryCity",{proid:provinceId},function(resp){ 
    	aler(resp);
    },"json")

三:==前端转json==

1
2
ObjectMapper om = new ObjectMapper();
om.writeValueAsString();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("#province").on("change",function(){
    var provID = $("#province>option:selected").val();
    if(provID ==0){
        alert("请重新选择");
    }else{
        $.post("queryCity",{provID:provID},callback,"json");
    }
    function callback(reslut){
        $("city").empty();
        $("city").append(
            "<option value='0'>请选择...</option>"
        );
        $.each(result,function(i,resp){
            $("city").append(
            "<option value='"+resp.id+"'>"+resp.name+"</option>"
            );
        })
    }
})
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家