jQuery 笔记

最新推荐文章于 2023-11-30 18:51:13 发布

普通还不自信的程序员

最新推荐文章于 2023-11-30 18:51:13 发布

阅读量137

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_41841482/article/details/107699710

版权

笔记专栏收录该内容

68 篇文章 0 订阅

订阅专栏

一、jQuery介绍

1.1 概述

jQuery是一个快速、简洁的JavaScript代码库
提供一种简便的JavaScript操作方式
优化HTML文档操作、事件处理、动画设计和AJAX交互

1.2 安装

直接引用jQuery

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
</head>

1.3 基本使用

$(匿名函数)

表示页面DOM加载完毕，则执行，比onload事件执行早
可以写多个，$是jQuery函数的简写

$(selector).action()

选取HTML元素，并对选取的元素执行操作
selector（选择符）表示查找HTML元素
action() 执行对元素的操作

window.onload 只会执行一次，配置多个只执行最后一个
$(function(){})可以多次执行，比window.onload先执行

$(function(){ // 简写document.ready
	alert("read1")
})

$(document).ready(function(){ // 完整
	
})

把绑定事件和页面初始化的代码，写到document.ready

1.4 DOM元素与jQuery元素

document.getElementbyId("c") 	DOM元素，如果元素不存在，则为null

$("#c")		jQuery元素，如果元素不存在则为长度为0的数组

操作方法不同

hide()方法
	jq元素有，DOM元素不能用
.value属性
	DOM元素有，jq不能用

带括号的方法都是jq元素，DOM元素一般都是 .属性

二、选择器

2.1 基本选择器

${“选择器”}选出的结果封装到一个数组中。如果元素不存在，则是长度为0的数组

标签选择器	使用标签名
类选择器class	用.
id选择器	用#	如果id出现冲突，操作第一个元素

<input type="button" value="按钮" id="d">
<div style="width: 100px;height: 100px;background-color: red" class="b" myattr="a.1">1</div>
<div style="width: 100px;height: 100px;background-color: green" class="b" id="c">2</div>

function test(){
    $("div").hide() //标签选择器
    $(".b").hide() //类选择器
    $("#c").hide() //id选择器
}

判断元素是否存在

【错误写法】$("选择器")==null
【正确写法】$("选择器").length>0

2.2 兄弟结点选择器

选择器	描述
pre+next	近邻怕热后面的兄弟next元素
pre-next	pre后面的所有兄弟next元素

2.3 层级选择器

选择器	描述
parent child	表示parent里所有的child后代
parent>child	（效率高）parent直接子child元素

2.4 属性选择器

选择器	描述
$("[属性名]")	包含这个属性的元素
$("[属性名=属性值]")	多数时候，属性值不需要引号，当属性值有特殊符号时需要引号 $("[name=‘user.name’]")

[属性a][属性b] 必须同时拥有属性a和属性b

$("input[name=user]")	name=user的input标签
$("input[type=checkbox][value=a]")	<input type="checkbox" value="a">

2.5 伪类选择器

不单独使用，和别的选择器一起，起过滤作用

选择器	描述	选择器	描述
:eq(num)	第num个元素，索引从0开始 $(“div:eq(2)”) 第3个div
:odd	索引为奇数的元素	:even	索引为偶数的元素
:gt(num)	索引大于num的元素	:lt(num)	索引小于num的元素
:check	复选或单选框，备选充电元素

2.6 过滤器

选择器	描述
is(“选择器”)	判断某个元素是否符合选择器规则

2.7 查找功能

选择器	描述
parent()	获取父元素
parent(“选择器”)	符合选择器的祖先元素
prev()	前面近邻的兄弟元素
find(“选择器”)	在后代中进行筛选

2.8 经验

多用id选择器
如果不存在id，可在父类元素中加id，通过子选择器选择，缩短查找路径。
少直接使用class，使用标签.class
避免表达式冗余，div#a可直接简化成#a
多用父子选择器(parent>child)，少用后代(parent child)
如果元素不改变的haul，尽量缓存元素

