jQuery基础入门

时间：2018-04-15 00:02:59 阅读：271 评论：0 收藏：0 [点我收藏+]

标签：textarea 代码学习 word png img 过滤 ack inpu

一、什么是 jQuery

　　Jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

技术分享图片

二、怎么用 jQuery

技术分享图片

　　jquery-1.8.3.js：一般用于学习阶段。

　 jquery-1.8.3.min.js：用于项目使用阶段

注：Jquery它是一个库(框架)，要想使用它，必须先引入！

在<head>标签中引入代码：

<script src="../../js/jquery-1.8.3.js"></script>

例：获取元素----------------$(“#id”);

　Jquery函数的使用-------$(function(){});

三、Jquery页面加载

技术分享图片

注：在js给的onload只能赋一个值，如果对此赋值，后面的讲覆盖前面的。

　　在就Query ready可以使用多次，多个页面加载将依次执行。

四、 jquery的选择器

1、基本选择器（使用频率最大）

id选择器：$(“#id名称”);
元素选择器：$(“元素名称”);
类选择器：$(“.类名”);
通配符：* -----所有的元素
多个选择器共用(并集)

代码演练：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <link rel="stylesheet" href="../../css/style.css" />
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("#one").css("background-color","pink");
                });
                
                $("#btn2").click(function(){
                    $(".mini").css("background-color","pink");
                });
                
                $("#btn3").click(function(){
                    $("div").css("background-color","pink");
                });
                
                $("#btn4").click(function(){
                    $("*").css("background-color","pink");
                });
                
                $("#btn5").click(function(){
                    $("#two,.mini").css("background-color","pink");
                });
            });
        </script>
            
    </head>
    <body>
        <input type="button" id="btn1" value="选择为one的元素"/>
        <input type="button" id="btn2" value="选择样式为mini的元素"/>
        <input type="button" id="btn3" value="选择所有的div元素"/>
        <input type="button" id="btn4" value="选择所有元素"/>
        <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="four">
            
        </span>
    </body>
</html>

2、层级选择器

技术分享图片

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

代码演练：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    $("body div").css("background-color","gold");
                });
                
                $("#btn2").click(function(){
                    $("body>div").css("background-color","gold");
                });
                
                $("#btn3").click(function(){
                    $("#two+div").css("background-color","gold");
                });
                
                $("#btn4").click(function(){
                    $("#one~div").css("background-color","gold");
                });
            });
        </script>
        
        
    </head>
    <body>
        <input type="button" id="btn1" value="选择body中的所有的div元素"/>
        <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
        <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
        
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="four">
            
        </span>
    </body>
</html>

3、基本过滤选择器

$(‘li‘).first() 等价于：$(“li:first”)

技术分享图片

代码演练：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本过滤选择器</title>
		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("body div:first").css("background-color","red");
				});
				
				$("#btn2").click(function(){
					$("body div:last").css("background-color","red");
				});
				
				$("#btn3").click(function(){
					$("body div:odd").css("background-color","red");
				});
				
				$("#btn4").click(function(){
					$("body div:even").css("background-color","red");
				});
			});
		</script>
		
		
	</head>
	<body>
		<input type="button" id="btn1" value="body中的第一个div元素"/>
		<input type="button" id="btn2" value="body中的最后一个div元素"/>
		<input type="button" id="btn3" value="选择body中的奇数的div"/>
		<input type="button" id="btn4" value="选择body中的偶数的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

4、属性选择器

技术分享图片

代码演练：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" href="../../css/style.css" />
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("div[id]").css("background-color","red");
                });
                
                $("#btn2").click(function(){
                    $("div[id=‘two‘]").css("background-color","red");
                });
                
            });
        </script>
        
        
    </head>
    <body>
        <input type="button" id="btn1" value="选择有id属性的div"/>
        <input type="button" id="btn2" value="选择有id属性的值为two的div"/>
        
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="four">
            
        </span>
    </body>
</html>

5、表单选择器

技术分享图片

代码演练：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表单选择器</title>
        
        
    </head>
    <body>
        <input type="button" id="btn1" value="选择所有input元素" />
        <input type="button" id="btn2" value="选择文本框" />
        <br/>
        <form>
            <input type="text" /><br />
            <input type="checkbox" /><br />
            <input type="radio" /><br />
            <input type="image" /><br />
            <input type="file" /><br />
            <input type="submit" />
            <input type="reset" /><br />
            <input type="password" /><br />
            <input type="button" /><br />
            <select><option/></select><br />
            <textarea></textarea><br />
            <button></button>
        </form>
    </body>
</html>

jQuery基础入门

标签：textarea 代码学习 word png img 过滤 ack inpu

原文地址：https://www.cnblogs.com/fujiayao/p/8833508.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

jQuery基础入门

一、什么是 jQuery

二、怎么用 jQuery

三、Jquery页面加载

四、 jquery的选择器

1、基本选择器（使用频率最大）

2、层级选择器

3、 基本过滤选择器

4、 属性选择器

5、表单选择器

3、基本过滤选择器

4、属性选择器