jq选择器 | 易学教程

jq的选择器

阅读更多关于 jq的选择器

<body> <h1>一级标题1</h1> <h1 style="display: none">一级标题2</h1> <h1>一级标题3</h1> <ul class="list"> <li>html</li> <li class="red">javascript</li> <li>php</li> <li>css</li> <li class="red">mysql</li> <li>python</li> </ul> <ul class="list"> <li>link1</li> <li></li> <li>link3</li> <li></li> <li>link5</li> <li>link6</li> </ul> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div id="cont">4</div> <div id="cont">5</div> <div id="cont">6</div> <div class="msg"> <div class="xbox"> <h2>二级标题2-1</h2> <h2>二级标题2-2</h2> </div> <h2>二级标题1-1</h2> <h2>二级标题1-2</h2> </div> <span>7</span> <span

jQuery 入门

阅读更多关于 jQuery 入门

jQuery是什么？ jQuery是一个JavaScript常用的工具函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 writer less , do more ----- 用更少的代码，解决更多的需求 jQuery的版本问题目前jQuery有三个大版本，1.xx.xx、 2.xx.xx 和 3.xx.xx 1版本兼容性最高,可以有效的兼容ie浏览器 2版本删除了兼容最低只能兼容到ie9,使代码更加轻量化 3版本重构了底层代码,彻底放弃了ie9以下的浏览器,但是却新增加了很多的使用的方法，并且代码的安全性也增加很多 jQuery的使用我们可以根据需要下载一个指定版本的jquery文件，当然也可以选择使用第三方文件。 js 官方网址: http://jquery.com/例如:<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 百度CDN中的jQuery jQuery 中的核心语法在jQuery当中，jQuery是一个核心方法，用来查找元素从而方便对元素的操作，可以简写为 $ jQuery("#btn").click(function() { alert(123); }); // 上边的代码也可以改为 $("#btn").click

前端jQurey

阅读更多关于前端jQurey

目录 1.楔子 2.jqeury介绍 2.1为什么要使用jQuery 2.2jQuery 的两大特点 2.3什么是 jQuery 3.jQuery的使用 3.1使用 jQuery 的基本步骤 3.2jQuery 的入口函数和 $ 符号 4.js中的DOM对象和 jQuery对象比较（重点，难点） 4.1二者的区别 4.2二者的相互转换 5.jQuery查找标签 5.1基本选择器 5.2筛选器 5.3筛选器方法 6.jQuery操作标签 6.1标签内文本操作 6.2文档标签操作 6.3属性操作 6.4class类属性 6.5val 表单控件value属性 6.6css样式 6.7盒子样式属性 6.8滚动条距离属性 7.jQuery动画效果 7.1显示动画 7.2隐藏动画 7.3开关式显示隐藏动画 7.4滑入和滑出 7.5淡入淡出动画 7.6自定义动画 7.7停止动画 8.jQuery的事件操作 8.1绑定事件 8.2解绑事件 8.3补充一次性事件 8.4事件委托（事件代理） 9.示例 1.楔子需求一：有html标签关系如下，请找到所有的含有a标签的li标签 <div> <ul> <li class="city">北京</li> <li class="city"><a href="">上海</a></li> <li class="city">天津</li> </ul> <

Jquery。

阅读更多关于 Jquery。

