jq选择器

jQuery基础知识笔记 (一)

橙三吉。 提交于 2020-03-17 09:36:06
jQuery官网: https://jquery.com/ 在线API: https://api.jquery.com/ jQuery UI: https://jqueryui.com/ API:提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码 高版本的jQuery不支持IE浏览器,注意匹配 1. 框架库和jQuery介绍 jQuery就是JavaScript语法写的一些函数类,内部仍然是调用JS实现的,所以并不是代替JS。可以说jQuery本身就是一堆JS函数,jQuery就是一个JS的函数库 2. jQuery文件使用 (1)为什么要学习jQuery? DOM中一个简单的功能需要大量的代码;兼容问题很多;代码容错性很差;window.onload也只能有一个 (2)jQuery好处:解决浏览器兼容性问题,体积小,链式编程,隐式迭代,插件丰富,开源,免费 (例题)点击按钮出现一个蓝色小方块 < script > //Dom中写法 window . onload = function ( ) { document . getElementById ( "btn" ) . onclick = function ( ) { var divObj = document . getElementById ( "dv" ) ; divObj . style .

jQuery常用操作

时光怂恿深爱的人放手 提交于 2020-03-17 04:45:06
jQuery   jQuery是一个轻量级的JS库,是一个被封装好的JS文件,提供了更为简便的元素操作方式,jQuery封装了DOM。 使用jQuery 引入jQuery文件   <scrtipt src='jquery-1.11.3.js'> </script>   注意:引入必须放在其他jQuery操作之前。 jQuery对象   jQuery对象是由jQuery对页面元素进行封装后的一种体现   jQuery中所提供的所有操作都只针对jQuery对象,其他对象(DOM)无法使用 工厂函数 -- $()   想要获取jQuery对象,则必须使用工厂函数$()   在$()中允许传递一个选择器/DOM对象作为参数,$()能够将选择器和DOM对象全部封装成jQuery对象再进行返回 例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery演示</title> </head> <body> <div id="main"> id是mian的div元素 </div> <button onclick="bClick()">获取元素</button> <script src="jquery-1.11.3.js"></script> <script> function bClick() {

Jquery知识点总结(一)

人走茶凉 提交于 2020-03-16 03:50:36
jquer对象和DOM对象互转 dom---> jquery 通过$包装, var a = $(dom) jQuery---> dom jQuery本身是一个数组 $ (dom)[0] 页面加载完成 两种方式的不同 $( function(){} ); -- 可以顺序执行不同的内容 window.onload = function(){} --前一个执行内容将被最后加载函数覆盖 JQ的函数: 属性操作函数 setAttribute(属性名,属性值) getArrtibute(属性名) JQ: attr(属性名,属性值)设置属性 attr(属性名) 获取属性值 样式: 改变样式属性 $("#one").attr("class","second"); 增加样式 $("#one").addClass("second"); 删除样式 $("#one").removeClass(); 样式转换 $("#one").toggleClass("second"); jquer的子节点可以自杀 $("#bj").remove(); 父节点可以清空所有子节点 $("#city").empty(); //把数组中的dom对象包装成jquery对象 alert($($inputs[i]).val()); 全选全不选 $("input[calss='itemSelect']").prop("checked"

笔记-JavaWeb学习之旅16

拟墨画扇 提交于 2020-03-08 16:57:50
增强对象的功能 动态代理:在内存中形成代理类 实现步骤: 代理对象和真实对象实现相同的接口 代理对象 = Proxy.newProxyInstance(); 使用代理对象调用真实对象的方法 增强方法 增强方式: 增强参数列表 增强返回值类型 增强方法体执行逻辑 package com.data.proxy; //实现动态代理需要真实对象和代理对象具有相同的接口 //定义一个卖电脑的接口 public interface SaleComputer { public String sale(double money); public void show(); } package com.data.proxy; //真实类 //真实类对应真实对象,真实对象被代理对象代理,用来增强方法 public class Lenovo implements SaleComputer{ @Override public void show() { System.out.println("展示电脑...."); } @Override public String sale(double money) { System.out.println("花了"+money+"元买了一台联想电脑"); return "联想电脑"; } } package com.data.proxy; import java

JQuery 总结(1) 选择器的使用

落花浮王杯 提交于 2020-02-26 05:08:04
一 注意: 1.DOM对象:通过原生js获取的DOm对象(DOm树上的节点就是,比如<li></li>) 2.jQuery对象:通过jQuery 选择器获取的 jQuery对象智能用jQuery中封装的方法,不能使用DOm对象的方法 同理 DOm也是一样 二 选择器相互更换: 1.DOM转换成JQ对象 $(“DOM对象”) 2.JQ对象转换成DOM对象 $("div")[index] 或者 $("div").get(index) 三 基本选择器 1. #id > $("#id名"), 2. .class > $(".class名") 3. element标签 > $("div") 4.群组选择器 > $("div,p") 5.* > $("*") 四 后代选择器 子元素选择器 紧邻的同辈选择器 1.$("#id li"), 这个是所有的后代 2. $("#id > li"), 这个是只查到儿子为止 3. $("#id + p ") 紧挨着#id 后面的p元素 4. $("#id ~ p ") 在#id 后面的同辈兄弟p元素 五.表单元素选择器 <form> <input type="text" /> <input type="checkbox"checked /> 复选框 <input type="radio" /> 单选框 <input type="image" />

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

时间秒杀一切 提交于 2020-02-26 05:07:43
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

前端

旧街凉风 提交于 2020-02-26 04:49:57
内容回顾 DOM事件 事件的绑定 方式一 行内绑定<a onclick="函数名()"></a>function 函数名(){ 函数体}​方式二 匿名函数绑定某对象.onclick = function(){ 函数体}​方式三 函数名绑定某对象.onclick = 函数名function 函数名(){ 函数体} 常见事件 onclick() 单机事件 onmouseover() 鼠标悬浮onmouseout() 鼠标离开onscroll() 滚动轴移动onChange() 文本区域内内容变化onfocus() 获取焦点onblur() 失去焦点 BOM 和浏览器的操作相关的 window对象 定时器方法setInterval("fn()",n) 每隔n毫秒就执行fn函数一次setTimeout("fn()",n) n毫秒之后执行fn函数一次​innerHeight 浏览器显示网页内部内容的高度,会随着浏览器窗口变化innerWidth 浏览器显示网页内部内容的宽度,会随着浏览器窗口变化 location对象 地址栏 属性 :href查看页面的url连接,href = '新的url',跳转到新的页面​方法:reload()刷新页面 history对象 history.back() go(-1) //回到上一页history.go(0) //刷新history.forward() go

前端——jQuery

会有一股神秘感。 提交于 2020-02-20 13:04:02
  jQuery是JS的工具库,对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装, 使用 . 链式写法 , 提供更完善,更便捷的方法。   再使用jquery之前,我们需要先引入jquery文件,才能使用jquery语法,导入jQ文件的方法有两种。 从 jquery.com 下载 jQuery 库,本地导入(比较常用) 从 CDN(内容分发网络)中载入 jQuery,Staticfile CDN、百度、新浪、谷歌和微软的服务器都存有 jQuery 。 <head> // 本地导入 <script src="js/jquery.min.js"></script> // 从 Staticfile CDN 导入 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> // 百度CDN <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </head> 注意:使用CDN有一个很大的优势,那就是许多用户在访问其他站点时,已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN

jQuery初学者笔记 一

≡放荡痞女 提交于 2020-02-14 20:32:00
jQuery初学者笔记 一 Mirror王宇阳 by jQuery语法 jQuery语法是通过选取HTML元素,并对选取的元素进行操作 基础语法: 所有jQuery语句用“$”符号开始 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击消失</p> <p>点击消失</p> <script src="jq/jquery-3.4.1.min.js"></script> <script> $(document).ready(function(){ //固定的jQ开头 $("p").click(function(){ // 选取p标签,并绑定clisk事件 $(this).hide(); //事件触发使用hide()方法(隐藏当前标签属性) }) }) </script> </body> </html> jQuery函数位于一个document ready函数中,我们需要在js中加载该函数文档 // jQuery入口函数 $(document).ready(function(){ //jQuery代码 }); /*******************************/ $(function(){ //jQuery代码 }); 选择器语法:

JQ选择器

点点圈 提交于 2020-02-14 17:40:54
1.#id 查找ID 为myDIV的元素 <body> <div class="mydiv"><p> I am little D!</p></div> <div class="opl"> <p>小弟</p> </div> <script src="../js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> console.log($(".mydiv")); </script> </body> 2.element 用于搜索的元素 指向DOM节点的标签名 <body> <div>div</div> <div>div2</div> <span>span</span> <script src="../js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> console.log($("div")); </script> </body> 3. .class 获取类 <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span>