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();

    });

});

jquery（一：认识jquery、选择器）的更多相关文章

  1. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

  3. jQuery学习-什么是jquery? Js与jquery之间的关系 Jquery选择器

    1.  什么是jQuery以及学习的意义等 jQuery是一个js库 JS库是什么? 把常用的方法,进行封装,封装到一个单独的js文件当中,要用的时候直接调用. 学习jQuery主要学什么? 学习jQ ...

  4. 从零开始学习jQuery (二) 万能的选择器

    本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...

  5. 【学习笔记】锋利的jQuery（一）选择器

    一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而 ...

  6. 汇总jQuery的61种选择器及示例

    汇总jQuery的61种选择器及示例 恋痿喃 ㄍń稀广 因罘乐睽 ú燔蒇 骤幄觳 ч豹 齑骝氮铷 宅廓Ω孓 锏遒 荛猩ㄜ彬 芡钷ж ┊贩错鹌 掩饰着可还是几步就窜到了门口看着这个让她 ...

  7. jQuery（2）——选择器

    选择器 利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为.jQuery的行为规则都必须在获取到元素后才能生效. [jQuery选择器的优势] (1)简洁的写法 ...

  8. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  9. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  10. （jQuery知识点整理-含有选择器）

                                       第一单元                                       jQuery介绍:   javaScript ...

随机推荐

  1. Spring校验器实例

    @size (min=3, max=20,message="用户名长度只能在3-20之间") @size (min=6, max=20,message="密码长度只能在6 ...

  2. CodeGeeX：vscode中全新的智能代码补全插件

    大家好我是费老师,代码智能补全是近几年非常热门的话题,有前不久宣告项目终结的kite,反响平平的tabnine,以及最近吃了一堆官司的copilot. 而广大从事编程工作的用户只关心市面上的代码智能补 ...

  3. ORCL 时间

    一.计算时间差 两个Date类型字段:START_DATE,END_DATE,计算这两个日期的时间差(分别以天,小时,分钟,秒,毫秒): 天: ROUND(TO_NUMBER(END_DATE - S ...

  4. Windows 10 读取bitlocker加密的硬盘出现参数错误怎么解决？

    我为了数据安全,用windows专业版的bitlocker加密了一个固态硬盘SSD做的移动硬盘(u盘同理),在家里电脑(windows10 家庭版)打开的时候出现了参数错误 即使密码输入正确还是这个错 ...

  5. Java9-17新特性一览，了解少于3个你可能脱节了

    前言 Java8出来这么多年后,已经成为企业最成熟稳定的版本,相信绝大部分公司用的还是这个版本,但是一眨眼今年Java19都出来了,相信很多Java工程师忙于学习工作对新特性没什么了解,有的话也仅限于 ...

  6. 医疗在线OLAP场景下基于Apache Hudi 模式演变的改造与应用

    背景 在 Apache Hudi支持完整的Schema演变的方案中(https://mp.weixin.qq.com/s/rSW864o2YEbHw6oQ4Lsq0Q), 读取方面,只完成了SQL o ...

  7. PostgreSQL：查询元数据（表 、字段）信息、库表导入导出命令

    一.查询表.模式及字段信息 1.查询指定模式下的所有表 select tablename,* from pg_tables where schemaname = 'ods'; 2.查询指定模式下的表名 ...

  8. 【离线数仓CDH版本】即席查询工具（Presto、Druid、Kylin）、CDH数仓、Impala查询

    1.即席查询 一.Presto 大数据量.秒级.多数据源的查询引擎[支持各种数据源work的内存级查询] 由coordinator和多个work构成,work对应不同数据源Catalog 特点:基于内 ...

  9. 04.Javascript学习笔记3

    1.箭头函数 箭头函数是一种更短的函数表达式. const age = birthyear => 2022 - birthyear; console.log(age(2000)) 箭头左边的bi ...

  10. USB转TTL串口 (CH340 G)

    为什么USB要转TTL串口[1]? 单片机串口基本采用TTL电平. 家用电脑很少有串口,但是有USB接口 USB的电平与TTL电平不兼容. 所以需要将USB电平转化为TTL电平. USB是什么? 接口 ...