随笔 - 134,  文章 - 0,  评论 - 0,  阅读 - 21224
jquery（一：认识jquery、选择器）

jQuery

优点：

1.提供了强大的功能函数

2.解决了浏览器的兼容问题

3.实现了丰富的UI和插件

4.纠正错误的脚本知识

例子

1.传统：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" value="设置边框" id="btOne" />
		<input type="button" value="设置文本" id="btTwo" />
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>
<script>
	//入口函数
	window.onload=function(){
		//先设置获取对用的元素
		var btOne=document.getElementById("btOne");
		var btTwo =document.getElementById("btTwo");
		var divs = document.getElementsByTagName("div");
		//给btOne按钮设置事件
		btOne.onclick=function(){
			for(var i=0;i<divs.length;i++){
				divs[i].style.border='1px solid red';
			}
		}
		//给btnTwo设置点击事件
		btTwo.onclick=function(){
				for(var i=0;i<divs.length;i++){
				divs[i].textContent="我是设置的文本";
			}
		}
	}
</script>

传统的js的缺点：

1.不能添加多个入口函数（window.onload)，如果添加多个入口函数，后面的会把前面的覆盖

2.原生的js的api的名字都太长，不好记

3.原生的js有的时候代码太冗余

4.原生js中的有写属性和方法有浏览器的兼容问题

5.原生js容错率太低

2.jQuery：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" value="设置边框" id="btOne" />
		<input type="button" value="设置文本" id="btTwo" />
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>
<!--<script>
	//入口函数
	window.onload=function(){
		//先设置获取对用的元素
		var btOne=document.getElementById("btOne");
		var btTwo =document.getElementById("btTwo");
		var divs = document.getElementsByTagName("div");
		//给btOne按钮设置事件
		btOne.onclick=function(){
			for(var i=0;i<divs.length;i++){
				divs[i].style.border='1px solid red';
			}
		}
		//给btnTwo设置点击事件
		btTwo.onclick=function(){
				for(var i=0;i<divs.length;i++){
				divs[i].textContent="我是设置的文本";
			}
		}
	}
</script>-->
	<script src="js/jquery-3.6.0.js"></script>
	<script>
		//入口函数
		$(document).ready(function(){
			//设置边框
			$('#btOne').click(function(){
				$('div').css('border','1px solid red');
			});
			//设置问泵
			$('#btTwo').click(function(){
				$('div').text('我是文本');
			});
			
		})
	</script>

优点：

1.是可以写多个入口函数的

2.名称比较好记

3.jQuery的代码简洁（隐式迭代）

4.jQuery帮我们解决了浏览器的兼容问题

5.代码的容错率高，前面错了后面没关系

主要内容

介绍jQuery

jQuery是一个快速、小且功能丰富的JavaScript库。它使用一个易于使用的API，可以跨多种浏览器工作，从而使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。

使用jQuery的步骤：

  • 引入jQuery

安装：

		<script src="js/jquery-3.6.0.js" type="text/javascript">
  • 引入入口函数
	<script src="js/jquery-3.6.0.js"></script>
	<script>
		//入口函数
		$(document).ready(function(){
			//设置边框
			$('#btOne').click(function(){
				$('div').css('border','1px solid red');
			});
			//设置问泵
			$('#btTwo').click(function(){
				$('div').text('我是文本');
			});
			
		})
	</script>

  • 找到要操作的元素

    选择器

入口函数的写法

$('document').ready(function(){})

$(function(){})

jQuery的入口函数和window.onload的区别：

1.jQuery的入口函数可以写多个，而window.onload不能写多个

2.执行时机不同jQuery的入口函数先执行

jQuery入口函数要等待页面上的dom树加载完成后执行

window.onload要等待页面给上的所有的资源都加载完后才执行（静态资源）

$是什么？

//jQuery是一个自执行函数

window.jQuery=window.$=jQuery

1.引入一个js文件是会执行js中的代码；

2.jQuery文件的代码，其实就是执行这个自执行文件的这个自执行函数

这个自执行文件就是给window对象添加一个jQuery的属性和$属性