for(var i=0;i<100;i++){
	$("#d").xxxx
}
// 优化
var d = $("#d")
for(var i=0;i<100;i++){
	$("#d").xxxx
}

2.9 DOM元素和JQ元素转换

DOM->jq元素	$(DOM元素)
JQ->DOM元素	jq元素[0]	$("input")[0]

2.10 事件

$(“选择器”).事件名称(function(){})

// 绑定点击事件
$("#d").click(function(){
})

// 触发事件
$("#d").click()

click	鼠标点击
dbclick	鼠标双击
submit	表单提交事件
mouseenter	鼠标进入
mouseleave	鼠标离开
focus	获得焦点
blur	失去焦点
hover	鼠标进来、鼠标离开

$(function(){
    $("#d").click(function(){
        $("#c").toggle()
    })
})

三、效果

3.1 动画

	显示	隐藏	方式
显示/隐藏	show()	hide()	通过改变宽高
	show(1000)	hide(1000)	一秒之内显示出来/消失
滑动	sliderDown()	slideUp()	改变高度，可以加时间参数
淡入淡出	fadeIn()	fadeOut()	改变透明度。可以加时间参数
toggle()			自动切换 show / hide
fadeToggle()			自动切换 fadeIn() / fadeOut()
fadeTo			自动淡化到opacity(透明度)
slideToggle			自动切换 sliderDown() / slideUp()
animate函数

3.2 元素操作

3.2.1 添加元素

before()
<div>
prepend()
内容
append()
</div>
after()

操作	等价于	描述
a.before(b)	b.insertBefore(a)	把b追加到a的前面
a.after(b)	b.insertAfter(a)	把b追加到a的后面
a.prepend(b)	b.prependTo(a)	把b追加到a的内容之前
a.append(b)	b.appendTo(a)	把b追加到a的内容之后

3.2.2 删除元素

remove() 删除元素

$("#d").remove() //id=d的元素被删除

empty() 清空元素的子元素

$("#d").empty() // 删除d的所有子元素

3.3 常见方法

方法	作用	方法	作用
val()	用于获取表单元素的值	val(“值”)	设置表单元素的值
html()	获取元素内部html代码	html(“值”)	设置元素内部html
text()	获取元素内部纯文本	text(“值”)	设置元素内部纯文本
attr(“属性名”)	获取元素属性值	attr(“属性名”,“属性值”)	设置元素属性值
prop(“属性”)	获取元素属性值 checked,disabled,selected	prop(“属性”,“属性值”)	设置元素属性值 checked,disabled,selected
css(“样式名”)	获取元素样式值	css(“样式名”,“值”)	设置元素样式值
addClass(“类”)	追加一个class	removeClass(“类”)	删除一个class
hasClass(“类”)	判断有没有这个class	toggleClass(“类”)	自动切换有误class

3.4 应用

<body>
省
<select id="p"></select>
市<select id="c"></select>
<script>
    var province = {"河北":["秦皇岛","石家庄","保定","衡水","承德"],"北京":["海淀","大兴","朝阳","房山","通州","昌平","东城","西城"]}
    // for(var i=0;i<province.length;i++){
        for(var key in province){
            $("#p").append('<option value="'+key+'">'+key+'</option>option>');
        }
    // }
    $("#p").change(function () {
        console.log($("#p").val())
        var cities = province[$("#p").val()]
        $("#c").empty()
        for(var i=0;i<cities.length;i++){
            $("#c").append('<option value="'+cities[i]+'">'+cities[i]+'</option>');
        }
    })
</script>

</body>

普通还不自信的程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 笔记

一、jQuery介绍1.1 概述jQuery是一个快速、简洁的JavaScript代码库提供一种简便的JavaScript操作方式优化HTML文档操作、事件处理、动画设计和AJAX交互1.2 安装直接引用jQuery<head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-1.10.2.min.js"></scri
复制链接

扫一扫