jquery --入门

2024-04-01 23:02:10

Jquery基础

1.了解jquery

1.1什么是jquery

　　jquery是一个高效，精简并且功能丰富的JavaScript 工具库

　　jquery极大的简化了javascript编程

1.2什么是JS类库

　　它就是一些函数集合，就是把特定的效果写好，你只需要在用的时候，要用很少的代码去调用

　　起主导的是你的代码，由你来决定合适使用类库

1.3常见的JS类库　　

　　jQuery

　　 Extjs

　　zepto.js
　　prototype.js

2.jQuery的引入方式

　　本地引入

<script src="jquery-1.12.4.min.js"></script>
<script>
    
//下载地址 https://jquery.com/download/
</script>

　　CDN引入

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>

</script>

2.1 jquery对象

$是jquery的别名

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    console.log($)；

     console.log(jQuery)；

jQuery("xxx"); $("xxxx") 选取方式是一样的
 </script>

3.jQuery的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="p1" alex="sb">0000</p>
<p id="p2" alex="sb">1111</p>
<div class="outer">
hello
	<div>
		<p>ahha</p>
	</div>
	<p>123456</p>
	<p>56789</p>
</div>

<ul>
	<li>111</li>
	<li>222</li>
	<li>333</li>
</ul>

<input type="text" name="">
<input type="checkbox" name="">
<input type="submit" name="">


<script src="jquery-1.12.4.min.js"></script>

<script>
	//基本选择器 .class属性  # id属性  直接选取元素
	// $(".test").css("color","red")
	// $("#test").css("color","red")
	// $("test").css("color","red")

	//层级选择器
	// $(".outer p").css("color","red");
	// $(".outer>p").css("color","red");
	// $(".outer+p").css("color","red")


    //基本筛选器  last:最后一个  first：第一个 eq(number)按下标选取(默认下标从零开始) lt()区间选取不包括自己

    // $("li:last").css("color","red");
    // $("li:first").css("color","red");
    //$("li:eq(2)").css("color","red");
    //$("li:lt(2)").css("color","red")
    //
    

    //属性选择器
    //$("[alex='sb'][id='p1']").css("color","red")
    //
    //
    
    //表单选择器
    //$("[type='checkbox']").attr("checked","true")
    //
    //只有input类型的type属性表单能这样进行选择
    $(":text").css("width","400px");

	

</script>

</body>
</html>

4.jQuery的筛选器

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<ul>
	<li>111</li>
	<li id="end">222</li>
	<li>333</li>
	<li>4444</li>
	<li>55555</li>
	<li>6666</li>
	<li>77777</li>
	<li>88888</li>
</ul>

<div class="outer">222
　　　　<p>999</p>
	<div class="inner">
		<p>22333</p>
	</div>
</div>

<input type="text" name="">
<input type="checkbox" name="">
<input type="submit" name="">

<script src="jquery-1.12.4.min.js"></script>
<script>
	//过滤筛选器
	//$("li").eq(2).css("color","red")
	// $('li:first').css("color","red");
	// $("li").last().css("color","red");
	// 
	// 
	// 查找筛选器
	// $(".outer").children("p").css("color","red")查找当前选择对象下的子类元素
	// $(".outer").find("p").css("color","red")匹配查找当前对象下的指定元素
	// 
	// nextAll()查找指定元素下面所有,next查找下一个
	//$("li").eq(2).nextAll().css("color","red");
	//$("li").eq(2).next().css("color","red");

	//$("li").nextUntil("#end").css("color","red");从指定元素下面开始查找，不包括本身
	
	//查找指定元素的上一位,eq()方法默认从0为开始查找
	// $("li").eq(4).prev().css("color","red");
	// $("li").eq(4).prevAll().css("color","red");
	// $("li").eq(4).prevUntil("#end").css("color","red")
	

	//console.log($(".outer .inner p").parent().html());parent查找父类html
	//console.log($(".outer .inner p").parents().css("color","red");parents查找所有父类

	//$(".outer .inner p").parentsUntil("body").css("color","red");

	$(".outer").siblings().css("color","red");

	</script>

</body>
</html>

4.2 jQuery变量的定义

jquery 基础变量定义
var $i=$("#D1");
var i=$("#D2");
function(){
     //这里获取控件对象值
     var d1=$i.val();
     var d2=$(i).val();
}

$i： 表示jquery对象 

i：表示普通对象

码农公寓

相关文章