jq选择器

jq 选择器

◇◆丶佛笑我妖孽 提交于 2020-02-13 22:23:31
层次选择器: $('div p');//选取div下的所有的p元素 $('div>p').css('border','1px solid red');//只选取div下的直接子元素 //相邻的元素 $('div ~ p).css('border','1px solid red');与$('div').nextAll('p')等价;//表示div后面的 所有p兄弟元素 $('div ~ *').css('border','1px solid red');//表示div后面的所有兄弟元素 $('div +p').css('border','1px solid red');与$('div').next('p')等价//这种写法表示div后 只找紧挨着的第一个兄弟元素,并且该元素是p。 获得兄弟元素的方法: next(); //当前元素之后的紧邻着的第一个兄弟元素(下一个) nextAll();//当前元素之后的所有兄弟元素 prev();//当前元素之前的紧邻着的兄弟元素(上一个) prevAll();//当前元素之前的所有兄弟元素 siblings();//当前元素的所有兄弟元素 基本过滤选择器: $('p:first')与$('p').first()是等价的。获取所有p元素中的第一个P元素 $('p:last')与$('p').last() $('p:eq(2)'

jQ - 选择器

▼魔方 西西 提交于 2020-02-13 15:33:05
1.jQuery-选择器 1)基本选择器     #id    根据给定的ID匹配一个元素 $("#myDiv");        element   根据给定的元素名匹配所有元素 $("div");    .class   根据给定的类匹配元素 $(".myClass");    *   匹配所有元素 $("*")       selector1,selector2,selectorN   将每一个选择器匹配到的元素合并后一起返回。 $("div,span,p.myClass") 2)层级选择器   ancestor descendant   在给定的祖先元素下匹配所有的后代元素 $("form input")    parent > child    匹配父级元素下的子级元素 $("form > input")    prev + next   匹配所有紧接在 prev 元素后的 next 元素(相当于css中的相邻选择器) $("label + input")   prev ~ siblings   匹配 prev 元素的所有同辈 siblings 元素(相当于css中的兄弟选择器) $("form ~ input") 3)基本过滤选择器    :first   获取第一个元素 $('li:first'); //获取第一个li元素    :last      获取最后个元素

Jquery基础

拜拜、爱过 提交于 2020-02-10 17:06:15
一、定义 Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。 二、JQ入门 1、jq的导入 <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> 2、jq的基本选择器 (1)五种选择器:#id;.class;*所有的标签;select1,select2,selectN几种标签的并集;element元素选择器 (2)案例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基本选择器</title> <link rel="stylesheet" href="../../css/style.css" /> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script> $(function(){ $("#btn1").click(function(){ $("#one").css("background-color","blue"); }); $("#btn2").click(function(){ $("

Jquery

偶尔善良 提交于 2020-02-05 01:46:58
了解Jquery 什么是JQuery jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQueryJavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。简单来说,Jquery是简化版的JS Jquery的优点: 因为jq是轻量级别的框架,大小不大30kb 它有强大的选择器,出色的DOM操作封装 有可靠的事件处理机制 完善的ajax 出色的浏览器兼容性 支持链式操作,隐式迭代 行为层(功能)和结构层(页面元素) 的分离,还支持丰富的插件 Jquery的使用 引入Jquery库: 在使用jquery之前,必须要引入jquery库 <script src = "jquery-3.4.1.min.js"></script>"· 声明Jquery变量: [^$ 声明该变量是jq变量 同时$也是JQuery的简写] var $ 变量名 = 赋值内容; 例如: var $ a = 10 ; jq中顶级对象是 $ 或者jQuery关键字 注意: jQuery中的 $ 和 jQuery关键字 本身同为一个对象 Jquery变量与Dom变量的转换: Dom变量转Jquery变量: var oDiv = document

jq——选择器

ぐ巨炮叔叔 提交于 2020-01-31 05:41:22
jquery:核心,内容 语法:$(select).action(); console.log:控制台日志,将想要的东西打印出来 选择器,事件,DOM,动画,基本操作,插件,ajax 基本选择器 #id:id选择器:$("#id名") element:元素选择器 class:类选择器 selector选择器:将每一个选择器匹配到的元素合并后一起返回 层级选择器 ancestor descendant:表示选取ancestor里面的所有的descendant元素 parent>child:选择parent元素为子元素 +selecter:获取后面一个兄弟 selecter~:获取后面所有兄弟 内容选择器 :contains("text"):匹配含有text内容的元素 :empty:匹配内容为空的元素 :has(selecter):选择包含有selecter的选择器 :parent:选择作为父元素的元素:$("p:parent").css({background:"red"}); $("div:parent").hide(6000);缓慢隐藏 $("div:parent").show(6000);缓慢出现 元素的基本选择器 1 :first:查找第一个子元素 <script type="text/javascript"> $("input").click(function() { $(