$和jQuery是相同的。

console.log(window.jQuery===window.$)-----true
console.log(Object.prototype.toString.call($))------'[object Function]'

$是一个函数，参数不同返回值不同

  • 如果参数是一个匿名函数----入口函数
  • 如果函数是一个字符串------选择器/创建一个标签
  • 如果参数是一个dom对象，那他就会把dom对象转化成jQuery对象

Dom对象和Jquery对象

Dom对象都是通过js获得的对象（document）

jQuery对象都是通过jQuery方法来获取的（jQuery包装集）

Dom对象

有限的属性和方法

			var divDom =document.getElementById("mydiv");
			var divsDom=document.getElementsByTagName("div");

只能调用dom方法和属性不能调用jQuery方法和属性

jQuery对象

			var divjquery =$("#mydiv");

用原生的Dom去获得不存在的对象是null

只能调用jQuery的方法和属性不能调用原生的jsdom对象的属性

Dom对象转换成query对象

var domDiv =doucument.getElementById("mydiv);
mydiv=$(domDiv);

console($div1._proto_===Array.prototype);false  jQuery对象是一个伪数组

jQuery对象就是dom对象的包装集

也会返回集合，只是为空的包装集

jquery对象转换成Dom对象

//第一种 jQuery的方法
var jqueryDiv =jQuery("#mydiv");
var dom = jqueryDiv.get(1);
//第二种 获取制定下标
jqueryDiv = $('#mydiv');
var dom =jqueryDiv[0];

通过遍历jQuery集合的方式得到的对象是DOM对象

$("#mydiv").each(function(){
    //遍历
    var jquery = $（this）;
})

Jquery选择器

表示特殊语意的字符串

基础选择器

选择器 名称 举例 范围
id选择器 #id $('#testDiv')选择器id为testDiv的元素 第一个
元素名称选择器 element(标签名/元素名) $("div")选择所有的div元素 制定
类选择器 .class $(".blue")选择所有class=blue的元素 所有
选择所有元素 * $("*")选择页面所有的元素 页面所有
组合选择器 selector1,selector2,selectorN $("#testDiv,span,blue")同时选中多个选择器匹配的元素 符合条件
并集选择器 $('div,p,li') 只要符合条件之一即可
交集选择器 $('div.redClass') 获取class为redClass的div元素

层次选择器

选择器 名称 举例 范围
后代选择器 ancestor descendant $（“#parent div”）选择id为parent的元素的所有div元素 所有代
子代选择器 parent>child $("#parent>div")选择id为parent的直接div子元素 第一代
相邻选择器 prev+next $(".blue+img")选择css类为blue的下一个元素（不是指定的找不到） 挨着的同级（一个）
同辈选择器 prev-sibling $(".blue-img")选择css类为blue的之后的img元素 同级所有（只会往下找） 
获得子代元素
$('#father>div')
获得子代元素和页面所有的p
$('#father>div,p')
获得子代元素和子代的p
$('#father>div,#father>p')
获取后代
$('#father div')

过滤选择器

名称 用法 描述
：eq(index) $('li:eq(2)').css('color','red'); 获取到的li元素中，选择索引号为2的元素，索引号为index从0开始
：odd $('li:odd').css('color','red'); 获得到的li元素中，选择索引号为奇数的元素
：even $('li:even').css('color','red'); 获得到的li元素中，选择索引号为偶数的元素 
	ul>li{我是第$个li}*10

按住tab生成

隔行变色

$('li:odd').css('backgroundeColor','red');
$('li:even').css('backgroundeColor','pink');
$('li:eq(0)').css('backgroundeColor','red');
$('li:eq(9)').css('backgroundeColor','red');

筛选选择器

名称 方法 描述
children(selector) $('ul').children('li') 相当于$('ul-li'),子类选择器
find（selector) $('ul').find('li') 相当于$('ul li'),后代选择器
siblings（selector） $('#first').siblings('li') 查找兄弟节点，不包括自己本身
parent（） $('#first').parent() 查找父亲
eq（index） $('li').eq(2) 相当于$('li:eq(2)'),index从0开始
next() $('li').next() 找下一个兄弟
prev（） $('li').prev() 找上一次兄弟

