jQuery学习笔记

jQuery

Jquery-Dom对象与Jquery包装集对象

• 用 dom 获取一个空对象 会返回一个 null ，若用jquery 获取一个空对象则还是会返回一个jquery对象，只不过里面为空

// id 选择器
$('#id')
// class 选择器
$('.class')
// dom 对象转换成 jquery 对象
var divdom = document.getElementByTagName("div");
var divDomtoJquery = $(divdom)
// jquery 转 dom
// 获取包装集对象中指定下标的元素，将jquery对象转换成dom对象
var divJqueryTodom = divJquery[0];
console.log(divJqueryTodom)

jquery 选择器

基础选择器

选择器	名称	举例
id选择器	#id	$(“#testDiv”) 选择id为testDiv的元素
元素名称选择	element	$(“div”)选择所有div元素
类选择器	.class	$(“.blue”)选择所有class=blue的元素
选择所有元素	*	$(“*”)选择页面所有元素
组合选择器	selector1,selector2,selector3	#(“#testDiv,span,.blue”)同时选择多个原则器匹配元素

层次选择器

选择器	名称	举例
后代选择器	ancestor descendant	$(“#parent div”)选择di为parent的元素的所有div元素
子代选择器	parent > child	$(“#parent>div”)选择id为parent的直接div子元素
相邻选择器	prev + next	$(“.blue + img”)选择class类为blue的下一个img元素（只会找下一个，下一个没有就返回空）
同辈选择器	prev - sibling	$(“.blue - img”)选择class类为blue之后的img元素。（从下往下一直往找）

表单选择器

Forms	名称	举例
表单选择器	:input	查找所有的input元素：$(“:input”); 注意：会匹配所有input、textarea、select和button元素
文本框选择器	:text	查找所有文本框：$(“:text”)
密码框选择器	:password	查找所有密码框：$(“:password”)
单选按钮选择器	:radio	查找所有单选按钮：$(“:radio”)
复选框选择器	:checkbox	查找所有复选框：$(“:checkbox”)
提交按钮选择器	:submit	查找所有提交按钮：$(“:submit”)
图像域选择器	:image	查找所有图像域：$(“:image”)
重置按钮选择器	:reset	查找所有重置按钮：$(“:reset”)
按钮选择器	:button	查找所有按钮：$(“:button”)
文本域选择器	:file	查找所有文本域：$(“:file”)

jquery Dom 操作

操作元素的属性

获取元素

方法	说明	举例
attr(属性名称)	获取指定的属性值，操作 checkbox 时， 选中返回 checked ，没有选中返回 undefined	attr(‘checked’) attr(‘name’)
prop(属性名称)	获取具有 true 和 false 两个属性的属性值	prop(‘checked’)

区别：

1. 如果是固有属性，attr()和prop()方法均可获取

2. 如果是自定义属性，attr()可以获取，prop()不可获取

3. 如果返回值是 boolean 类型的属性

   ​ 若设置了属性，attr()返回具体的值，prop()返回true

   ​ 若未设置属性，attr()返回 undefined ,prop() 返回false

<input type="checkbox" name="ch" checked="checked" id="aa"/>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<script>
	var name = $("#aa").attr("name");
    console.log(name); // 打印 ch
    var name2 = $("#aa").attr("name");
    console.log(name2);// 打印  ch
</script>

设置属性

• attr("属性名","属性值")
• prop("属性名","属性值")

// 固有属性
$("#aa").attr("value","1")
$("#bb").attr("value","2")

// 返回值是Boolean的属性
$("#bb").attr("checked","checked");
$("#bb").prop("checked",false)

// 自定义属性
$("#bb").attr("uname","admin");
// prop 不可操作自定义属性

移除属性

• removeAttr("属性名")

$("#aa").removeAttr("checked")

总结：

• 如果属性的类型是 Boolean，则使用 prop() 方法，否则使用 attr() 方法

操作元素的样式

方法	说明
attr(“class”)	获取class属性的值，即样式名称
attr(“class”,“样式名”)	修改class属性的值
addClass(“样式名”)	添加样式名称
css()	添加具体样式
removeClass(Class)	移除样式名称

// 获取元素样式名
var cls = $("#conBlue").attr("class");
console.log(cls)

// 设置元素样式,原来的样式会被覆盖
$("#conBlue").attr("class","green")

// 添加样式
$("#conBlue").addClass("larger")
$("#conBlue").addClass("pink")

// 添加具体样式
$("#conBlue").css({
    "font-size","40px",
    "font-family":"楷体"
});

// 移除样式
$("#remove").removeClass("larger")

操作元素内容

方法	说明
html()	获取元素的html内容
html(“内容”)	设定元素的html内容
text()	获取元素的文本内容，不包含html
text(“内容”)	设置元素的文本内容，不包含html
val()	获取表单元素value值
val(“值”)	设定表单元素的value值

• 表单元素
  • 文本框
  • 密码框password
  • 单选框radio
  • 复选框checkbox
  • 隐藏域hidden
  • 文本域textarea
  • 下拉框select
• 非表单元素
  • div
  • span
  • h1~h6
  • table
  • tr
  • td
  • li
  • p

// html
$("#html").html("<h2>上海</h2>");
$("#html").html("上海");
var html = $("#html").html()
var html2 = $("#html2").html()
console.log(html)
console.log(html2)

// text
var txt = $("#text").text()
var txt2 = $("#text2").text()
console.log(txt)
console.log(txt2)

创建元素

$('元素内容')
$('<p>this is a paragraph!!!</p>')

添加元素

方法	说明
prepend(content)	在被选元素内部的开头插入元素或内容，被追加的content参数，可以是字符、html 元素标记
$(content).prependTo(selector)	把 content 元素或内容加入 selector 元素开头
append(content)	在被选元素内部的结尾插入元素或内容，被追加的content参数，可以是字符、html元素标记。
$(content).appendTo(selector)	把 content元素或内容插入 selector 元素内，默认是在尾部
before()	把元素前插入指定的元素或内容：$(selector).before(content)
after()	在元素后插入指定元素或内容：$(selector).after(content)

删除元素

方法	说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容一起删
empty()	清空所选元素的内容

遍历元素

each

$(selector).each(function(index,element))

$(selector).each(function(index,element)): 遍历元素
参数 function 为遍历时的回调函数
index 为遍历元素的序列号， 从0 开始
element 是当前的元素，此时是 dom 元素

Jquery 事件

ready 加载事件

• ready() 类似于js 中的 load() 事件

• ready() 可以写多个，按顺序执行

• $(document).ready(function(){}) 等价于 $(function(){})

bind()绑定事件

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

$(selector).bind(eventType [,eventData], handler(eventobject));

• eventType: 是一个字符串类型的事件类型，就是你所需要绑定的事件

  • 这类型可以包括如下：

    blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick
    mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
    

• [,eventData]：传递的参数，格式：{名:值, 名2:值2}

• handler(eventObject)：该事件触发执行的函数

• 绑定单个事件

  • bind 绑定

    $("元素").bind("事件类型",function(){
        
    })
    

  • 直接绑定

    $("元素").事件名(function(){
        
    })
    

• 绑定多个事件

  • bind 绑定

    // 1. 同时为多个事件绑定同一个函数
    指定元素.bind("事件类型1 事件类型1 ..",function(){
        
    });
    // 2.为元素绑定多个事件，并设置对应的函数
    指定元素.bind("事件类型",function(){
        
    }).bind("事件类型",function(){
        
    });
    // 3.为元素绑定多个事件，并设置对应的函数
    指定元素.bind({
        "事件类型":function(){
            
        },
        "事件类型":function(){
            
        }
    })
    

  • 直接绑定

    指定元素.事件名(function(){
        
    }).事件名(function(){
        
    });
    

Jquery Ajax

异步无刷新技术

$.ajax

• jquery调用ajax方法：
  • 格式：$.ajax({});
  • 参数：
    • type：请求方式GET/POST
    • url：请求地址url
    • async：是否异步，默认true表示异步
    • data：发送到服务器的数据
    • dataType：预期服务器返回的数据类型
    • contentType：设置请求头
    • success：请求成功时调用次函数
    • error：请求失败时调用此函数

​

get 请求

$.ajax({
    type:"get",
    url:"js/cuisine_area.json",
    async:true
})

$.get

语法：

$.get("请求地址","请求参数",function(形参){
    
});

$.post

语法：

$.post("请求地址","请求参数",function(形参){
    
});

$.get

语法：

$.getJSON("请求地址","请求参数",function(形参){
    
});
// 注：要求返回的格式必须为 json 格式