jquery自学篇-选择器

javascript中获取dom对象的方法一般是:

var div = document.getElementById("testDiv"); (1) 此方法是根据id获取单个的dom对象

var divs = document.getElementsByTagName("div"); (2) 根据html标签名称获取dom对象集合

dom对象只有有限的属性和方法,如图所示

jquery包装集是对dom对象的扩充,在jquery中将所有的对象无论是单个还是一组都封装成一个Jquery包装集

var jqueryObject = $("#testDiv"); (3) 是获取单个元素的包装集

jquery包装集有丰富的属相和方法,这些都是jquery所特有的,像append,appendTo,attr,bind

dom对象怎么转换成jquery包装集:

例如将上面的(1)处的div对象转换成(3)处的jqueryObject包装集,则 var domTojqueryObject = $(div)

怎么将jquery包装集转换成dom对象:

jquery包装集是一个集合,所以我们可以用索引器访问其中的一个元素,例

var domObject = $("#testDiv")[0];

此方法通过索引器返回的是一个dom对象,而不是jquery包装集

jquery包装集中某些遍历方法,如each中,可以专递遍历函数,在遍历函数中的this也是dom元素,如

$("#testDiv").each(function(){

alert(this);

}); 如果我们要使用jquery方法操作此dom对象,只需用上面介绍的转换方法即可,例如

$("#testDiv").each(function(){

$(this).html("修改内容");

});

jQuery选择器:

jquery()=$()    $是jquery对象的引用

主要选择器有:jquery(selector,context),jquery(html,ownerDomement),jquery(elements),jquery(callback)

id选择器,var jqueryObject = $("#testDiv");根据Id获取Jquery包装集

选取ID为testDiv的dom元素并将其放入jquery包装集中,最后以jquery包装集的形式返回。

jquery选择器在使用过程中主要包含按照功能主要分为选择和过滤,并且是配合使用的,可以同时使用作为一个选择器字符串,主要区别是“过滤”功能的选择器是指定条件从前面匹配的内容中筛选,过滤选择器也可以单独使用,表示从全部“*”中筛选。

比如 $(":[title]") 等同于 $("*:[title]")

而选择功能的选择器不会有默认的范围,因为作用是选择而不是过滤。

jquery基础选择器Basics:

$("#divId"),$("a"),$(".className"),$("*"),$("#divId,a,.bgRed")

层次选择器Hierarchy:

基本过滤器 Basic Filters:

内容过滤器Conent Filters:

可见性过滤器Visibilety Filters:

属性过滤器Attribute Filters:

子元素过滤器 Child Filters:

表单选择器 Forms:

$(":input"),$(":text"),$(":password"),$(":radio"),$(":checkbox"),$(":submit"),$(":image"),$(":reset"),$(":button"),$(":file")

表单过滤器 Form Filters:

$("input:enabled"),$("input:disabled"),$("input:checked"),$("select option:selected")

时间: 2024-10-14 14:44:24

jquery自学篇-选择器的相关文章

jQuery:自学笔记(2)——jQuery选择器

jQuery:自学笔记(2)--jQuery选择器 基本选择器 说明 jQuery的基本选择器与CSS的选择器相似: 实例 标签选择器 //使用标签选择器更改字体大小 $(div).css('font-size','18px') ID选择器 //使用id选择器改变背景颜色 $('#div1').css('background','red'); 说明:ID选择器中,ID前面必须加一个#,以表明这是一个jQuery的ID选择器. 类选择器 //使用类选择器设置字体样式 $('.spanclass')

jQuery中的选择器深入浅出

随着JavaScript的不断发展,各种各样的为了方便给jQuery变成的库应运而 生,Prototype,YUI,Extjs,bindows,JSVM(国内的),而目前较为流行的是jQuery ,这是一个轻量级的JavaScript库,它的诸多的优点:开源,兼容各种浏览器,继承css ,html,javascript,ajax等,据统计,目前世界上前10000个访问量最高的网站中,有 超过60%都使用的是jQuery,不得不说,在现在的前端界,如果你说你不会jQuery, 那么估计很多人就会对

jquery前端篇

QQ:1187362408 欢迎技术交流和学习 jquery前端篇(jquery): TODO: 1,jquery:精确控制页面对象,体现了OOP思想(面向对象) 2,jquery:选择器的调用 3,jquery:扩展validate插件,实现自定义验证控件,统一调用 4,jquery:前端获取后台数据,属性调用 5,jquery:each循环遍历json数据 6,字符串转换为json的两种方式:eval('('+string+')'),$.parseJSON(string)[需要引用jquer

基于Bootstrup的jQuery日期时间选择器

bootstrap-datetimepicker是一款基于Bootstrup 3的超实用jQuery日期时间选择器.通过该插件你可以非常容易的创建很酷的bootstrup样式的日期时间选择器. 你也可以通过修改css文件来自定义它的样式. 该jQuery日期时间选择器的最小外部依赖需求是: jQuery Moment.js Bootstrap.js(如果你不想使用完整的bootstrup,至少需要transition 和collapse) Bootstrap Datepicker script

JQuery入门篇

JQuery入门篇 jQuery选择器 “$”表示JQuery对象 根据ID查找 $(‘#var’)表示将一个id值为var的DOM节点封装成一个jQuery对象,DOM节点必须以“#”开头. 例如:有<div id="var "></div>存在,使用$(‘#var’)之后会将其封装成[<div id="var "></div>],但是如果不存在id=”var”,返回的jQuery对象是[],而不是一个null或un

jQuery中的选择器

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html PUBLIC "-//W3C//DTD

jQuery基础知识--选择器与效果

$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class="test"的元素 $("#test").hide()--隐藏所有id="test"的元素 文档就绪函数 $(document).ready(function() {     ---------jQuery function go here----

jQuery事件篇---高级事件

内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一.模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击. //点击按钮事件 $('input').click(function () { alert('我的第一次点击来自模拟!'); }); //模拟用户点击行为 $('input').trigger('click'); //可以合并两个方法 $('inp

非常easy学习的JQuery库 : (二) 选择器

作用 选择器同意您对元素组或单个元素进行操作. 在前面的章节中,我们介绍了一些有关怎样选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是怎样准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器同意您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器同意您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器同意您对 DOM 元素组或单个 DOM 节点进行操作. 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元