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"></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-nextpre后面的所有兄弟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(“类”)追加一个classremoveClass(“类”)删除一个class
hasClass(“类”)判断有没有这个classtoggleClass(“类”)自动切换有误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>

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页