不是jquery的选择器（jquery选择器select option）

本文目录

• jquery选择器select option
• jquery选择器与原生选择器选择DOM结果不同
• jquery 选择器的问题 get()
• 网站如何做到完全不需要jQuery也可以满足简单需求
• queryselectorall是jquery的选择器吗
• jquery里的$(“#“) 与 js中的$(“#“+) 有什么区别
• jquery的核心功能不是根据选择器查找HTML元素然后对元素执行相应操作这句话是对是错
• 如何判断是否是 jquery 选择器
• 下面哪种不是jquery的选择器

jquery选择器select option

应该使用

$(’option:selected’);

’:selected’和$(’’)有什么区别呢:

1. ’:selected’是jQuery扩展的选择器,并不属于CSS选择器规范,  仅适用于动态的获取选中的option. 请注意,你选中Select中的option时, 虽然select的状态发生了变化, 但html标记本身并不会变化. 

2. 而$(’’)会命中《input type="text"》 但是不会命中《input 》, 虽然后者默认是text. 

《select》    《option》1《option》    《option selected》2《option》    《option》3《option》《/select》$(’option’).text();//页面加载后得到2//手工选择1或者3后, 依然得到的是2. 选择select并不会修改html标记.$(’option’).text();//始终得到"", 虽然选项2的selected属性的确是selected, 但是请注意属性选择器是严格和html标记对应的.$(’option:selected’).text();//页面加载后得到2//手工选择1得到1,选择3得到3. 正式期望的结果.这就是为什么jQuery会扩展出这个选择器.

jquery选择器与原生选择器选择DOM结果不同

当然不同，jq选择器选择的结果是经过封装的dom对象（可以叫做jquery对象），添加了jq自身的一些专有的属性和方法，比如 $(’.xxx’).index()，而原生的dom对象却不能这样用。通过简单的方法就能在原生dom对象与jquery对象之间转换：假如a是dom对象，那么$(a)就是转换后的jquery对象；假如a是jquery对象，那么a就是转换后的dom对象

jquery 选择器的问题 get()

因为你通过$(this).children().get(0)获得的是一个DOM对象，无法调用hide()。第二中办法中$(c)将DOM对象c转换成了jQuery对象，所以调用hide()成功。你可以试试$(this).children().get(0).style.display = ’none’;应该也行。get(0)并不是jQuery的选择器，下面才是利用jQuery选择器的方法：$(this).children(":first").hide();$(this).find("》:first-child").hide();

网站如何做到完全不需要jQuery也可以满足简单需求

　　据统计 目前全世界 %的网站使用它 也就是说 个网站里面 有 个使用jQuery 如果只考察使用工具库的网站 这个比例就会上升到惊人的 %

　　虽然jQuery如此受欢迎 但是它臃肿的体积也让人头痛不已 jQuery 的原始大小为 KB 优化后为 KB 如果是支持IE 的jQuery 原始大小为 KB 优化后为 KB

　　这样的体积 即使是宽带环境 完全加载也需要 秒或更长 更不要说移动设备了 这意味着 如果你使用了jQuery 用户至少延迟 秒 才能看到网 页效果 考虑到本质上 jQuery只是一个操作DOM的工具 我们不仅要问 如果只是为了几个网页特效 是否有必要动用这么大的库？

　　 年 jQuery诞生的时候 主要用于消除不同浏览器的差异（主要是IE ） 为开发者提供一个简洁的统一接口 相比当时 如今的情况已经发生了很大的变化 IE的市场份额不断下降 以ECMAScript为基础的JavaScript标准语法 正得到越来越广泛的支持 开发者直接使用JavScript标准语法 就能同时在各大浏览器运行 不再需要通过jQuery获取兼容性

　　下面就探讨如何用JavaScript标准语法 取代jQuery的一些主要功能 做到jQuery free

　　 一 选取DOM元素

　　jQuery的核心是通过各种选择器 选中DOM元素 可以用querySelectorAll方法模拟这个功能

　　var $ = document querySelectorAll bind(document);

　　这里需要注意的是 querySelectorAll方法返回的是NodeList对象 它很像数组（有数字索引和length属性） 但不是数组 不能使用pop push等数组特有方法 如果有需要 可以考虑将Nodelist对象转为数组

　　myList = Array prototype slice call(myNodeList);

　　 二 DOM操作

　　DOM本身就具有很丰富的操作方法 可以取代jQuery提供的操作方法

　　尾部追加DOM元素

　　// jQuery写法 $(parent) append($(child));

　　// DOM写法 parent appendChild(child)

　　头部插入DOM元素

　　// jQuery写法 $(parent) prepend($(child));

　　// DOM写法 parent insertBefore(child parent childNodes)

　　删除DOM元素

　　// jQuery写法 $(child) remove()

　　// DOM写法 child parentNode removeChild(child)

　　 三 事件的监听

　　jQuery的on方法 完全可以用addEventListener模拟

　　Element prototype on = Element prototype addEventListener;

　　为了使用方便 可以在NodeList对象上也部署这个方法

　　NodeList prototype on = function (event fn) { call(this function (el) { el on(event fn); }); return this; };

　　 四 事件的触发

　　jQuery的trigger方法则需要单独部署 相对复杂一些

　　Element prototype trigger = function (type data) { var event = document createEvent( HTMLEvents ); event initEvent(type true true); event data = data || {}; event eventName = type; event target = this; this dispatchEvent(event); return this; };

　　在NodeList对象上也部署这个方法

　　NodeList prototype trigger = function (event) { (event); }); return this; };

