jquery框架 ————2021-08-22

onload：页面加载函数，整个页面加载到内存中自动调用*js代码；

//一加载就执行
			window.onload = function() {
				console.log(111);
			}

1、导入jquery的js；2、编写js代码； （$代替jquery）

<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>

jquery文档加载函数 $=jquery （同上，可替代，并且比onload先执行）

	$(function(){
				console.log(222);
			})

使用on绑定事件，使用off解绑事件；

    $("#btn").on("click",function(){
					alert("单击");
				})
				
				 $("#btn").mouseover(function(){
					console.log("鼠标悬浮");
				}) 
				
				$("#btn2").click(function(){
					//$("#btn").off("click"); //解绑指定事件
					$("#btn").off(); //解绑所有事件
				})

this代表当前对象；hide()：隐藏方法；html()：获取内容；

     $("p").mouseover(function(){
					$(this).hide(); //隐藏当前对象
				})
				
				$("p").click(function(){
					alert($(this).html()); //获取当前内容`在这里插入代码片
				})

遍历：for循环与jq对比；

	//遍历 for循环
				var li = document.getElementsByTagName("li");
				for(var i = 0;i < li.length;i++){
					console.log(li[i].innerHTML);
				}
				//jquery 循环 each方法
				$("ul>li").each(function(i,o){
					console.log(i); //拿到索引
					console.log(o.innerHTML); //拿到元素
					console.log($(o).html()); //jq对象 拿到元素
					//console.log($(this).html());
				})

jq添加css样式：

	<style type="text/css">
			.h{
				width: 300px;
				color:mediumvioletred;
				border: 2px solid;
			}
		    </style>
 
            <h1>Hello JQuery</h1>
 
 
            	$("h1").mouseover(function(){
					// $(this).addClass("h"); //添加class
					$(this).css("color","blue");
				}).mouseout(function(){
					// $(this).removeClass("h"); //移除class
					$(this).css("color","pink");
				})

jquery对象与dom对象之间的相互转换：

<input type="" name="" id="username" value="请输入用户名" />
 
		<script type="text/javascript">
			$(function() {
 
				var username = document.getElementById("username");
				console.log(username.value);
				//dom对象转为jquery对象：使用$(dom对象)，$()称为工厂函数
				console.log($(username).val());
				//jquery对象转换为dom对象：1、类似数组元素访问方式
				var $username = $(username);
				var username2 = $username[0];
				console.log(username2.value);
				//2、get(0)方法
				var username3 = $username.get(0);
				console.log(username3.value);
			})
		</script>

选择器

基本选择器加样式：

  $(".h1").css("background-color","#ccc");
  $(".h2,#p,.li").css({"color":"orange","border":"1px solid"});
 $("*").css({"background-color":"pink","border":"1px solid #000"});

层级选择器：
ancestor descendant：空格，获取ancestor下所有的descendant元素；(“form input”);
parent>child：父子选择器；获取子元素；$(“form>input”);
prev + next：相邻兄弟选择器；获取紧随prev元素后的一个兄弟元素；(“label+input”);
prev ~ siblings：通用兄弟选择器；获取prev元素后边的所有兄弟元素；(“form~input”);

过滤器：

基本过滤选择器：
：first 选取第一个元素；$(“tr:first”);
：last 选取最后一个元素；
：not(selector) 去除所有与给定选择器匹配的元素；
：even 选取所有元素中偶数索引的元素，从0开始计数；
：odd 选取所有元素中奇数索引的元素；
：eq(index) 选取指定索引的元素；
：gt(index) 选取索引大于指定index的元素；
：lt(index) 选取索引小于指定index的元素；
：header 选取所有的标题元素；
：animated 匹配所有正在执行动画效果的元素；

内容过滤选择器：
：contains(text) 选取包含text文本内容的元素；$(“div:contains(‘John’)”)；
：empty 选取不包含子元素或者文本节点的空元素；
：has(selector) 选取含有选择器所匹配的元素的元素；(“div:has ( p )”)；
：parent 选取含有子元素或文本节点(内容)的元素；

可见性过滤选择器：
：hidden 选取所有不可见的元素$(“tr:hidden”) 匹配所有display:none、input中type=hidden的元素；
：visible 选取所有可见的元素；

    $("input:eq(1)").click(function(){
					$(":hidden").show(); //show方法显示
				})
				
				$("input:last").click(function(){
					$("#di:visible").hide();
				})

属性过滤选择器：
[attribute] 选取拥有此属性的元素；$(“div[id]”)；
[attribute = value] 选取指定属性值为value的所有元素；
[attribute != value] 选取属性值不为value的所有元素；
[attribute ^= value] 选取属性值以value开始的所有元素；
[attribute $= value] 选取属性值以value结束的所有元素；
[attribute *= value] 选取属性值包含value的所有元素；
[selector1] [selector2] ……[selectorN] 复合性选择器；

子元素过滤选择器：
对某元素中的子元素进行选取
：nth-child(index/even/odd) 选取索引为index的元素、索引为偶数、索引为奇数的元素—index从1开始；
：first-child 此选择符将为每个父元素匹配第一个子元素；
：last-child 次选择符将为每个父元素匹配最后一个子元素；
：only-child 选取唯一子元素，它的父元素只有它这一个子元素；

表单过滤选择器：根据元素类型进行选择

选取表单元素的过滤选择器
：input 选取所有、 、 和元素；
：text 选取所有的文本框元素；
：password 选取所有的密码框元素；
：radio 选取所有的单选框元素；
：checkbox 选取所有的多选框元素；
：submit 选取所有的提交按钮元素；
：image 选取所有的图像按钮元素；
：reset 选取所有重置按钮元素；
：button 选取所有按钮元素；
：file 选取所有文件上传域元素；
：hidden 选取所有不可见的元素；
注：$(“input[type=‘checkbox’]”)----等于：checkbox

blur(function) 离焦事件；
val() 可以获取表单元素value属性，表单中的值；
attr() 可以获取对象的属性值；

表单对象属性过滤选择器：根据元素特殊属性进行选择；
：enabled 选取所有可用元素；
：disabled 选取所有不可用元素；
：checked 选取所有被选中的元素，如单选框、复选框；
：selected 选取所有被选中项元素，如下拉列表框、列表框；

最后

以上就是斯文心情为你收集整理的jquery框架 ————2021-08-22的全部内容，希望文章能够帮你解决jquery框架 ————2021-08-22所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。