jquery介绍

最新推荐文章于 2024-08-27 01:45:00 发布

奋斗在路上的码农

最新推荐文章于 2024-08-27 01:45:00 发布

阅读量128

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/weixin_42199626/article/details/104462018

版权

官方网站
http://jquery.com/download/

引入Jquery支持

jQuery基本使用
jQuery 标识符号 $

在jQuery的书写中，所有$ 都可以使用jQuery这个单词代替。 jQuery == $

//就绪函数

//jquery参数

//使用jquery取值赋值

//关于事件绑定的不同

jQuery选择器
选择器作用：定位标签。
css ：标签、class、id
JavaScript：id、name、tagname
jQuery：五大类

基本选择器
共三个选择器标签、ID（#）、class（.）

层级选择器
层级（标签关系）：父子关系、兄弟关系。
三个选择器 > | + | ~

选择器使用 > 说明获取当前标签下指定的子标签（亲的父子关系）

选择器 + 获取当前标签同级的下一个元素（兄弟）

选择器 ~ 获取当前标签同级下所有的兄弟节点（兄弟）

	<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	<script>
		$(function(){
			
			//读取当前ul的所有子元素
			var lis = $("#ns > li");
			//取第一个值
			var t1 = $("#ns > li:first").text();
			//最后一个
			var t2 = $("#ns > li:last").text();
			//定位第几个
			var t3 = $("#ns > li:eq(3)").text();
			//小于当前索引的对象
			var t4 = $("#ns > li:lt(3)").text();
			//大于当前索引的对象
			var t5 = $("#ns > li:gt(3)").text();
			//偶
			var t6 = $("#ns > li:even").text();
			//奇
			var t7 = $("#ns > li:odd").text();
			alert(t7);
		});
		
	</script>
</head>
<body>
	
	<ul id="ns">
		<li>林黛玉</li>
		<li>梅兰芳</li>
		<li>王祖贤</li>
		<li>贾&nbsp;&nbsp;&nbsp;玲</li>
		<li>林青霞</li>
		<li>郭德纲</li>
		<li>马冬梅</li>
	</ul>
</body>

属性选择器
定位标签的时候如果上述都无法定位，那么可以在借助属性选择器直接定位
语法：[属性名=属性值]

表单选择器
表单选择器其实使用方式和过滤选择器是一样的，但是这个针对的表单中的一些特殊的标签做的操作。所以单独归为表单选择器. 一共四个选择器，

分别为
激活 :enabled | 禁用 :disabled

被点击 :checked | 被选择 :selected

案例：重写广告弹框
jQuery特效之普通特效 show(时间) | hide (时间) 单位：毫秒

jQuery特效之淡出淡出 fadeIn(时间) | fadeOut(时间) 单位：毫秒

jQuery特效之帘布效果 slideDown(时间)<显示> | slideUp (时间) 单位：毫秒

jQuery特效中的回调函数

jQuery特效中的效果切换功能 fade | slide 中有这个效果，show没有
作用是：如果当前效果是隐藏的就显示出来，如果是显示的就隐藏掉

案例：table表格隔行换色
示例：

知识点
使用jquery操作css

addClass 给标签添加样式类
removeClass 给标签移除样式类