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

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

一丶什么是JQuery

JQuery:

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

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

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

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

​ 示例代码:

上一篇:实战 Docker+Kubernetes 微服务容器化(一)-初识微服务


下一篇:extJs学习基础4 Ext.each的用法