TBYBlog

vuePress-theme-reco TBYBlog    2020 - 2021
TBYBlog TBYBlog

Choose mode

  • dark
  • auto
  • light
时间轴
github
author-avatar

TBYBlog

23

Article

16

Tag

时间轴
github

JQuery是怎么炼成的

vuePress-theme-reco TBYBlog    2020 - 2021

JQuery是怎么炼成的

TBYBlog 2021-07-09 JS
## JQuery语法

# 基础语法

基础语法:$(selector).action()

美元符号定义JQuery

selector(选择器)查找相对应的HTML元素

action()执行对于元素的操作

实例

  • $(this).hide()---隐藏当前元素
  • $("p").hide()---隐藏所有<p>元素
  • $("p.test").hide()---隐藏所有class=“test”的<p>元素
  • $("#test").hide()---隐藏id="test"的元素

# 文档就绪事件

$(document).ready(function(){
	// 开始写JQuery代码
})

// 简写版本
$(function(){
    // 开始写JQuery代码
})

把JQuery代码写在文档就绪事件中是防止DOM在未完全加载完成前执行。如果在DOM没有加载之前可能会操作失败,下列情况就会失败

  • 试图隐藏一个存在的元素
  • 获得未完全加载的图像的大小

load和ready区别

window.onload $(document).ready()
执行时机 必须等待网页内容全部加载完毕(包括图片等),然后再执行被包裹代码 只需要等待网页中的DOM结构加载完毕,就能执行被包裹的代码(不会等待图片是否已经加载,只要DOM已经构建完成即可)
执行次数 只能执行一次,如果第二次,那么第一次的执行会被覆盖 可以执行多次,第N次都不会被上一次覆盖
简写方案 无 $(function(){})

# JQuery选择器

JQuery选择器基于CSS选择器,除此之外还有一些自定义的选择器

JQuery中所有选择器都以美元符号开头:$()

# 元素选择器

$(function(){
    $("button").click(function(){
     	alert("元素选择器")
    })
})

# ID选择器

$(function(){
    $("#test").click(function(){
     	alert("ID选择器")
    })
})

# class选择器

$(function(){
    $(".test").click(function(){
     	alert("class选择器")
    })
})

# 其他选择器

  • $("*")---选取所有元素
  • $("this")---选取当前HTML元素
  • $("p.intro")---选取class为intro的<p>元素
  • $("p:first")---选取第一个<p>元素
  • $("ul li:first")---选取第一个<ul>元素中的第一个<li>元素
  • $("ul li:first-chid")---选取每个<ul>元素中的第一个<li>元素
  • $("p:eq(数字)")---选取第数字+1个<p>元素

在JQuery中有一个比较有趣的现象,如果在父子选择器的基础上加上:first/:last/:eq(数字) 的话 只在子元素后面加上这三个指定词,那么:first/:eq(数字)就认定是在第一个父元素的基础上进行子元素的变动、:last就认定是在最后一个父元素的基础上进行子元素的变动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("ul li:first").hide();
  });
});
	
$(document).ready(function(){
  $("#btn2").click(function(){
    $("ul li:last").hide();
  });
});
	
$(document).ready(function(){
  $("#btn3").click(function(){
    $("ul:last li:first").hide();
  });
});
	
$(document).ready(function(){
  $("#btn4").click(function(){
    $("ul li:eq(1)").hide();
  });
});
	
$(document).ready(function(){
  $("#btn5").click(function(){
    $("ul:eq(1) li:eq(2)").hide();
  });
});
	
</script>
</head>
<body>

<p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

	<button id="btn1">点我1</button>
	<button id="btn2">点我2</button>
	<button id="btn3">点我3</button>
	<button id="btn4">点我4</button>
	<button id="btn5">点我5</button>

</body>
</html>
  • $("[href]")---选取带有href属性的元素
  • $("a[target='_blank']")---选取所有target属性值等于"_blank"的<a>元素
  • $("a[target!='_blank']")---选取所有target属性值不等于"_blank"的<a>元素
  • $(":button")---选取所有type="button"的<input>元素和<button>元素
  • $("tr:even")---选取偶数位置的<tr>元素
  • $("tr:odd")---选取奇数位置的<tr>元素

# JQuery事件

目前只讨论一些常用的事件

# 鼠标事件

# 键盘事件

# 表单事件

# 文档/窗口事件