Jquery

DOM对象和Jquery对象的区别及转换

  • 通过JS代码获取的对象都是DOM对象，而通过JQuery获取的对象是Jquery包装集对象，简称Jquery对象, 只有Jquery对象才能获取Jquery提供的方法。

    //dom对象
var domDiv = document.getElementById("mydiv");
//Jquery对象
var jqueryDiv = $("#mydiv")

  • 在Jquery对象中，无论是一个还是一组，都封装成一个Jquery包装集

    当获取不存在的dom对象的时候，会返回null
当获取不存在的jquery对象的时候，会返回一个jquery包装集对象，w.fn.init[div#mydiv]

  • dom对象和jquery对象之间的转换

    //dom对象转换为jquery对象
var newJqueryDiv = $(mydiv)
console.log(newJqueryDiv)

//Jquery对象转换为dom对象
//通过下标获取,或者叫遍历jquery包装集数组，包装集就像数组
var newDomDiv = newJqueryDiv[0]
console.log(newDomDiv)
//遍历Jquery对象数组得到的对象是Dom对象，可以通过$()转换为Jquery对象

Jquery选择器

  • 基础选择器
    • id选择器
      $(“#testDiv”)，选择id为testDiv的元素，如果有多个同名ID，则以第一个为准
    • 元素名称选择器
      $(“div”)，选择所有div元素
    • 类选择器
      $(“.blue”)，选择所有class=bule的元素
    • 选择所有元素
      $(“*”)，选择页面所有元素
    • 组合选择器
      $(“#testDiv，span，.blue”)，同时选中多个选择器匹配的元素
  • 层次选择器
    • 后代选择器
      $(“#parent div”)，选择id为parent元素的所有div元素
    • 子代选择器
      $(“#parent >div”)，选择id为parent的直接div子元素，第一代
    • 相邻选择器
      $(“.blue+img”)，选择class=blue元素的下一个img元素，只找一个。
      如果下一个元素不是img元素，则找不到。必须要相邻紧挨着的。
    • 同辈选择器
      $(“.blue~img”)，选择class=blue元素的之后的所有同辈元素
  • 表单选择器
    表单选择器		:input	查找所有的input元素,$(":input"),与标签选择器有区别
注意：会匹配所有的input,textarea,select,button元素

文本框选择器		:text	查找所有文本框，$(":text")

密码框选择器		:password	查找所有密码框$(":password")

单选按钮选择器		:radio	查找所有单选按钮$(":radio")
...

Jquery Dom操作

Dom操作即是对HTML节点元素的操作，对标签的操作

  • 操作元素的属性

    • 属性的分类
      固有属性：元素本身就有的属性
      返回值是boolean的属性，checked，selected，disabled
      自定义属性：用户自己定义的属性

    • 获取属性

      attr("属性名称")	获取指定的属性值，操作checkbox时，attr("checked")
				选中返回checked,没有选中返回undefined

prop("属性名称")	获取具有true和false两个属性的属性值	prop("checked")

对于固有属性来说，这两个方法都能获取到属性对应的属性值
对于返回值是boolean的属性来说:
	元素中存在对应的属性，attr方法返回的是属性值,prop方法返回true
	元素中不存在对应的属性，attr方法返回的是undefined，prop返回的是false
对于自定义属性，attr方法可以获取对应的属性值，prop方法不可以

    • 设置属性

      设置属性和获取属性差不多，方法的第二个参数是要设置的属性值
如果设置的属性是固有属性：
	attr("属性名"，"属性值")
	prop("属性名","属性值")
如果设置的属性是返回值为boolean类型的
	attr("checked","checked")
	prop("属性名",true)	//选中
如果设置的属性是自定义属性，只能使用attr方法

    • 移除属性
      使用方法removeAttr(“属性名”)

      总结：如果属性的类型是boolean，则使用prop方法，其他都用attr方法。

  • 操作元素的样式

    元素的样式也是一种属性，因为样式特别多，所以除了当做属性处理外，
    还有专门的方法进行处理

    1.attr("class")		
	获取class属性的值，即样式名称
2.attr("class","样式名")
	修改class属性的值，修改样式，原本的样式会被覆盖
3.addClass("样式名")
	添加样式,在原来的基础上添加样式，原本的样式会保留
	如果出现相同样式，则以样式中，后定义的为准。
举例：
<style type="text/css" >
	.bbb{color: brown; font-size: 30px;}
	.aaa{color: blue; font-size: 20px;}
</style>

<body>
	<span class="aaa">what fuck</span>
	<script type="text/javascript">
		let class1 = $("span").addClass("bbb");
		//最终显示蓝色，因为覆盖了之前的样式
		console.log(class1.attr("class"))	
	</script>
</body>
    
4.css()						
	添加具体的样式(添加行内样式),其格式为：
	设置多个样式：css({"backgrand-color":"red","color":"#fff"});
	设置单个样式：css("color":"white")
	
5.removeClass(class)			移除样式名称
​```
  • 操作元素的内容

    对于元素还可以操作其中的内容，就像Dom对象的innerText，innerHTML方法一样

    1，html()
	获取元素的html内容
2，html("内容")
	设置元素的html内容，html("<h1>上海<h1>")
3，text()
	获取元素的文本内容，不包含html
4，text("text内容")
	设置元素的文本内容，不包含html	
5，val()
	获取元素的value值
6，val("值")
	设定元素的value值

表单元素：
	文本框text,密码框password，单选框radio，复选框checkbox，
	隐藏域hidden，文本域textarea，下拉框select
非表单元素
	div，span，h1-h6，table，tr，td，li，p
  • 创建，添加，删除，遍历元素

    • 创建元素

      $("元素内容")
例如
$("<p>jquery</p>")

    • 添加元素

       <select id="sel"></select>

1，prepend(content)	
	在被选元素内部的开头插入元素或内容，被追加的content参数
	可以是字符，HTML元素标记
	//从头开始插入元素
    let option = $("<option>上海</option>");
    let option2 = $("<option>北京</option>");
    $("#sel").prepend(option)
    $("#sel").prepend(option2)
    结果是北京->上海
    
2，$(content).prependTo(selector)
	把content元素或内容加入selector元素开头
	//和上面一样，只不过形式不同罢了
    $("<option>上海</option>").prependTo($("#sel"))
 	$("<option>台湾</option>").prependTo($("#sel"))

3，append(content)
	在被选元素内部的结尾插入元素或内容，被追加的content参数
	可以是字符，HTML元素标记
	//从尾部插入元素
	$("#sel").append(option)
	$("#sel").append(option2)
	结果是上海->北京

4，$(content).appendTo(selector)
	把content元素或内容插入selector元素内部，默认是结尾
	//和上面一样，就不贴代码了
5，before()
	在元素前插入指定的元素或内容：$(selector).before(content)
	//在选中元素前插入content元素，不是在内部
6，after()
	在元素后插入指定的元素或内容：$(selector).after(content)

    • 删除元素

      remove()	删除所选元素及其对应的子元素，包括整个标签和内容一起删
empty()		清空所选元素的内容，保留标签和样式

    • 遍历元素

      each()
	$(selector).each(function(index,element){
			//遍历体
	})
	参数function为遍历时的回调函数，index为遍历元素的序列号，从0开始，即下标
	element是当前元素，此时是dom元素
	
	function(index,element){}，可以使用lambda表达式
	$(selector).each((index,element)=>{})
举例：
	<body>
        <span>王科一</span><br>
        <span>王科一</span><br>
        <span>王科一</span><br>
        <span>王科一</span>
        <script type="text/javascript">
           $("span").each(function (index, element) {
               //this关键字和element表示的都是数组中的元素，都是dom元素
               //要想使用jquery方法，就要转为jquery对象，$(this)即可
               var lsp = $(this).html("王科"+(index+1))
               console.log(lsp.html())
           })
        </script>
    </body>

jquery操作下拉框select

Jquery事件

  • ready加载事件
    ready()	预加载事件，当页面的dom结构加载完毕执行，JS中类似于load事件
ready()	可以写多个，按顺序执行
$(document).ready(function(){ })
等价于
$(function(){ })
  • bind()绑定事件

    为被选中的元素添加一个或多个事件处理程序，并规定事件发生时运行的函数
    就是为元素绑定事件

    $(selector).bind(eventType[,eventData],handler(eventObject));
eventType:是一个字符串类型的事件类型，就是你需要绑定的事件，比如click，focus,keydown
[,eventData]:传递的参数，格式：{名:值，名:值}
handler(eventObject):该事件触发执行的函数

//绑定单个事件
//bind绑定
$("元素").bind("事件类型"，function(){

})
//直接绑定
$("元素").事件名(function(){

})
	
//绑定多个事件
//bind绑定
	//1,同时为多个事件绑定同一个函数
	指定元素.bind("事件类型1 事件类型2 事件类型3,,,",function(){
	
	})
	//2,为元素绑定多个事件，并设置对应的函数
	指定元素.bind("事件类型1",function(){
	
	}).bind("事件类型2",function(){
	
	}).bind("事件类型3",function(){
	
	})...
	//3,为元素绑定多个事件，并设置对应的函数
	指定元素.bind({
		"事件类型1":function(){
		
		},
		"事件类型2":function(){
		
		},
		"事件类型3":function(){
		
		}
	});
//直接绑定
	指定元素.事件名(function(){
	
	}).事件名(function(){
	
	}).事件名(function(){
	
	});
	<input type="text" value="请输入用户名" id="username"><br>
    <button>点一下</button>
	$("button").click(function () {
    	$("#username").val("请输入密码")
    }).dblclick(function () {
    	alert("kao")
    })

//直接绑定最常用

Jquery Ajax

  • $.ajax

    jquery调用ajax方法：
	格式：$.ajax({
            type:请求方式"GET/POST"
            url:请求地址
            async:是否异步，默认是true表示异步
            data:发送到服务器的数据,如果没有参数，则不需要设置
           		data:{
           			username: "张三"
           			password: "123456"
           		}
           	dataType:预期服务器返回的数据类型
           		dataType:"json"
           		//如果是json格式，在接收到返回值时会自动封装成json对象
           		//就不需要使用JSON.parse()方法转换字符串了
            contentType:设置请求头
            success:请求成功时，调用此函数
            	success:function(data){
            		//这里的data是形参，代表的是返回的数据
            	}
            error:请求失败时调用此函数
    });

  • $.get

    这是一个简单的get请求功能以取代复杂的$.ajax。
请求成功时可调用回调函数，如果需要在出错时执行函数，请使用$.ajax
//1,请求json文件，忽略返回值
	$.get("url");
//2,请求json文件，传递参数，忽略返回值
	$.get("url",{username:"tom",password:123456})
//3,请求json文件，拿到返回值，请求成功拿到返回值
	$.get("url",function(data){
		console.log(data)
	});
//4,请求json文件，传递参数，拿到返回值
	$.get("url",{username:"tom",password:123456},function(){
		console.log(data)
	})

  • $.post
    和$.get写法没有任何区别，只是请求方式的不同

  • $.getJSON
    这种ajax请求要求返回的数据格式是json格式(json字符串)
    如果返回的数据不是json格式，则无法获取