jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

一丶什么是JQuery

JQuery:

​      JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率

      js库是包含了把复杂的功能封装到简单的方法中

JQuery的两大特性:

​      链式编程:可以.的形式实现多个功能

​      隐式迭代:在方法的内部进行遍历循环,而不是我们自己再进行循环,简化操作,方便调用

​      更好的兼容性:JQuery自动做了浏览器的兼容问题

​

JQuery的引入:

​      压缩(XXX.min.js)与未压缩

// 1. 压缩过的文件更小,不占据空间,利于网络传输,可读性不高

// 2. 未压缩的文件占据空间,不利于网络传输,可读性高

      引入:导入文件一定要在自定义script标签之上

<!-- 导入文件一定要在自定义script标签之上 -->

<!-- 引入Jq文件 -->

    <script src="jquery3.4.1.min.js"></script>

    <script>

        // 自定义JQ/js代码

    </script>

//在控制台输入jQuery

	//结果如下,则表示引入JQ成功

	ƒ (e,t){return new k.fn.init(e,t)}

      相比较下,Js原生的效率要高于JQuery的效率,有时候需要写大量的原生js代码,提高执行效率.

二丶JQuery的入口函数和$符

入口函数:

/* 文档加载完毕 */

	//方式一:

		$(document).ready(function(){

            //文档加载完毕

            alert('加载完毕');

        });

	//方式二:

		$(function(){

           //文档加载完毕

            alert('加载完毕');

        });

	//方式三:

		$(window).ready(function(){

           	//文档加载完毕

            alert('加载完毕');

        });

JQ入口函数和js入口函数对比

/* 区别一:书写方式不一样 */

	//js的入口函数只能书写一次,多次会存在 事件 覆盖现象

	//jq的入口函数可以出现多次,不限次数

/* 区别二:执行时机不同 */

	//js的入口函数是在所有的文件资源加载完毕之后,才执行.资源包括:页面文档,外部的js文件,外部的css文件,图片等.  (dom树资源加载完毕+文件资源加载完毕)

	//JQuery的入口函数,是在文档加载完成后就执行.即Dom树加载完成之后就可以操作dom.不要等到外部所有的资源都加载完毕. (dom树资源加载完毕)

/* 相同: */

	//文档的加载顺序:从上到下下,边解析边执行

JQuery的$

​      $和jQUery具有一样的意义,是jQUery占用了这两个变量

//jQUery+() :  实例化一个JQ对象

    jQuery('#id')

    k.fn.init {}

//$+() : 实例化一个JQ对象

    $('#id')

    k.fn.init {}

//判断$符和jQuery的值和类型是否相同

    $===jQuery

    true

//总结: jQuery和$符就是一个变量,存放类地址

三丶JQuery和JS的Dom对象对比

区别:

​      jQuery获取元素的jq对象,包括dom树,还有一些方法

​      原生js只获取dom对象

/* js获取对象 */

	// id选择器,类选择器,标签选择器

		document.getElementById('app')

		// 直接获得一个标签对象

			<div id="app">