show（）本质上是将display：block

hide（）本质上是将display：none

不能给一级标签的a标签mouseover事件，会选不上二级菜单，要在二级的ul设置事件

表单选择器

Forms 名称 举例
表单选择器 ：input 查找所有的input元素：$(":input");
注意：会匹配所有的input、textarea、select和button元素。
文本框选择器 ：text 查看所有的文本框：$(":text")
密码框选择器 ：password 查找所有的密码框$(":password")
单选按钮选择器 ：radio 查找所有的单选按钮：$(":radio")
复选框选择器 :checkbox 查找所有的复选框$（":checkbox")
提交按钮选择器 :submit 查找所有图像域:$(":submit")
重置按钮选择器 ：reset 查找所有重置按钮:$(":reset")
按钮选择器 :button 查找所有的按钮:$(":button")
文件域选择器 :file 查找所有的文件域:(":file")
获取表单的值

val()

1.不给参数就是获取值

2.给参数就是设置值

$('#button').click(function(){
   $('#text').val(); 
});

事件分析

mouseover事件在鼠标移动到选取元素和对应的子元素上都会触法

mouseenter只会在鼠标移动到选取元素上才会触发

以后鼠标移入使用mouseenter，鼠标移除用mouseleave

案例：

实现二级导航栏：

show（）本质上是将display：block

hide（）本质上是将display：none

实现图片的聚焦明暗：
$(function(){
    //找到后代的li
    $('.warp').find('li').mouseenter(function(){
        $(this).css('opacity',1)---这个方法的返回值是设置这个方法的的元素本身
         $(this).css('opacity',1).siblings('li').css('opacity',0.4);
    });
    $('.warp').find('li').mouseleave(function(){
        $(this).find('li').css('opacity',1)
    })
})
实现手风琴
$(function(){
    $('.parentMap>.menuMap').click(function(){
        $(this).children('div').show().parent().siblings('li').children('div').hide();
    })
})

jQuery的特性：隐式迭代

jQuery的特性：链式编程，在于一个方法的返回是一个jQuery的对象既然jQuery对象可以继续点出jQuery的方法

淘宝服饰精品案例
$(function(){
    $('#left>li').mouseenter(function(){
        var idx =$(this).index();//当前的鼠标移入的标签的索引
        $('#center>li:eq('+idx+')')//字符串的拼接
         $('#center>li).eq(idx).show().siblings('li').hide();
        
    });
            $('#right>li').mouseenter(function(){
        var idx =$(this).index();//当前的鼠标移入的标签的索引
                ide+=9;//9是左边li标签的个数
        $('#center>li:eq('+idx+')')//字符串的拼接
         $('#center>li).eq(idx).show().siblings('li').hide();
        
    });
})

为什么不给li里面的a标签设置事件呢？

给a设置事件的索引都是0

实现表单的动态增删改查
$(function(){
    $('#buttion-add').click(function(){
        //数据录入表单
       $('#adddiv').show();
        //遮照层
        $('#jmake').show();
  
    }) ;
    $('#buttion-close').click(function(){
             //数据录入表单
       $('#adddiv').hide();
        //遮照层
        $('#jmake').hide();
    })
    //获得用户输入的信息
    $('#buttion-input').click(function(){
       var s = $('#text1').val();
        var ss= $('#text2').val();
        //创建出一个tr
        var str =$('<tr><td>'+s+'</td><td>'+ss+'</td></tr>')
        $('#ul').append(str);
        //自动关闭
          $('#buttion-close').click();
        
    });
});
posted on   Steam残酷  阅读(67)  评论(0)  编辑  收藏  举报
相关博文：
· jquery（二：jquery的DOM操作）
· jquery（四：jquery的事件、Ajax）
· jQuery基础，选择器
· jquery学习
· 前后端分离之jQuery入门
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
Copyright © 2025 Steam残酷
Powered by .NET 9.0 on Kubernetes Powered By: 博客园
点击右上角即可分享
微信分享提示