Jquery： 1、概念：JavaScript的框架。本质上就是一些JS文件，封装了JS的原生代码而已。 2、快速入门：下载Jquery -导入文件-使用。 3、JQ对象和JS对象的区别。　　* ：Jquery对象操作时更方便。　　* ：Jquery对象和JS对象方法不通用。　　* ：转换：jq-->js：jq对象[ 索引 ] js-->jq : $(js对象） 4、选择器:获取元素（标签）对象。　　1、基本语法：　　　　* 获取元素对象，$("#id") 　　　　* 入口函数，$(function) 效果等同于 window.onload().区别：后者只能定义一次（会覆盖）　　　　* 样式控制，　　2、基本选择器：并集选择器--属性值逗号隔开　　　　* 标签选择器：$("标签名“） * id选择器：$("#id”） * 类选择器: $(".class") 　　3、层级选择器：　　　　*后代选择器：$(“A B”）选择A元素内部的所有B元素。$(“A> B”）: 选择A元素内部的所有　　　　　　　　　　　　　　B子元素　　4、属性选择器：* 属性名称选择器：$("标签[属性名]") 包含指定属性的选择器。　　　　　　　　　　* 属性选择器：$("标签[属性名=‘值’]") 指定属性=指定值的选择器。　　5、表单过滤选择器：可用元素选择器： enable

前端开发—jQuery

阅读更多关于前端开发—jQuery

jquery简介　　 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 注意事项：　　一定要先导入后使用。基础语法：　　$(selector).action() jQuery对象与JS原生对象：查找标签基本选择器 id选择器： $("#id") 标签选择器： $("tagName") class选择器： $(".className") 配合使用： $("div.c1") // 找到有c1 class类的div标签所有元素选择器： $("*") 组合选择器： $("#id, .className, tagName") 层级选择器： x和y可以为任意选择器 $("x y");// x的所有后代y（子子孙孙） $("x > y");// x的所有儿子y（儿子） $("x + y")// 找到所有紧挨在x后面的y $("x ~ y")// x之后所有的兄弟y 基本筛选器： :first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数

JQuery

阅读更多关于 JQuery

概念 jquery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码,提拱一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和AJAX交互。 JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已快速入门下载Jquery：目前Jquery有三大版本 1.X:兼容ie678,使用最为广泛的，官方只做BUG维护 2.X:不兼容ie678,很少使用，官方只做BUG维护 3.X:不兼容ie678,只支持最新的浏览器。除特殊要求。基本不会使用3.x版本注意：jquery-xxx.js与query-xxx-min.js区别 1､Jquery-xxx.js:开发版本。给程序员看的，有良好的缩进和注释，文件体积大一些 2､Jquery-xxx-min.js：生产版本。程序中使用。没有缩进。文件体积会小一些导入jquery的js文件:导入jquery-xxx-min.js文件使用 Jquery对象和JS对象区别与转换 1､Jquery对象在操作时，更加方便 2､Jquery对象和JS对象方法不通用的 3､两者相互转换 jq – js jq对象[索引] 或者 jq对象.get(索引) js – jq $(js对象) 选择器选择器具有相似特征的元素（标签）基础语法学习 1､事件绑定 2､入口函数 3

jquery

阅读更多关于 jquery

关于jQuery的入口函数：　　　　　　$(function () { } ) ( ) jquery只有两种查找方式　　　　　　01 按选择器查找 $('任何css选择器都支持，不用担心兼容性') 　　　　　　02 按节点间关系查找 //按节点间关系查找父子关系 .parentNode() -----> .parent() .children() -----> .children("可以写选择器") 在直接子元素中查找 // jq特有 .find('选择器') 在所有后代中查找符合条件的元素 .firstElementChild() -----> .children(":first-child") .lastElementChild() -----> .children(":last-child") 兄弟关系 .previosElementSibling() -----> .prev() 前一个 .nextElementSibling() -----> .next() 下一个 // .prevAll("选择器") 在当前元素之前的所有兄弟中查找，不写选择器表示查找元素之前的所有兄弟（好评差评） // .next("选择器") 在当前元素之后的所有兄弟中查找，不写选择器表示查找元素之后的所有兄弟 // siblings("选择器") 选择除了自己之外的所有兄弟，不分前后，

前端

阅读更多关于前端

内容回顾 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

阅读更多关于前端jquery

jquery介绍 jquery的优势 1.js代码对浏览器的兼容性做的更好了 2.隐式循环 3.链式操作 jquery是什么? 高度封装了js代码的模块封装了dom节点封装了操作dom节点的简便方法 jquery的导入 https://code.jquery.com/jquery-3.4.1.js 未压缩版 https://code.jquery.com/jquery-3.4.1.min.js 压缩版下载:保存在本地文件里引入:<script src="jquery3.4.1.min.js"></script> $和jQuery的关系 $就是jQuery名字的简写,实际上是一回事儿 jquery对象和dom对象的关系和转换 jquery封装了dom dom转成jquery : jQuery(dom对象) $(dom对象) jquery转成dom : jq对象[index] jquery选择器基础选择器 #id选择器 .类选择器标签选择器 *通用选择器 $('#city') k.fn.init [ul#city]0: ul#citylength: 1__proto__: Object(0) $('.box') k.fn.init [div.box, prevObject: k.fn.init(1)]0: div.boxlength: 1prevObject: k.fn

jQuery之选择器

阅读更多关于 jQuery之选择器

jQuery简述　　jQuery是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。　　js库是把我们常用的功能放到一个单独的文件中，我们用的时候，直接引用到页面里即可。　　官网： http://jquery.com/ 　　汉化： http://www.css88.com/jqapi-1.9/ 基本使用： js和jquery对象互转　　js--->jquery 　　　　$(js对象) 　　jquery--->js 　　　　jq对象[0] 　　　　jq对象.get(0) CSS基本选择器 jQuery 的基本选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="box"> <p id="a">大壮</p> <p>日</p> <p>天</p> </div> <p>热狗</p> <script src="jquery-3.3.1.js"></script> <script> $(function () { $('.box>p').css('color','red'); //近邻下一个兄弟js对象 console.log($('#a+p')); }) </script> </body>

订阅 jq选择器