• 关于 jQuery选择器() 的搜索结果

回答

jQuery 的实现原理 var jQuery = function(selector, context) { return new jQuery.fn.init(selector, context); }; 1)jQuery 采用的是构造函数模式进行开发的,jQuery 是一个类 2)上面说的常用的方法(CSS、属性、筛选、事件、动画、文档处理)都是定义在 jQuery.prototype 上的 ->只有 jQuery 的实例才能使用这些方法 2、选择器/筛选 1)我们的选择器其实就是创造 jQuery 类的一个实例 ->获取页面中元素用的 jQuery(); -> $() $()就是 jQuery 的选择器,就是创建 jQuery 这个类的一个实例 2)执行的时候需要传递两个参数 selector -> 选择器的类型 一般都是string类型 context -> 获取的上下文 第二个参数一般不传,不传默认为document $("#div1") $(".box") $("#div1 span") -> $("span", div1) console.log($("#div1 span:first")) 3)通过选择器获取的是一个 jQuery 类的实例->jQuery 对象 console. log($( #div1")) [jQuery对象的私有的属性] $("#div1")[0] -> div1这个元素对象 S(#div1").selector -> "#div1" S(#div1").context -> document ("#div1").length-)1 获取元素的个数 [jQuery对象的公有的属性] jQuery.prototype 4)我们获取的是 jQuery 对象(他是 jQuery 的实例)不是我们的原生 js 对象 jQuery:$("#div1") JS:document.getElementById("div1") 原生JS的对象不能直接的使用jQuery的方法,同理,jQuery的对象也不能使用原生js的方法 $("#div1").className = "box"; no document.getElementById("div1").addClass(); 5)互相转化 var $oDiv =$("#div1") var oDiv = document.getElementById("div1") Js->jQuery: $(oDiv).addClass() jQuery->Js: $oDiv[o]/ $oDiv.get(0) 3、核心 $(document).ready(function() { //HTML结构加载完成就执行这里的代码 }); $(function() {}); each $("selector").each( function(){})遍历获取的这些元素 jQuery.prototype $.each(ary)遍历数组中的每一项 jQuery.each 我们的 jQuery 不仅仅是一个类(在它的原型上定义了很多的方法,每一个 jQuery 的实例都可以使用这些方法),它还是一个普通的对象,在 jQuery 本身的属性中还增加了一系列的方法:Ajax、each、工具 $.unique(ary) $.ajax() $.extend()->把 jQuery当做一个对象,给它扩展属性->完善类库 $.fn.extend()->在 jQuery的原型上扩展属性和方法->编写 jQuery插件 $.extend({ a: function(){ } }) $.a() $.fn.extend({ b: function(){ } }) $().b()

茶什i 2019-12-02 03:21:18 0 浏览量 回答数 0

回答

1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以 用来代替live()函数,live()函数在1.9版本已经删除;3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些,想了解具体情况,请戳这: http://kb.cnblogs.com/page/94469/4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+; 

a123456678 2019-12-02 02:09:49 0 浏览量 回答数 0

回答

自版本1.3之后,jQuery采用了Sizzle库,与之前的版本在选择器引擎上的表现形式有很大的不同。它用“从左至右”的模型代替了“从右至左”的模型。确保最右的选择器具体些,而左边的选择器选择范围较宽泛些。$("#one .tao") ,违背了上面的原则。 var a = ($(".two"),$("#one")); 楼主写错了吧,应该是: var a = ($(".two",$("#one")); 吧。这段代码的逻辑是: 通过$("#one")找对对应的DOM元素(封装成jquery对象,假如命名为A)$(".two",$("#one")): 以A作为上下文(在A对应的DOM元素内查找),构造新的jquery对象,对象里DOM元素的class值包含 .two这种方式应该是最优的吧,就相当于:`var ele = document.getElementById('one');var eles = document.getElementsByClassName('two'); `//注意代码的兼容性用jquery写就是:$('#one').find('.two');

小旋风柴进 2019-12-02 02:24:18 0 浏览量 回答数 0

新用户福利专场,云服务器ECS低至96.9元/年

新用户福利专场,云服务器ECS低至96.9元/年

回答

1 jQuery(selector,context) 简要的说是:接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。 默认情况下,对匹配元素的查找都是从根元素ducument对象开始,也就是说查找范围是整棵文档树。但是如果给定了上下文context,则在指定上下文中查找 html <span>body span</span> <span>body span</span> <span>body span</span> <div class="wrap"> <span>wrap span</span> <span>wrap span</span> <span>wrap span</span> </div> js $('span').css('background-color','red');//所有的span都会变红 $('span','.wrap').css('background-color','red');//只有.wrap中的span会变红 2 jQuery(html,ownerDocument) 、jQuery(html,props) 用所提供的html代码创建DOM元素 对于jQuery(html,ownerDocument),参数html可以是单标签或者是多层标签之间的嵌套。第二个参数用于创建新DOM元素的文档对象,如果不传入则默认为当前的文档对象。 //单标签 两种方式都可以往body中插入div /* * 1 $('<div>').appendTo('body'); * 2 $('<div></div>').appendTo('body'); */ // 多标签嵌套 $('<div><span>dfsg</span></div>').appendTo('body'); 另外:对于单标签,jQuery(html,props),props是一个包含属性和事件的普通的对象,用法如下。(该用法有待考证,请知道这一用法的童鞋告知一下,感激不尽) $('<div>我是div</div>',{ title:'我是新的div', click:function(){ $(this).css('color','red'); console.log(this); } }).appendTo('body'); 3 jQuery(element or elementsArray) 如果传入一个DOM元素或者是DOM元素的数组,则把DOM元素封装到jQuery对象中并返回。 html <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> js // 传入DOM元素 $('li').each(function(index,ele){ $(ele).on('click',function(){ $(this).css('background','red');//这里的DOM元素就是this }) }) //传入DOM数组 var aLi=document.getElementsByTagName('li'); aLi=[].slice.call(aLi);//集合转数组 var $aLi=$(aLi); $aLi.html('我是jQuery对象');//所有的li的内容都变成'我是jQuery对象' 4 jQuery(object) 如果传入的是一个object对象,则把该对象封装到jQuery对象中并返回。 var obj={name:'谦龙'}; var $obj=$(obj);//封装成jQuery对象 //绑定自定义事件 $obj.on('say',function(){ console.log(this.name)//输出谦龙 }); $obj.trigger('say'); 5 jQuery(callback) 当传进去的参数是函数的时候,则在document对象上绑定一个ready事件监听函数,当DOM结构加载完成的时候执行 $(function(){ }) //以上代码和下面的效果是一样的 $(document).ready(function(){ ...//代码 }) 6 jQuery(jQuery object) 当传进去的参数是一个jQuery对象的时候,则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素 var aLi=$('li'); var copyLi=$(aLi);//创建一个aLi的副本 console.log(aLi); console.log(copyLi); console.log(copyLi===aLi); 图片描述 7 jQuery() 如果不传入任何的参数,则返回一个空的jQuery对象,属性length为0 注意这个功能可以用来复用jQuery对象,例如可以创建一个空的jQuery对象,然后在需要的时候先手动修改其中的元素,然后在调用jQuery方法。从而避免重复创建jQuery对象。

问问小秘 2020-04-29 16:39:03 0 浏览量 回答数 0

回答

你指定了上下文,肯定是在context下找了,你看源代码就清楚了 var pos = jQuery.expr.match.POS.test( selectors ) ? jQuery( selectors, context || this.context ) : null; return this.map(function( i, cur ) { while ( cur && cur.ownerDocument && cur !== context ) { if ( pos ? pos.index(cur) > -1 : jQuery(cur).is(selectors) ) { return cur; } cur = cur.parentNode; } return null; });看了下源代码,jQuery.expr.match.POS内容为/:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*)\))?(?=[^-]|$)(?![^\[]*\])(?![^\(]*\))/,意思就是selectors为这些选择器的时候才会在context下找(不包括context,看while中cur !== context 才会return DOM,否则是null),否则就是排除你传入的context,你看map里面的while语句 while ( cur && cur.ownerDocument && cur !== context )