jQuery 教程

本小妞迷上赌 提交于 2020-01-27 04:09:38
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 向您的页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。可以通过下面的标记把 jQuery 添加到网页中: < head > < script type = "text/javascript" src = "jquery.js" > < /script > < /head > 请注意, < html > < head > < script type = "text/javascript" src = "jquery.js" > < /script > < script type = "text/javascript" > $( document ) .ready ( function ( ) { $( "button" ) .click ( function ( ) { $( "p" ) .hide (

JQuery学习笔记

☆樱花仙子☆ 提交于 2020-01-18 22:15:14
JQuery基础 1.概念:快速简洁的Javascript框架,简化js开发 jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的 JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less, Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。 2.快速入门 1.版本问题 1.x 兼容ie678,使用最为广泛的,官方只做bug维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 2.x 不兼容ie678,很少人使用,官方只做bug维护,功能不再新增。如果不考虑兼容版本低的浏览器可以使用2.x,最终版本:2.2.4 3.x 不兼容ie678,只支持最新的浏览器。除非特殊要求,一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。 2.JQuery-xxx.js 与 JQuery.min.js JQuery-xxx.js:开发版本。给程序员看的 JQuery.min.js:生产版本,程序使用。 3.使用$()获取,括号里面是选择器 4.js与jq对象的相互转换 1.两者的的对象方法是不通用的 jq -> js:

jQuery全录笔记

≯℡__Kan透↙ 提交于 2020-01-12 04:27:18
jQuery全录笔记 JQuery 入口函数 jQuery选择器 基本选择器 层级选择器 基本筛选选择器 内容筛选选择器 属性筛选选择器 其它选择器(了解) jQuery操作DOM 获取DOM元素相关盒模型属性-位置属性: DOM节点操作 遍历jQuery元素 吸顶导航案例 让页面滚动至指定位置,兼容代码: jQuery控制标签的属性 jQuery获取DOM相关数据的方法 index()获取元素的索引值 JQ操作css 类相关控制函数 jQuery动画效果 显示隐藏动画切换 滑动显示滑动隐藏动画 淡入淡出动画(透明度动画) JQ的自定义动画 JQuery动画列队机制 delay()让动画延迟执行 事件相关方法 快捷方法 专用方法绑定事件(on方法) 事件委托 注销事件 事件对象: event 事件冒泡概念 阻止事件冒泡 阻止标签默认行为 自定义事件 jQuery命名对象冲突问题 jQuery对象与DOM对象互相转换 JQuery 入口函数 < head > < meta charset = " UTF-8 " > < title > Title </ title > < script > //js的入口函数 window . onload = function ( ) { //整个网页资源加载完毕再执行这里的代码 console . log ( "1" ) ; } ; window

JavaWeb学习笔记——JQuery

余生长醉 提交于 2020-01-07 08:46:00
# JQuery 基础: 1. 概念: 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨 是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优 化HTML文档操作、事件处理、动画设计和Ajax交互。 * JavaScript框架:本质上就是一些js文件,封装了js的原生代码而已 2. 快速入门 1. 步骤: 1. 下载JQuery * 目前jQuery有三个大版本: 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护, 功能不再新增。因此一般项目来说,使用1.x版本就可以了, 最终版本:1.12.4 (2016年5月20日) 2.x:不兼容ie678,很少有人使用,官方只做BUG维护, 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x, 最终版本:2.2.4 (2016年5月20日) 3.x:不兼容ie678,只支持最新的浏览器。除非特殊要求, 一般不会使用3.x版本的,很多老的jQuery插件不支持这个版本。 目前该版本是官方主要更新维护的版本。最新版本:3.2.1

jQuery基础【1】

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-26 11:33:23
jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。jQuery 很容易学习。jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性:   •HTML 元素选取      •HTML 元素操作   •CSS 操作         •HTML 事件函数   •JavaScript 特效和动画  •HTML DOM 遍历和修改   •AJAX          •Utilities 1.向页面添加jQuery 库 1 <script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script> 2 <%--使用 Google 的 CDN--%> 3 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs 4 /jquery/1.4.4/jquery.min.js"></script> 5 <%--使用 Microsoft 的 CDN--%> 6 <script type=