（本文年代久远，请谨慎阅读）今天学习了JQuery的一些基本用法，包括JQuery选择器和JQuery包装集； 从现在开始，要慎重区分DOM对象和JQuery对象，两种对象的方法不同，属性不同，在使用中要特别注意...学习jQuery选择器是学习jQuery最重要的一步....由于该事件在文档就绪后发生，因此把所有其他的 JQUERY事件和函数置于该事件中是非常好的做法。...第一个元素是0.如果是负数，则可以从集合的尾部开始选起。 第二个参数：结束选取自己的位置，如果不指定，则就是本身的结尾。...HellocruelWorld 选择第一个p元素：$("p").slice(0, 1).wrapInner("");//选择的是value值 选择前两个
我们已经使用了带有简单Css选择器的jQuery选取函数:$()。现在是时候深入了解jQuery选择器语法，以及一些提取和扩充选中元素集的方法了。...由于第一个元素的序号是0，因此实际上选中的是第1个、第3个、第5个等元素(jQuery的扩展) :file 匹配元素(jQuery的扩展) :first 匹配列表中的第一个元素...和“:eq(0)”相同(jQuery的扩展) :first-child 匹配的元素是其父节点的第一个子元素。...[1] //第二个元素自身 通过位置提取选区更通用的方法是slice()o jQuery的slice()方法与Array.slice()方法类似:前者接受开始和结束序号...，直到出现匹配指定选择器的第一个祖先元素。
jQuery库包含以下功能： HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities 除此之外，jQuery...jQuery操作思想 jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。...jQuery应用场景 jquery侧重样式操作，比如一些H5的动画页面；需要js来操作页面样式的页面。...敲黑板：jQuery的编程思想是首先编写HTML和CSS的页面展示再操作DOM树，而框架是首先考虑页面的功能，再进行前端的展示，编程思想正好相反。...因为jQuery的诸多局限性导致前端工程师的发展受到了很多的限制，只能做一些表面性的工作，并不能实现前后端分离开发。 而近期出现的Vue，它给前端带来了无限的可能和改变。
一、选择器 ? ?...二、选择器的用法 1、.eq(index)，.get([index]) 对于一个特定结果集，我们想获取到指定index的jQuery对象 $('div').eq(3); //获取结果集中的第四个jQuery...对象 通过类数组下标的获取方式或者get方法获取指定index的DOM对象，也就是我们说的jQuery对象转DOM对象 $('div')[2] //获取第三个dom对象 $('div').get(2)...如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。...11、.is(selector), is(function(index)), is(dom/jqObj) 判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数
目录 使用jQuery js与jQuery代码对比 jQuery选择器：用来选中元素 基本方法 ---- js与jQuery代码对比 jQuery选择器：用来选中元素 基本方法 使用jQuery jQuery...选择器还可以组合多个一起使用，可以分为并集和交集。... 我是第二个盒子 然后我们再来看jQuery代码怎么写，首先 我们要找到第一个div然后在修改它的背景色，那么怎么写呢？...> 我是第一个div中的 第2个span标签 我是第一个div中的 第3个span标签 我是第一个div中的第二个p标签 ...因为外国的第一个是0，第二个是1，第三个是2，那么刚好在这里，奇数 表示的是偶数个，偶数表示的是第奇数个。咋样，感觉刺激不，晕不晕？
JQ简述1 1、 jQuery出现的背景(Javascript遇到的问题) 选择器功能弱 DOM操作繁琐之极 浏览器兼容性不好 动画效果弱 2、什么是 jQuery(概念) jQuery...（javaScriptQuery）JavaScript 代码库 官方网站：http://jquery.com/ 3、目前 jQuery 有三个大版本： 1.x：兼容ie678,使用最为广泛的，官方只做...jQuery具有强大的选择器功能 ?...JQ中常用的选择器 一、基本选择器 1、id选择器 通过元素id获取相关元素 ? 2、元素选择器 获得body内的相关元素，如div、input等 ?...五、表单选择器 匹配所有 input, textarea, select 和 button 元素 ? ---- JQuery的相关API，相关jquery文件，测试源代码已分享之网盘。
[list item 1] :not(selector) //概述 //去除所有与给定时器匹配的元素 //在jQuery1.3中.已经支持复杂选择器了(列如:not(div a)和...,第二个参数为原先的属性值· name描述： 返回文本中所有图像的src属性值· jQuery代码 $("img").attr("src") properties描述： 为所有图像设置src和...key,value 1·属性名称 2·返回属性值的函数·第一个参数为当前元素的索引值·第二个参数为原先的属性值· 参数name描述 选中复选框为,true没选中为false jQuery代码 $...html内容·和个函数 不能用XML文档·但可以用于XHTML文档· //在一个HTML文档中,我们可以使用.html()方法来获取任意一个元素的内容·如果选择匹配多余一个的元素,那么只有第一个匹配元素的...对象,返回jQuery对象,当参数大于等于0时为正向选取,比如0代表第一个，1代表第二个,当参数为负数时为反向选取·比如-1为倒数第一个,具体可以看一下实列 类似的有get(index),不过get
f=html_basic 上运行查看效果 ) 选择器详解和css语法 上次简单地说了选择器，只提到了一个id选择器，选择id=xxx的某元素。...说明 Jquery选择器 选择的元素举例 类似的css语法 选择第一个id=xxx的元素 $("#main") #main { } 选择所有class=xxx...("p:first") (第一个P元素) p:first-child {} 选择第n个某元素 (Jquery中从0开始，css中从1开始) $("p:eq(1)") (第二个...p元素) p:nth-child(2) {} 选择tr元素下的第二个td元素 $("tr td:eq(1)") tr...元素 $(":hidden") input[type='hiden'] {} 这只是我举的一些例子，基本上选择器Jquery和css类似，所以对
现在的网页应用越来越丰富，我们在网页中填写日期和时间已经再也不用手动输入了，而是使用各种各样的日期时间选择控件，大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的，比如今天要分享的这9...1、HTML5移动端外观时尚的日期时间选择控件 之前我们介绍过很多基于jQuery的日期时间选择控件，比如这款基于Bootstrap和jQuery的日历控件和日期选择插件。...的日历控件和日期选择插件 这次我们要来分享一款漂亮而且实用的jQuery日历控件和日期选择插件，而且这款日历控件是基于Boostrap的，外观还不错。...控件有两种模式，一种是日历模式，可以快速定位年份和月份，很方便。另一种是日期选择模式，单击输入框即可弹出日期选择控件，并且支持格式化日期。 ?...日期选择和日历控件，希望会对你有所帮助。
=xxx的div ###子元素选择器 $(“div:first-child”) 匹配是div并且是第一个而且要求元素是子元素 $(“div:last-child”) 匹配是div并且是最后一个而且要求元素是子元素...$("select:first").change(function(){ //删除第二个下拉选里面的内容 //$("select:last").children().remove...var o= $(""); //把城市名称放到option里面 o.text(city); //把创建好的option添加到第二个下拉选里面..."> //给按钮添加点击事件 $("input:last").click(function(){ //在点击事件里面创建一个tr和五个td //5个td分别是nametd agetd...,或者从我这里下,无需积分免费下载:jquery-1.4.2.js
这个效果相信大家在很多地方见到过，我这里运用了Jquery和HTML DOM两种方法结合。这就是我要说的一个重点。 ...我们看Jquery代码：$(".hovertable td").mouseover，选择了class=hovertable的元素的td子元素，为他的mouseover事件绑定一个函数。...第二个函数也一样，mouseout方法是指“鼠标离开”，如果鼠标移开，就把颜色改回以前的颜色。这样就完成了我们这个“变色表格”的制作。...一个选择商品系统 我们继续来强化刚才制作的这个表格。...大家可以看到，children("td:first")，就是取第一个td元素。也就是这一行的第一个格子，再用html()取到其内容，保存到变量name里。
选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery...本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。 一、基本选择器 1. id选择器（指定id元素） 将id="one"的元素背景色设置为黑色。...span元素，将字体颜色设为红色 $('div > span').css('color', '#FF0000'); }); 下面的代码，只有第一个span会变色，第二个span不属于...基本过滤选择器 ——1.1 :first和:last（取第一个元素或最后一个元素） $(document).ready(function () { $('span:first')..."文本的会变色 $('dd:contains("jQuery")').css('color', '#FF0000'); }); 下面的代码，第一个dd会变色 ?
JQuery过滤器 经过一晚上的查找整理，终于整理出一套应该算最全面的JQuery选择过滤器的方法了。所有代码均经过测试。...在所有tr标签中查找id为text11元素的JQuery包装集 var text11_query=$("#text11","tr"); ===================jQuery选择器====...基础选择器 Basics 1.根据标签名进行选择 var input_query=$("input"); 2.根据id值选取 var text11_query=$("#text11"); 3.根据class...值进行选取 var text11_query=$(".text11"); 4.同时选择多个符合条件的JQuery包装集用,号分隔条件 var text_query=$("#text11,.text12...input元素算一，查找所有第奇数个的input元素 var input_query=$("input:even"); 5.从第二个input算起，查找所有第偶数个的input元素 var input_query
//要给div注册一个委托事件,但是最终不是由执行，而是有p执行 //第一个参数：selector:事件最终由谁来执行。...//第二个参数：事件的类型 //第三个参数：函数，要做什么 //1....DELETE jQuery ...找到添加按钮,注册点击事件 $("#btnAdd").on("click", function () { $(' jQuery111 传智播客-前端与移动开发学院...//screenX和screenY 对应屏幕最左上角的值 //clientX和clientY 距离页面左上角的位置（忽视滚动条） //pageX和pageY 距离页面最顶部的左上角的位置
pink"); }); }); <input type="button" id="btn1" value="body中的<em>第一个</em>...2.技术分析 需要使用<em>jquery</em>的<em>选择</em>器(基本<em>选择</em>器、基本过滤<em>选择</em>器) 还需要使用<em>jquery</em>的CSS的方法(css(name,value)) 如果CSS样式已经由美工写好，此时可以使用<em>jquery</em>的...3.步骤分析 第一步：引入<em>jquery</em>的类库 第二步：直接写页面加载函数 第三步：直接使用<em>jquery</em>的<em>选择</em>器(组合<em>选择</em>)拿到需要操作的元素(奇数行<em>和</em>偶数行) 第四步：分别使用CSS的方法(css(name...2.技术分析 需要使用<em>jquery</em>的<em>选择</em>器(id<em>选择</em>器、类<em>选择</em>器) 需要使用<em>jquery</em>的属性操作方法 prop() 3.步骤分析 第一步：引入<em>jquery</em>文件 第二步：书写页面加载函数 第三步：为上面的复选框绑定单击事件...元素节点 第七步：将文本节点添加到元素节点中【使用JQ的文档操作方法】 第八步：获取<em>第二个</em>下拉列表并将option元素节点添加进去 第九步：清除<em>第二个</em>下拉列表的option内容 4.代码实现 <script
对象 Jquery对象和dom对象区分 什么是jquery对象，什么是dom对象?...jquery对象是一个Dom对象的数组 + jquery 的一系列功能函数的总和。 Jquery对象和Dom对象使用区别？...eq()功能一样 first() 选出第一个元素 和:first功能一样 last() 选出最后一个元素 和:last功能一样 hasClass(class) 是否含有class值 filter(expr...> Jquery动画 基本动画 show() 显示隐藏的元素 第一个参数是 动画执行的时候，（单位是毫秒） 第二个参数是...动画执行完成时的回调函数 hide() 隐藏可见的元素 第一个参数是 动画执行的时候，（单位是毫秒） 第二个参数是 动画执行完成时的回调函数 toggle() 可见就隐藏，隐藏状态就显示 第一个参数是
语法：$(js对象)---->jQuery对象 一般地，我们习惯在Jquery对象的变量前面写上$，表示这是JQuery对象 选择器 Jquery提供了九个选择器给我们用来定位HTML控件.....Jquery关于DOM的API 前面使用Jquery的选择器来获取到了HTML标签，单纯得到标签是没有用的。...这里写图片描述 我来补充一下： 第一个参数：表示的是要请求的路径 第二个参数：要把哪些参数带过去给服务器端，需要的是JSON格式的 第三个参数：回调方法，服务器返回给异步对象的时候，会调用该方法 回调方法也有三个参数...-1.8.2.js"> <%--使用异步操作，表单的form和method都不是必须的，如果指定了，还是会根据后面Jquery的方法和参数来决定--%
Introduction to jQuery jQuery 是一个快速、简洁的 JavaScript 框架，是目前最流行的 JavaScript 程序库，它是对 JavaScript 对象和函数的封装...", "#ccc"); jQuery Function 访问和操作 DOM 元素 控制页面样式 对页面事件进行处理 扩展新的 jQuery 插件 与 Ajax 技术完美结合 jQuery 能做的 JavaScript...b = jqObject.get(0); 选择器 基本选择器 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器。..." 和 "#wan" $(".jy,#wan").css("color","red"); // 交集选择器，既是 h3 标签，又拥有 ".jy" 的元素 $("h3.jy").css...src="js/jquery-3.4.1.min.js"> // 第一个 li $("li:first").css("color","red");
选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery...本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。 一、基本选择器 1. id选择器（指定id元素） 将id="one"的元素背景色设置为黑色。...span元素，将字体颜色设为红色 $('div > span').css('color', '#FF0000'); }); 下面的代码，只有第一个span会变色，第二个span不属于...基本过滤选择器 ——1.1 :first和:last（取第一个元素或最后一个元素） $(document).ready(function () { $('span:first')...子元素过滤选择器 ——5.1 :first-child和:last-child :first-child表示第一个子元素，:last-child表示最后一个子元素。
目前我们已经学习了jQuery的选择器，接下带大家一块学习jQuery的DOM操作，jQuery对DOM操作的封装让我们前端开发工作非常简便、简洁、兼容性好。...jQuery的包装对象(jQuery.fn原型对象)提供了attr(name, value)方法可以读取和设置属性内容。...attr(name,value)简单设置属性的方法，接受两个字符串参数，第一个是属性名，第二个是属性值。...jQuery包装对象封装了html()方法用于读取和设置，而且实现了默认隐式迭代机制。...，第二个回调函数。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