吴孟桥 2019-12-02 02:32:30 0 浏览量 回答数 0

回答

图片用属性记录下班级和学号,如下 <img cls="一班" num="1号"/> 然后jquery $(function () { $('班级checkbox 复选框选择器,学号checkbox 复选框选择器').click(function () { var clscb = ',' + $('班级checkbox 复选框选择器:checked').map(function () { return this.value }).get().join(',') + ',' var numcb = ',' + $('学号checkbox 复选框选择器:checked').map(function () { return this.value }).get().join(',') + ',' $('图片选择器').hide().each(function () { if (clscb == ',,' && numcb == ',,') this.style.display = ''//没有选中任何 else { var cls = this.getAttribute('cls') var num = this.getAttribute('num') var show = true; if (clscb != ',,' && clscb.indexOf(',' + cls + ',') == -1) show = false; if (show && numcb != ',,' && numcb.indexOf(',' + num + ',') == -1) show = false; if (show) this.style.display = ''; } }) }); });

吴孟桥 2019-12-02 02:34:17 0 浏览量 回答数 0

问题

jquery的这个this.find(":not(:has(:first))")什么意思?

小旋风柴进 2019-12-01 19:28:26 894 浏览量 回答数 1

回答

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.myclass") 层叠选择器: $("form input") 选择所有的form元素中的input元素 $("#main > *") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器: $("tr:first") 选择所有tr元素的第一个 $("tr:last") 选择所有tr元素的最后一个 $("input:not(:checked) + span") 过滤掉:checked的选择器的所有的input元素 $("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) $("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素 $("td:eq(2)") 选择所有的td元素中序号为2的那个td元素 $("td:gt(4)") 选择td元素中序号大于4的所有td元素 $("td:ll(4)") 选择td元素中序号小于4的所有的td元素 $(":header") $("div:animated") 内容过滤选择器: $("div:contains('John')") 选择所有div中含有John文本的元素 $("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组 $("div:has(p)") 选择所有含有p标签的div元素 $("td:parent") 选择所有的以td为父节点的元素数组 可视化过滤选择器: $("div:hidden") 选择所有的被hidden的div元素 $("div:visible") 选择所有的可视化的div元素 属性过滤选择器: $("div[id]") 选择所有含有id属性的div元素 $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素 $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 $("input[name^='news']") 选择所有的name属性以'news'开头的input元素 $("input[name$='news']") 选择所有的name属性以'news'结尾的input元素 $("input[name*='man']") 选择所有的name属性包含'news'的input元素 $("input[id][name$='man']") 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 子元素过滤选择器: $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") $("div span:first-child") 返回所有的div元素的第一个子节点的数组 $("div span:last-child") 返回所有的div元素的最后一个节点的数组 $("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组 表单元素选择器: $(":input") 选择所有的表单输入元素,包括input, textarea, select 和 button $(":text") 选择所有的text input元素 $(":password") 选择所有的password input元素 $(":radio") 选择所有的radio input元素 $(":checkbox") 选择所有的checkbox input元素 $(":submit") 选择所有的submit input元素 $(":image") 选择所有的image input元素 $(":reset") 选择所有的reset input元素 $(":button") 选择所有的button input元素 $(":file") 选择所有的file input元素 $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域 表单元素过滤选择器: $(":enabled") 选择所有的可操作的表单元素 $(":disabled") 选择所有的不可操作的表单元素 $(":checked") 选择所有的被checked的表单元素 $("select option:selected") 选择所有的select 的子元素中被selected的元素 选取一个 name 为”S_03_22″的input text框的上一个td的text值 $(”input[@ name =S_03_22]“).parent().prev().text() 名字以”S_”开始,并且不是以”_R”结尾的 $(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 一个名为 radio_01的radio所选的值 $(”input[@ name =radio_01][@checked]“).val(); $("A B") 查找A元素下面的所有子节点,包括非直接子节点 $("A>B") 查找A元素下面的直接子节点 $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点 $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 1. $("A B") 查找A元素下面的所有子节点,包括非直接子节点 例子:找到表单中所有的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form input") 结果: [ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子节点 例子:匹配表单中所有的子级input元素。 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form > input") 结果: [ <input name="name" /> ] 3. $("A+B") 查找A元素后面的兄弟节点,包括非直接子节点 例子:匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("label + input") 结果: [ <input name="name" />, <input name="newsletter" /> ] 4. $("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点 例子:找到所有与表单同辈的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form ~ input") 结果: [ <input name="none" /> ]

小旋风柴进 2019-12-02 02:13:02 0 浏览量 回答数 0

回答

jQuery本身不直接提供这样的方法,本身只有visible去判断元素是否可见,但对漂移到屏幕外或行高设的非常小无能为力。一些sticky插件是通过计算offset去确定元素位置/是否在屏幕里。你需要自己写函数或者直接增强jQuery的选择器,我最近几个月没写Javascript,没办法马上给你代码。但从网上摘抄了一段,原理都一样。//增强jQuery选择器中筛选器的部分、增加一个名为cheat的筛选项 //jQuery选择器中的$('#id:first'), :后面的部分就这么实现的 $.expr.filters.cheat = function(element) { return ( //如果元素不在屏幕可见区域返回true (element.offsetLeft + element.offsetWidth) < 0 || (element.offsetTop + element.offsetHeight) < 0 || (element.offsetLeft > window.innerWidth || element.offsetTop > window.innerHeight) ); }; 上面的仅仅判断了是否元素在可见区域中,如果滚动出去或CSS改变margin负数很大(移出去)就会返回true,只是很简单的判断,你可以根据需求继续加条件,例如检查CSS中的某一项是否小于某个数值(Number(element.css('font-size').replace(/px$/, '')) < 2)。 上面的增强,可以用以下几种方式使用,假设元素#cool位置在屏幕可见位置内。 $('#cool:cheat'); //选不到到该元素 $('#cool').is(':cheat'); //false $('#cool').not(':cheat'); //true需要有点Javascript基础,抱歉上次回答太过情绪化,做学文的研究精神应该与其他无关。

a123456678 2019-12-02 02:21:19 0 浏览量 回答数 0

回答

jQuery本身不直接提供这样的方法,本身只有visible去判断元素是否可见,但对漂移到屏幕外或行高设的非常小无能为力。一些sticky插件是通过计算offset去确定元素位置/是否在屏幕里。你需要自己写函数或者直接增强jQuery的选择器,我最近几个月没写Javascript,没办法马上给你代码。但从网上摘抄了一段,原理都一样。//增强jQuery选择器中筛选器的部分、增加一个名为cheat的筛选项 //jQuery选择器中的$('#id:first'), :后面的部分就这么实现的 $.expr.filters.cheat = function(element) { return ( //如果元素不在屏幕可见区域返回true (element.offsetLeft + element.offsetWidth) < 0 || (element.offsetTop + element.offsetHeight) < 0 || (element.offsetLeft > window.innerWidth || element.offsetTop > window.innerHeight) ); };上面的仅仅判断了是否元素在可见区域中,如果滚动出去或CSS改变margin负数很大(移出去)就会返回true,只是很简单的判断,你可以根据需求继续加条件,例如检查CSS中的某一项是否小于某个数值(Number(element.css('font-size').replace(/px$/, '')) < 2)。上面的增强,可以用以下几种方式使用,假设元素#cool位置在屏幕可见位置内。$('#cool:cheat'); //选不到到该元素 $('#cool').is(':cheat'); //false $('#cool').not(':cheat'); //true需要有点Javascript基础,抱歉上次回答太过情绪化,做学文的研究精神应该与其他无关。

小旋风柴进 2019-12-02 02:19:23 0 浏览量 回答数 0

回答

jQuery本身不直接提供这样的方法,本身只有visible去判断元素是否可见,但对漂移到屏幕外或行高设的非常小无能为力。一些sticky插件是通过计算offset去确定元素位置/是否在屏幕里。 你需要自己写函数或者直接增强jQuery的选择器,我最近几个月没写Javascript,没办法马上给你代码。但从网上摘抄了一段,原理都一样。 //增强jQuery选择器中筛选器的部分、增加一个名为cheat的筛选项 //jQuery选择器中的$('#id:first'), :后面的部分就这么实现的 $.expr.filters.cheat = function(element) { return ( //如果元素不在屏幕可见区域返回true (element.offsetLeft + element.offsetWidth) < 0 || (element.offsetTop + element.offsetHeight) < 0 || (element.offsetLeft > window.innerWidth || element.offsetTop > window.innerHeight) ); }; 上面的仅仅判断了是否元素在可见区域中,如果滚动出去或CSS改变margin负数很大(移出去)就会返回true,只是很简单的判断,你可以根据需求继续加条件,例如检查CSS中的某一项是否小于某个数值(Number(element.css('font-size').replace(/px$/, '')) < 2)。 上面的增强,可以用以下几种方式使用,假设元素#cool位置在屏幕可见位置内。 $('#cool:cheat'); //选不到到该元素 $('#cool').is(':cheat'); //false $('#cool').not(':cheat'); //true 需要有点Javascript基础,抱歉上次回答太过情绪化,做学文的研究精神应该与其他无关。

杨冬芳 2019-12-02 02:47:32 0 浏览量 回答数 0

回答

的确 angular.element 不支持 wrapAll 方法,以下是我在网上找到的 angular.element 的支持方法,可供参考。addClass() - 为每个匹配的元素添加指定的样式类名after() - 在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append() - 在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选clone() - 创建一个匹配的元素集合的深度拷贝副本contents() - 获得匹配元素集合中每个元素的子元素,包括文字和注释节点css() - 获取匹配元素集合中的第一个元素的样式属性的值data() - 在匹配元素上存储任意相关数据detach() - 从DOM中去掉所有匹配的元素empty() - 从DOM中移除集合中匹配元素的所有子节点eq() - 减少匹配元素的集合为指定的索引的哪一个元素find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代hasClass() - 确定任何一个匹配元素是否有被分配给定的(样式)类html() - 获取集合中第一个匹配元素的HTML内容next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素on() - 在选定的元素上绑定一个或多个事件处理函数off() - 移除一个事件处理函数one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次parent() - 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器prepend() - 将参数内容插入到每个匹配元素的前面(元素内部)prop() - 获取匹配的元素集中第一个元素的属性(property)值ready() - 当DOM准备就绪时,指定一个函数来执行remove() - 将匹配元素集合从DOM中删除。(同时移除元素上的事件及 jQuery 数据。)removeAttr() - 为匹配的元素集合中的每个元素中移除一个属性(attribute)removeClass() - 移除集合中每个匹配元素上一个,多个或全部样式removeData() - 在元素上移除绑定的数据replaceWith() -`用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合text() - 得到匹配元素集合中每个元素的合并文本,包括他们的后代toggleClass() - 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类triggerHandler() - 为一个事件执行附加到元素的所有处理程序unbind() - 从元素上删除一个以前附加事件处理程序val() - 获取匹配的元素集合中第一个元素的当前值wrap() - 在每个匹配的元素外层包上一个html元素

a123456678 2019-12-02 02:06:31 0 浏览量 回答数 0

问题

jquery1.9在IE8下选择器中加逗号失效

a123456678 2019-12-01 20:21:10 874 浏览量 回答数 1

回答

Zepto 对象 不能自定义事件 例如执行: $({}).bind('cust', function(){}); 结果: TypeError: Object has no method 'addEventListener' 解决办法是创建一个脱离文档流的节点作为事件对象: 例如: $('').bind('cust', function(){}); Zepto 的选择器表达式: [name=value] 中 value 必须用 双引号 " or 单引号 ' 括起来 例如执行:$('[data-userid=123123123]') 结果:Error: SyntaxError: DOM Exception 12 解决办法: $('[data-userid="123123123]"') or \$("[data-userid='123123123']") 2-1.zepto 的选择器没有办法选出 \$("div[name!='abc']") 的元素 2-2.zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性 应该使用$('option').not(function(){ return !this.selected }) 比如:jq:$this.find('option[selected]').attr('data-v') * 1 zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1 但是获取有select中含有disabled属性的元素可以用 $this.find("option:not(:disabled)") 因为disabled是标准属性 参考网址:https://github.com/madrobby/zepto/issues/503 2-3、zepto在操作dom的selected和checked属性时尽量使用prop方法 Zepto 是根据标准浏览器写的,所以对于节点尺寸的方法只提供 width() 和 height(),省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight() Zepto.js: 由盒模型( box-sizing )决定 jQery: 忽略盒模型,始终返回内容区域的宽/高(不包含 padding 、 border )解决方式就是使用 .css('width') 而不是 .width() 。 3-1.边框三角形宽高的获取 假设用下面的 HTML 和 CSS 画了一个小三角形: <div class="caret" > </div > .caret { width: 0; height: 0; border-width: 0 20px 20px; border-color: transparent transparent blue; border-style: none dotted solid; } jQuery 使用 .width() 和 .css('width') 都返回 ,高度也一样; Zepto 使用 .width() 返回 ,使用 .css('width') 返回 0px 。 所以,这种场景,jQuery 使用 .outerWidth() / .outerHeight() ;Zepto 使用 .width() / .height() 。 3-2.offset() Zepto.js: 返回 top 、 left 、 width 、 height jQuery: 返回 width 、 height 3-3.隐藏元素 Zepto.js: 无法获取宽高; jQuery: 可以获取。 Zepto 的 each 方法只能遍历 数组,不能遍历 JSON 对象 Zepto 的 animate 方法参数说明 :详情点击-> zepto 中 animate 的用法 zepto 的 jsonp callback 函数名无法自定义 DOM 操作区别 jq 代码: (function($) { $(function() { var $list = $("<ul><li>jQuery 插入</li></ul>", { id: "insert-by-jquery" }); $list.appendTo($("body")); }); })(window.jQuery); jQuery 操作 ul 上的 id 不会被添加。 zepto 代码: Zepto(function($) { var $list = $("<ul><li>Zepto 插入</li></ul>", { id: "insert-by-zepto" }); $list.appendTo($("body")); }); Zepto 可以在 ul 上添加 id 。 事件触发区别 jq 代码: (function($) { $(function() { $script = $("<script />", { src: "http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js", id: "ui-jquery" }); $script.appendTo($("body")); $script.on("load", function() { console.log("jQ script loaded"); }); }); })(window.jQuery); 使用 jQuery 时 load 事件的处理函数 不会 执行 zepto 代码: Zepto(function($) { $script = $("<script />", { src: "http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js", id: "ui-zepto" }); $script.appendTo($("body")); $script.on("load", function() { console.log("zepto script loaded"); }); }); 使用 Zepto 时 load 事件的处理函数 会 执行。 zepto 阻止事件冒泡 zepto 的 slideUP 和 slidedown 事件到底部才能触发 document.addEventListener( "touchmove", function(event) { event.preventDefault(); }, false );

茶什i 2019-12-02 03:21:22 0 浏览量 回答数 0

回答

改下jquery的选择器就好了 $('a.apply').click(function () { var me = $(this); if (me.hasClass('applydefault')) return;//灰色不可用退出 me.addClass('applydefault'); //同时用ajax保存状态信息到服务器,下次服务器来设置样式 var n = $('数量选择器'); n.html(parseInt(n.text(), 10) + 1); });

小旋风柴进 2019-12-02 02:14:44 0 浏览量 回答数 0

问题

求助jquery form中的提交按钮用mouseover事件无反应?

吴孟桥 2019-12-01 19:40:34 956 浏览量 回答数 1

回答

有点明白了,哈哈,异步的话,还是用回调函数吧   getData(function(data){ xxx; }); function getData(callback){ ...; callback(data); ...; } ######ajax可以设置同步!######可以试试用 $.Deferred###### 引用来自“con”的评论 可以试试用 $.Deferred 谢谢,刚才看dom数发现trigger和triggerHandler函数,一查也是看到了deffered,正在试,不过没有试验成功,希望能指导下 使用的jquery1.10.2和easyui1.4 简单地就是一个二级联动菜单,一个事件是一级菜单联动二级菜单,另外一个事件是载入数据的时候将数据写入(不过因为二级菜单跟着一级菜单走,所以得等到二级菜单载入完毕才能写入数据) 下面的代码都是放在$()里面的 //设置一级菜单的二级菜单联动 $('#topic1').combobox({ onChange:function(n,o){ topic2Loaded=false;//因为没有搞懂deferred用法,这个是加的全局变量准备用全局变量来判断 var f_s; //alert(1); f_s=getTopic2(n);    //这个是我现在的简单的存储处理方法 if(f_s==false){ $.post('../server/t_getsubtopic.php',{father:n},function(data,sta,xhr){ jQuery('#topic2').combobox('clear').combobox('loadData',data.topic); eval('db_topic2.'+'f'+n+'=data.topic;'); topic2Loaded=true; },'json'); }else{ jQuery('#topic2').combobox('clear').combobox('loadData',f_s); topic2Loaded=true; } } });        //初始化编辑器的显示内容 jQuery.post('../server/t_editorinit.php',function(data,sta,xhr){ var jjj; jQuery('#topic1').combobox('clear').combobox('loadData',data.topic); jQuery('#saved').attr('value',1); jQuery('#subject').combobox('clear').combobox('loadData',data.subject); if(data.topic.length==0){ jQuery.messager.alert('提示','当前无权限进行操作,请登陆后刷新本页面。','info'); //jQuery('#saved').window('close'); }else{ //是否读取数据,如果是的话读取数据 var id=getURLRequest('id'); if(id){ jQuery.post('../server/getcontent.php',{id:id},function(data,sta,xhr){ var topic=data.path[0]; //jQuery.when(jQuery('#topic1').combobox('select',topic.father.index);); jQuery('#topic1').combobox('select',topic.father.index);                                         //这里就没有看懂,包括看的jquery的api里面then貌似已经废弃了的,这里执行不下去 // jQuery.when(jQuery('#topic1').triggerHandler( // 'onChange',jQuery('#topic1').combobox('getValue') // )).done(jQuery('#topic2').combobox('select',topic.son.topicid)); jQuery('#topic2').combobox('select',topic.son.topicid); //jQuery('#saved').attr('saved')=1; },'json'); } } },'json'); ###### 试了半天没有试出来,现在这样做的,但是看着好丑…… 最主要是如果超500ms没有完成载入就丑了…… jQuery.post('../server/getcontent.php',{id:id},function(data,sta,xhr){ var topic=data.path[0];         jQuery('#topic1').combobox('select',topic.father.index).delay(500).queue(function(){             jQuery('#topic2').combobox('select',topic.son.topicid);         }); jQuery('#saved').attr('saved')=1; },'json'); ###### 1、首先是通过Deferred实现的数据存储 // 存储函数 function getData(dfd, name) { var sdata = []; // 缓存所有ajax请求过的数据 if ( sdata[name] ){ dfd.resolve( sdata[name] ); } else { $.ajax({ url: xxx, }).done( function (data) { sdata[name] = data; dfd.resolve( data ); }) } } // 调用方式 var dfd = $.Deferred(); dfd.done( function (data) { // 拿到数据后要执行的操作 }); getData(dfd, "name1"); Deferred对象的使用方式大抵如上。 2、combobox二级菜单 简单看了下easyui combobox的api,一级菜单被选择时,更新二级菜单内容,可以用类似下面的写法: $("#level_1").combobox({ onSelect: function (record) { // 获取二级菜单内容并缓存,调用上面的getData var dfd = $.Deferred(); dfd.done(function (data) { $("#level_2").combobox( 'loadData', data); }); //这里的record不知道是个啥东西,可能需要加工一下再传入getData getData(dfd, record); } }); 不知道这种方式是不是能满足你说的菜单联动和缓存数据的需求 ###### 引用来自“con”的评论 1、首先是通过Deferred实现的数据存储 // 存储函数 function getData(dfd, name) { var sdata = []; // 缓存所有ajax请求过的数据 if ( sdata[name] ){ dfd.resolve( sdata[name] ); } else { $.ajax({ url: xxx, }).done( function (data) { sdata[name] = data; dfd.resolve( data ); }) } } // 调用方式 var dfd = $.Deferred(); dfd.done( function (data) { // 拿到数据后要执行的操作 }); getData(dfd, "name1"); Deferred对象的使用方式大抵如上。 2、combobox二级菜单 简单看了下easyui combobox的api,一级菜单被选择时,更新二级菜单内容,可以用类似下面的写法: $("#level_1").combobox({ onSelect: function (record) { // 获取二级菜单内容并缓存,调用上面的getData var dfd = $.Deferred(); dfd.done(function (data) { $("#level_2").combobox( 'loadData', data); }); //这里的record不知道是个啥东西,可能需要加工一下再传入getData getData(dfd, record); } }); 不知道这种方式是不是能满足你说的菜单联动和缓存数据的需求 谢谢,因为没用过所以还不太清楚,不过我就当是回调函数理解的话貌似这样的确可以解决问题,有时间的时候我会试着用这个代码并学习一下deferred这个有用的东西的。 至于之前我的解决方式整体就是这样的,不过有eval在里面真的好丑…… var db_topic2={};//用于存储topic2的本地数据,以免频繁进行查询 function getTopic2(father){ //通过查询本地dbTopic2来获取topic2的数据,如果没有的话才进行远程查询 // father='f'+father;//转换为字符 var flag; eval('flag=db_topic2.'+father+';'); if(flag){ return flag; }else{ //通过数据进行查询 return false; } } //设置一级菜单的二级菜单联动 $('#topic1').combobox({ onChange:function(n,o){ $('#saved').prop('value','0');//设置未保存 var f_s; f_s=getTopic2(n); if(f_s==false){ $.post('../server/t_getsubtopic.php',{father:n},function(data,sta,xhr){ jQuery('#topic2').combobox('clear').combobox('loadData',data.topic); eval('db_topic2.'+'f'+n+'=data.topic;'); },'json'); }else{ jQuery('#topic2').combobox('clear').combobox('loadData',f_s); } } }); //载入数据时候的设置 jQuery('#topic1').combobox('select',n.father.index).delay(500).queue(function(){ jQuery('#topic2').combobox('select',n.son.topicid); $(this).dequeue(); }).delay(500).queue(function(){ //因为存在延时,所以得在这里再延时设置已保存状态 $('#saved').prop('value','1');//设置已保存 $(this).dequeue(); }); 看着很丑吧…… ###### /* * 获取数据方法 * name: 数据key * fn: 回调函数 */ function getData(name, fn) { if(typeof getData.cache[name] != "undefined") { fn(getData.cache[name]); return; } $.post("index.php", { name: name }, function (data) { getData.cache[name] = data; fn(data); }, "json"); } getData.cache = {}; //使用实例 getData("user", function (user) { alert(user.name); }); ###### 引用来自“mr-zhuo”的评论 /* * 获取数据方法 * name: 数据key * fn: 回调函数 */ function getData(name, fn) { if(typeof getData.cache[name] != "undefined") { fn(getData.cache[name]); return; } $.post("index.php", { name: name }, function (data) { getData.cache[name] = data; fn(data); }, "json"); } getData.cache = {}; //使用实例 getData("user", function (user) { alert(user.name); }); 谢谢,用回调函数适用范围应该更广一些。###### 这里有篇关于deferred的,不错。 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

kun坤 2020-06-07 00:35:34 0 浏览量 回答数 0

问题

写JQuery插件的基本知识:报错

kun坤 2020-06-09 23:27:01 0 浏览量 回答数 1

回答

概述 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果没有指定context参数,$()将在当前的 HTML document中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。在jQuery 1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。 参考文档中 选择器 部分获取更多用于 expression 参数的 CSS 语法的信息。 参数 selector,[context]String,Element,/jQueryV1.0selector:用来查找的字符串 context:作为待查找的 DOM 元素集、文档或 jQuery 对象。 elementElementV1.0一个用于封装成jQuery对象的DOM元素 objectobjectV1.0一个用于封装成jQuery对象 elementArrayElementV1.0一个用于封装成jQuery对象的DOM元素数组。 jQuery objectobjectV1.0一个用于克隆的jQuery对象。 jQuery()V1.4返回一个空的jQuery对象。 示例 描述:找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。 jQuery 代码:$("div > p");描述:设置页面背景色。 jQuery 代码:$(document.body).css( "background", "black" );描述:隐藏一个表单中所有元素。 jQuery 代码:$(myForm.elements).hide()描述:在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 jQuery 代码:$("input:radio", document.forms[0]);描述:在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。 jQuery 代码:$("div", xml.responseXML);

a123456678 2019-12-02 03:09:12 0 浏览量 回答数 0

问题

jquery弹出框选择器的问题?

小旋风柴进 2019-12-01 19:35:08 893 浏览量 回答数 2

问题

关于Jquery选择器方面的问题

吴孟桥 2019-12-01 19:37:08 1045 浏览量 回答数 1

问题

jquery选择器的问题

a123456678 2019-12-01 20:18:39 720 浏览量 回答数 1

回答

jQuery没有直接的选择器可以用来对 dataset 中的属性进行筛选,可以使用 filter 进行过滤。 $('a').filter(function(){ return $(this).data('user').indexOf("'_id': 1")!=-1; //上面可以将data('user')的数据转换为 JSON 再读取_id属性筛选,但是觉得转换成本太高。 }) 我觉得最方便高效的方法是将整个user数据分拆成三个 dataset 属性用 jQuery 的属性选择器读取。 <a data-id="1" href="#">test</a> $('a[data-id="1"]');

小旋风柴进 2019-12-02 02:17:54 0 浏览量 回答数 0

问题

JQuery 如何预定义整站文档的$选择器?

a123456678 2019-12-01 20:21:44 904 浏览量 回答数 2

问题

Jquery选择器使用的问题

小旋风柴进 2019-12-01 20:25:17 767 浏览量 回答数 1

问题

关于jquery选择器问题

小旋风柴进 2019-12-01 19:35:23 878 浏览量 回答数 2

问题

如何给jquery 的:contains() 传入变量?

小旋风柴进 2019-12-01 19:37:18 784 浏览量 回答数 1

问题

jquery1.9在IE8下选择器中加逗号失效:报错

kun坤 2020-06-20 11:56:12 0 浏览量 回答数 1

回答

使用 jQuery 的 filter 方法 ...$("div").filter(function() { return $(this).css("display") == "block"; })或者... display: block 这种其实可以直接用 :visible 这个选择器$("div:visible")

一生有你llx 2019-12-02 02:18:07 0 浏览量 回答数 0

回答

使用 jQuery 的 filter 方法 ... $("div").filter(function() { return $(this).css("display") == "block"; })或者... display: block 这种其实可以直接用 :visible 这个选择器 $("div:visible")

小旋风柴进 2019-12-02 02:18:07 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 云栖号物联网 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 云栖号弹性计算 阿里云云栖号 云栖号案例 云栖号直播