　　 五 document ready

　　目前的最佳实践 是将JavaScript脚本文件都放在页面底部加载 这样的话 其实document ready方法（jQuery简写为$(function)）已经不必要了 因为等到运行的时候 DOM对象已经生成了

　　 六 attr方法

　　jQuery使用attr方法 读写网页元素的属性

　　$("#picture") attr("src" "//url/to/image");

　　DOM元素允许直接读取属性值 写法要简洁许多

　　$("#picture") src = "//url/to/image";

　　需要注意 input元素的this value返回的是输入框中的值 链接元素的this href返回的是绝对URL 如果需要用到这两个网页 元素的属性准确值 可以用this getAttribute( value )和this getAttibute( href )

　　 七 addClass方法

　　jQuery的addClass方法 用于为DOM元素添加一个class

　　$( body ) addClass( hasJS );

　　DOM元素本身有一个可读写的className属性 可以用来操作class

　　document body className = hasJS ;

　　// or

　　document body className += hasJS ;

　　HTML 还提供一个classList对象 功能更强大（IE 不支持）

　　document body classList add( hasJS );

　　document body classList remove( hasJS );

　　document body classList toggle( hasJS );

　　document body classList contains( hasJS );

　　 八 CSS

　　jQuery的css方法 用来设置网页元素的样式

　　$(node) css( "color" "red" );

　　DOM元素有一个style属性 可以直接操作

　　element style color = "red";;

　　// or

　　element style cssText += color:red ;

　　 九 数据储存

　　jQuery对象可以储存数据

　　$("body") data("foo" );

　　HTML 有一个dataset对象 也有类似的功能（IE 不支持） 不过只能保存字符串

　　element dataset user = JSON stringify(user);

　　element dataset score = score;

　　 十 Ajax

　　jQuery的Ajax方法 用于异步操作

　　$ ajax({ type: "POST" url: "some php" data: { name: "John" location: "Boston" } }) done(function( msg ) { alert( "Data Saved: " + msg ); });

　　我们可以定义一个request函数 模拟Ajax方法

　　function request(type url opts callback) {

　　var xhr = new XMLHttpRequest();

　　if (typeof opts === function ) { callback = opts; opts = null; }

　　xhr open(type url);

　　var fd = new FormData();

　　if (type === POST && opts) { for (var key in opts) { fd append(key JSON stringify(opts)); } }

　　xhr onload = function () { callback(JSON parse(xhr response)); };

　　xhr send(opts ? fd : null);

　　}

　　然后 基于request函数 模拟jQuery的get和post方法

　　var get = request bind(this GET );

　　var post = request bind(this POST );

　　 十一 动画

　　jQuery的animate方法 用于生成动画效果

　　$foo animate( slow { x: += px })

　　jQuery的动画效果 很大部分基于DOM 但是目前 CSS 的动画远比DOM强大 所以可以把动画效果写进CSS 然后通过操作DOM元素的class 来展示动画

　　foo classList add( animate )