/* jQuery获取jq对象 */

	// id选择器,类选择器,标签选择器

    	$('#app')

		// 获取一个jq对象,包括一些方法

			Object [ div#app ]  <prototype>:Object { jquery: "3.4.1", constructor: k(), length: 0, … }

相互转换:

/* jQuery对象 转换成 js对象 */

	//方式一: jQuery对象[index];   index为索引,推荐此方式

		var obj=$('#sel');

		jQuery[0];   //js对象

	//方式二: jQuery对象.get(index);

		var obj=$('#sel');

		obj.get(0);   //js对象

/* js对象 转换成 jQuery对象 */

    //方式一 : $(js对象)

	var p_obj=document.getElementById('p1');

	$(p_obj);  //JQ对象

    //方式二 : jquery(js对象)

	var p_obj=document.getElementById('p1');

	jquery(p_obj);  //JQ对象

四丶JQuery的选择器

基本选择器:

<body>

	<div>

    	<input type='text' id='inp' class='inp-class' />

    </div>

</body>

/* id选择器 */

	//语法 : $('#id');

	var id=$('#inp');//得到一个对象

/* 标签选择器 :tagName代表标签名*/

	//语法 :$('tagName')

	var inp_tag_attr=$('input');//得到一个数组

/* 类选择器  : className */

	//语法 :$('.className')

	var inp_cls_attr=$('.inp-class');//得到一个数组

/* 通配符选择器 */

	//语法 :$('*')

	var all_attr=$('*');

/* 交集选择器 */

	//语法 :$('div.inp-class')

	var attr1=$('div.inp-class'); //得到一个数组

/* 并集选择器 */

	//语法 :$('#inp.inp-class')

	var el=$('#inp.inp-class');

​ 示例代码:

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法的更多相关文章

  1. 表单验证插件jquery.validate的使用方法演示

    jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...

  2. jQuery中防止表单提交两次的方法

    遇到过表单提交两次的情况,做个记录: 解决场景:首先是表单验证,其次是防止多次提交表单: jQuery中插件:validate_submitHandler_plugin,具体的可以使用关键字搜索: 使 ...

  3. Knockout学习之表单绑定器（上）

    表单绑定器 “click”绑定 Click 绑定器可以将javascript函数绑定到指定的dom元素,并且再该元素被点击时将触发绑定的函数,大多数情况下都会使用button.input和a元素,当然 ...

  4. jquery插件-表单提交插件-jQuery.Form

    1.介绍 JQuery Form插件是一款强大的Ajax表单提交插件,可以简单方便的实现让我们的表单 由传统的提交方式转换成Ajax无刷新提交! 他提供了两个核心的方法ajaxForm以及ajaxSu ...

  5. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

  6. jquery表单验证插件 jquery.form.js ------转载

    Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.JQuery框架软件包下载 文件: jquery.rar 大小: 29KB 下载: 下载 2.Form插件下载 文件 ...

  7. jquery表单验证插件 jquery.form.js-转

    来自:http://www.cnblogs.com/luluping/archive/2009/04/15/1436177.html Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满 ...

  8. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  9. form表单提交的几种方法

    form表单提交的几种方法 <form id="myform" name="myform" method="post" onsubmi ...

随机推荐

  1. locust手机号批量注册性能测试

    from locust import TaskSet,task,HttpLocust from common.redisCon import redis_clusters import queue c ...

  2. mysql 单表,多表,符合条件,子查询

    单表: HAVING过滤 二次筛选 只能是group by 之后的字段 1.查询各岗位内包含的员工个数小于2的岗位名.岗位内包含员工名字.个数 select post,group_concat(nam ...

  3. am instrument 命令详解运行多个用例

    1 Instrument是什么? instrument为am命令的一个子命令.用于启动一个Instrumentation测试.首先连接手机或者模拟器,通过adb shell命令,进入shell层进行操 ...

  4. 3DMax下载与安装(注册机为网上收集，仅供学习与研究,支持正版)

    3DS Max 全称3D Studio Max,是Autodesk公司开发的三维动画制作和渲染软件(Autodesk AutoCAD 2012也是Autodesk公司的软件产品) 3DS Max广泛应 ...

  5. 【java异常】org.springframework.web.util.NestedServletException: Handler processing failed;Can't connect to X11 window server using 'localhost:10.0' as the value of th

    tomcat工程中创建二维码失败.抛出异常Can't connect to X11 window server using 'localhost:10.0' as the value of th 因为 ...

  6. VMware Workstation创建Windows2012server虚拟机

    镜像文件需要下载到物理机 3.需要输入iso文件 对应的密钥 定义普通的用户名与密码 4.指定按照路径 5. 大概都是下一步 根据提示需要重启 选择带GUI的服务器进行安装,因为windows命令行模 ...

  7. 网络协议 18 - CDN

    到现在为止,我们基本上已经了解了网络协议中的大部分常用协议,对于整个 HTTP 请求流程也较为熟悉了.从无到有后,我们就要考虑如何优化“有”这个过程,也就是我们常见的请求优化.而现在的技术栈中,CDN ...

  8. Java实现添加压缩文件

    package junittest; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStr ...

  9. Python 绘制 柱状图

    用Python 绘制 柱状图,使用的是bar()函数. 一个简单的例子: # 创建一个点数为 8 x 6 的窗口, 并设置分辨率为 80像素/每英寸 plt.figure(figsize=(10, 1 ...

  10. Vue.js 自定义组件封装实录——基于现有控件的二次封装（以计时器为例）

    在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...