欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery基础入门

程序员文章站 2022-06-17 11:41:34
一、什么是 jQuery Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。 二、怎么用 jQuery jquery-1.8.3.js:一般用于学习阶段。 jquery-1.8. ......

一、什么是 jQuery

 

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

jQuery基础入门

 二、怎么用 jQuery

 jQuery基础入门

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

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

 注:Jquery它是一个库(框架),要想使用它,必须先引入!

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

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

 jQuery基础入门

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

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

三、Jquery页面加载

jQuery基础入门

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、层级选择器

jQuery基础入门

  • 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”)

 jQuery基础入门

jQuery基础入门

 

代码演练:

<!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、  属性选择器

jQuery基础入门

 

jQuery基础入门

 jQuery基础入门

 

代码演练:

<!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、表单选择器

jQuery基础入门

jQuery基础入门

代码演练:

<!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>