jQuery基础文档(持续更新)

1 jQuery入门仪式:

还是先上一段代码吧，对照这看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <button class="buttonClass" id="buttonId">
        click事件
    </button>
</body>
<script type="text/javascript">
    $(document).ready(function(){
    
    
        $('.buttonClass').click(function(){
    
          //这里用的类选择器    重点强调： *记得打上引号* 。可用id选择器$('#buttonId')\元素选择器$('button')
            this.style.backgroundColor = 'red';     //this。指代当前的触发事件的控件，也就是当前监控button按钮      注意：这个样式设置和使用$('button')选出来的样式设置格式不一样，下面会写到
        });
    });
</script>
</html>

1）连接形势引入：

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

2）使用格式
使用时需要用‘$’绑定jQuery
（selector—元素选择，如：

|‘p’,class=‘button’|’.button’,id=‘test’|#test）
(event—事件函数，如:click 点击，mouseover 鼠标悬停)

$(docment).ready（function(){
    
    
	$(selector).event(function(){
    
    
		......
	});
}）;

3）绑定符号冲突—$
当内定的绑定符号$ 使用有冲突时（别的库引用也是用‘$’时，如：prototype等），可以自定义引用，如：

var jq = qQuery.noConflict();

啥玩意儿 (0_0)!!!
为什么上面的没问题，下面的显示不出来。。。。
在这里插入图片描述

算了，将就着看吧！懒得研究了，有知道的铁汁评论告诉我下也行！懒得敲就算了~~

4）选择器

#1、和css的写法一样，就是加个jQuery引用一下就可以：
		$('p')---选择所有p元素标签；
		$('.button')---通过类名选择；
		$('#button')---通过id选择；
#2、选择给定属性的标签，如：
	    $("[href]") 选取所有带有href属性的元素。
    	$("[href='#']") 选取所有带有href值等于"#"的元素。
    	$("[href!='#']") 选取所有带有href值不等于"#"的元素。
    	$("[href$='.GIF']") 选取所有href值以".GIF"结尾的元素。
#3 层级选择器：

		x和y可以为任意选择器
		$("x y");	// x的所有后代y（子子孙孙）
		$("x > y");	// x的所有儿子y（儿子）
		$("x + y")	// 找到所有紧挨在x后面的y
		$("x ~ y")	// x之后所有的兄弟y
#4 基本选择器
		:first // 第一个
		:last // 最后一个
		:eq(index)// 索引等于index的那个元素
		:even // 匹配所有索引值为偶数的元素，从 0 开始计数
		:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
		:gt(index)// 匹配所有大于给定索引值的元素
		:lt(index)// 匹配所有小于给定索引值的元素
		:not(元素选择器)// 移除所有满足not条件的标签
		:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
	例子：
		$("div:has(h1)")// 找到所有后代中有h1标签的div标签
		$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
		$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
		$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

jQuery基础文档(持续更新)

文章目录

jQuery基础文档(持续更新)

1 jQuery入门仪式:

おすすめ