jq

一、JQurey 1. 概述 * 是 javaScript 的框架 2. js与jq的互转 * js ---> jq $(js) * jq ---> js jq[索引]、jq.get(索引) # jq 可以看成是 js 的数组对象 3. jq选择器 ① 基本选择器 * $("#id") id选择器 * $(".class") 类选择器 * $("body") 元素选择器 ② 层级选择器 * $("A B ") 后代选择器 * $("A > B") 子选择器 ③ 属性选择器 * $("A[属性名]") 属性名称选择器 * ("A[属性名='值']") 属性选择器 * $("A[属性名='值'][]...") 复合属性选择器 ④ 过滤选择器 * :first 获得选择的元素中的第一个元素 * :last 获得选择的元素中的最后一个元素 * :not(selector) 不包括指定内容的元素 * :even 偶数，从 0 开始计数 * :odd 奇数，从 0 开始计数 * :eq(index) 指定索引元素 * :gt(index) 大于指定索引元素 * :lt(index) 小于指定索引元素 * :header 获得标题（h1~h6）元素，固定写法 ⑤ 表单过滤选择器 * :enabled 获得可用元素 * :disabled 获得不可用元素 * :checked 获得单选

先下载jq安装包 https://stedolan.github.io/jq/download/ 将下载的安装包文件jq-linux64 拷贝到服务器下 wget -O jq https: //github.com/stedolan/jq/releases/download/jq-1.6/jq-linux64 （或者） mv jq-linux64 jq wget -O jq jq-linux64 chmod +x ./ jq cp jq /usr/bin 来源： oschina 链接： https://my.oschina.net/u/2820979/blog/3160094

现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox、 样式的方法。 原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给<input>元素设置为透明，然后通过定位让用户看到的是<label>元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即 input[type=checkbox]:checked+label{} 利用css3伪元素实现样式修改 html代码 <p>您的性别：</p> <div class="radio-sex"> <input type="radio" id="sex1" name="sex"> <label for="sex1"></label> <span>男</span> </div> <div class="radio-sex"> <input type="radio" id="sex2" name="sex"> <label for="sex2"></label> 女 </div> css样式 .radio-sex { position: relative; display: inline-block; margin-right: 12px; } .radio-sex

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

用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性 （只能用于某些属性，相关样式会自动识别） element.setAttribute('height', 100); element.setAttribute('height', '100px'); 3. 设置style的属性 element.setAttribute('style', 'height: 100px !important'); 4. 使用setProperty 如果要设置!important，推荐用这种方法设置第三个参数 element.style.setProperty('height', '300px', 'important'); 5. 改变class 比如JQ的更改class相关方法 因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式 element.className = 'blue'; element.className += 'blue

1、鼠标事件的主要事件应该是mouseup, mousedown, mousewheel, mousemove, mouseover, moveout。 　　<1>其中mouseup和mousedown组成了单击(click)，双击(dblclick)事件，或许还有拖拽事件，不过我还没有涉及到。表单事件上的foucs,blur事件应该也与之相关。 　　在一类事件里面我们主要关注点击的是鼠标哪个键e.whick/e.button 　　<2>mousewheel是鼠标滚轮事件，与浏览器默认的滚动条事件相关，关注的是滚轮方向是向上还是向下event.wheelDelta/e.detail 　　<3> mousemove是鼠标移动事件，不常用。 　　　　关注的是鼠标位置和鼠标移动方向movementX和 movementY 　　<4>mouseover, moveout是鼠标移入移出事件，在js的冒泡模式中很大的副作用，需要自定义成hover事件，或者使用jq。关注触发的元素target/srcElement和绑定事件的元素currentTarget，以及目标元素toElement/fromElement/ relatedTarget。 2、 事件监听器在js和jq的不同表现 　　Jq兼容了js在不同浏览器的写法，也对一些js的副作用做了改进（mouseenter, mouseleave,