　　如果需要对动画使用回调函数 CSS 也定义了相应的事件

　　el addEventListener("webkitTransitionEnd" transitionEnded);

　　el addEventListener("transitionend" transitionEnded);

　　 十二 替代方案

　　由于jQuery体积过大 替代方案层出不穷

　　其中 最有名的是zepto js 它的设计目标是以最小的体积 做到最大兼容jQuery的API zepto js 版的原始大小是 KB 优化后是 KB gzip压缩后为 KB

　　如果不求最大兼容 只希望模拟jQuery的基本功能 那么 min js优化后只有 字节 而dolla优化后是 KB

　　此外 jQuery本身采用模块设计 可以只选择使用自己需要的模块 具体做法参见它的github网站 或者使用专用的Web界面

　　 十三 参考链接

　　 Remy Sharp I know jQuery Now what? Hemanth HM Power of Vanilla JS Burke Holland Things You Should Stop Doing With jQuery

queryselectorall是jquery的选择器吗

是的1. W3C 标准querySelectorAll 属于 W3C 中的 Selectors API 规范 。2. 浏览器兼容querySelectorAll 已被 IE 8+、FF 3.5+、Safari 3.1+、Chrome 和 Opera 10+ 良好支持 。getElementsBy 系列，以最迟添加到规范中的 getElementsByClassName 为例，IE 9+、FF 3 +、Safari 3.1+、Chrome 和 Opera 9+ 都已经支持该方法了。3. 接收参数querySelectorAll 方法接收的参数是一个 CSS 选择符。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name。代码如下 ：var c1 = document.querySelectorAll(’.b1 .c’);var c2 = document.getElementsByClassName(’c’);var c3 = document.getElementsByClassName(’b2’).getElementsByClassName(’c’);需要注意的是，querySelectorAll 所接收的参数是必须严格符合 CSS 选择符规范的。所以下面这种写法，将会抛出异常。代码如下 ：try { var e1 = document.getElementsByClassName(’1a2b3c’); var e2 = document.querySelectorAll(’.1a2b3c’);} catch (e) { console.error(e.message);}console.log(e1 && e1.className);console.log(e2 && e2.className);（CSS 选择器中的元素名，类和 ID 均不能以数字为开头。）4. 返回值大部分人都知道，querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List。

jquery里的$(“#“) 与 js中的$(“#“+) 有什么区别

一、意思不同

$("#xx")表示得到一个xx为""的组件。

$("#"+xx)表示xx是一个变量,假如xx的值是aa,就表示与"#"相连接组成了$("#aa")得到一个aa为""的组件。

二、用法

content是一个变量的而已。$("#ID")和$("#"+ID)是一样的。

例如：《input id="abc1"》

《input id="abc2"》

《input id="abc3"》$("#abc1");

for(var a=1;a《4;a++){$("#abc"+a);

}

三、作用不同

$("#")是指选择器选择带有id的元素，例如《div id="test"》《/div》就可以用$("#test")来悬着这个div元素，里面有加号的情况一般是有变量，在函数封装时常用，例如：

function test(slid){

$("#"+slid).show();

这里＋只是一个连接的作用，总得来说就是jquery的选择器。

jquery的核心功能不是根据选择器查找HTML元素然后对元素执行相应操作这句话是对是错

接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素jQuery 的核心功能都是通过这个函数实现的JQuery核心函数有四种，下面先简单介绍：$(expression,)接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素jQuery 的核心功能都是通过这个函数实现的$(html)将一个或多个DOM元素转化为jQuery对象 注意是jQuery对象，而不是DOM对象。如果我想得到DOM对象呢？很简单，只需在其后跟一个索引值（如）—因为它得到的是一个对象数组，即可得到DOM对象。然后就可以使用innerHTML、innerText等DHTML方法和属性了。$(callback)$(document).ready()的简写。允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说，这个函数是可链接的－－但真正以这种方式链接的情况并不多。

如何判断是否是 jquery 选择器

设置当前激活页面的样式activePageClass (字符串, 默认: "ui-page-active")：给当前页面(包括转场中的) 分配class。

下面哪种不是jquery的选择器

jquery官方中没有类选择器这一说，所以自然不会存在。只是编程人员用到了选择类方法的时候就叫他类选择器了