JQ eq和find

2024-08-27

jQuery find()方法 eq()方法

find() 使用: 返回 <ul> 后代中所有的 <span> 元素: $(document).ready(function(){$("ul").find("span").css({"color":"red","border":"2px solid red"});}); eq() 使用: <ul> <li>list item 1</

jQuery简单介绍 jq是js的插件库,说白了,jq就是一个js文件凡事能用jq实现的,js都能实现.但是js能实现的,jq不一定能够实现 jq的引入 http://www.bootcdn.cn 引入jq//https://www.bootcdn.cn/jquery/ http://jquery.cuishifeng.cn 中文 http://api.jquery.com 官网 CDN引入: 本地保存(路径) alert能够成功弹出表示jq引入成功 <body> <div id=

css3 位置选择器类似jq的:eq(0)

JQ使用 :eq(位置),可以选择第几个元素 CSS3里面新增了一个用法,:nth-child(位置) 可实现和JQ同样的功能需要注意的是jq第一个是从0开始,CSS的第一个是从1开始

jq对象才能使用jq方法，$(".a").eq(0) 和 $(”.a“)[0]

<a class="a"></a> <a class="a"></a> <a class="a"></a> $('.a') // 选择了3个a,都是jq对象(可以用jq的属性.方法) $('.a').eq(1) // 选择了第二个a,是jq对象(不可以使用dom属性方法,可以用jq的属性.方法) $('.a')[1] // 选择了第二个a,是dom对象(可以使用dom属性

JQ first-child与:first的区别以及nth-child(index)与eq(index)的区别

1.first-child和:first区别 first-child 是指选取每个父元素的第一个子元素如$("div:first-child")指每个父级里的第一个div孩子 :first 是指选取第一个元素如$("li:first")值得是整体第一个li标签两个在数量上有很大区别,first-child会检测到每一个有子集的元素里面的第一个符合的元素,而:first只全文的第一个符合的元素 2.nth-child(index)与eq(index)的区别这

jq中get()和eq()的区别

一直弄混淆的获取元素的方法,现整理一下: :eq(index) 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 如:$("p:eq(1)").css("background-color","#B2E0FF");改变第二个q标签背景色 .eq(index) 方法选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是

JQ中get()与eq()的区别

.eq() : 减少匹配元素的集合,根据index索引值,精确指定索引对象. .get() : 通过检索匹配jQuery对象得到对应的DOM元素. 同样是返回元素,那么eq与get有什么区别呢? eq返回的是一个jQuery对象,get返回的是一个DOM对象.举个例子: $( "li" ).get( 0 ).css("color", "red"); //错误 $( "li" ).eq( 0 ).css("color&

jq 根据值的正负变色

效果图这样: 意思就是根据最后的百分值变色,值为负变绿色,值为正变红色. 所以只要取到那个标签里的值了,就能根据正负的判断决定颜色. 我的html部分这样: /*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class="pro_detail">  <ul> <li>001</li> <li>椰香奶茶<

jq 个性的隔行变色

效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class="pro_detail">  <ul> <li>001</li> <li>椰香奶茶</li> <li>￥ 10.00</li> <li>￥ 10.50&

js,jq,css选择器

js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChile; //获得s的最后一个子节点 css选择器: 基础选择器 * 通用元素选择器,匹配页面任

jq倾斜的动画导航菜单

效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器完整源代码,保存到HTML文件打开也可查看效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

JQ基础之选择器

JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器. ID选择器 $('#one') ( '#'代表ID ) CLASS选择器 $('.two') ( '.'代表类 ) 元素选择器 $('ul') ( 选取'ul'标签 ) $('#one>span') 属性选择器 $('[class]') ( 所有具有'class'属性的元素 ) $('li[class]') ( 选中'li'下的具有'class

jqueyr eq get用法

相信大部份人都会把这2个的用法搞错.仔细查看下API文档就可以知道.eq返回的是一个jquery对象,get返回的是一个html 对象数组.举个例子: <p style="color:yellow">绯雨</p> 使用eq来获得第一个p标签的color值: $("p").eq(0).css("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方法css 使用get来获得第一个p标签的color值:

JQ第一天

1.jQ中最常用对象是$对象,$是jQ的简写.只有将普通的Dom对象封装成jQ对象,才能使用其中方法,jQuery(document).ready()是允许多个的,$(fn)与$(document).ready(fn);等价 2.$.map(array,callback(element,index)); 对于数组array中的每个元素,调用callback()函数,最终返回一个新的数组.原数组不变. $.each(arr,function(k,ele))//k--建 ele--值 3.链式编程

一个jQ版大图滚动

难得周末能休息,也是越发的代码难受,手就想敲点东西,这不闲着无聊敲了一个Jq版的大图滚动,不足之处大家批评指正: 运作环境win7,代码编辑器是:sublime; 我把源码复制了一下, <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margi

JQ对象到底是什么

jQuery对象是什么,举个例子,$('#id') 返回的就是jQuery对象,这个东西是整个jQuery的核心所在,所以我先来分析它. var jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }; ...

html/京东项目/京东网页高仿/js/jq/css/java web/

登录部分HTML+CSS: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>京东-欢迎登录</title> <link rel="shortcut icon" href="favicon.ico"/> <style type=

jq 版的tab切换

ta切换是在前端中非常常见的一种效果,网上的效果很多.但是我觉得下面这种方法最好,把tab效果封装成一个函数 tabs,这个函数要配合jq使用. var tabs = function (tab, con) { tab.click(function () { var index = tab.index(this); tab.removeClass('active'); $(this).addClass('active'); con.hide(); con.eq(index).show(); })

用JQ仿造礼德财富网的图片查看器

现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互.滥用插件,像今天要仿造的图片查看器,礼德财富也是直接套用的一款叫fancybox的插件: 个人觉得一名合格的前端还是要少用外部插件,减少代码冗余,也方便自己维护(毕竟自己的代码自己一清二楚). 今天咱用JQ来做个属于我们自己的图片查看器,刚好我项目也要用到. 还是老样子,大家可以到我的Github

用JQ仿造百度书籍预售页面的单屏滚页效果

今天的项目需要做到一个介绍页面,我主动提出走单屏滚页的风格,毕竟交互性好,逼格也高,具体效果可以参照百度知道书籍预售页面. 其实现效果就大概是这样的: 还是老样子,所有步骤文件可以从我的Github上下载. 原理滚页的方式肯定是通过animate来实现,由被点击的a标签索引来确定要从哪一页滚至哪一页的位置.同时也需要一个全局变量来存储当前页面的索引,这样方便我们通过鼠标滚轮事件来滚页. 另外这里也调用了回调事件,包括点击时被激活页面的回调,以及其它非激活页面的回调,为了提高复用我们会动用 ev

jQ插件--时间线插件和拖拽API

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: 点击查看DEMO:打开 <!-- //设置内容; window.onWebMessage( '{"ty