jQuery入门级part.1

jquery的选择器:

基本选择器:

#id                      根据id的属性值来获取元素

TagName             根据标签名来获取元素

selector1,selector2       匹配列表中的选择器

.class               根据class的属性值来获取元素

层级选择器:

祖先元素  后代元素  匹配祖先元素下面的指定的后代元素

parent > child  匹配父元素下面的指定的子元素

prev + next   匹配当前元素的下一个兄弟元素  要求这两个元素必须邻居

prev~siblings  匹配当前元素的下面的指定所有的兄弟元素

简单选择器:

:first 匹配第一个元素

:last 匹配最后一个元素

:even 匹配下标值为偶数的所有元素

:odd  匹配下标值为奇数的所有元素

:eq(index)  匹配下标值为指定值的元素

:gt(index) 匹配下标值大于指定值的所有元素

:lt(index) 匹配下标值小于指定值的所有元素

:not(selector) 匹配不包含指定选择器的所有元素

内容选择器:

:contains(text) 匹配内容中包含指定值的元素

:empty   匹配内容为空的元素

:has(selector)  匹配内容中包含指定选择器的元素

:parent  匹配内容不为空的元素

可见性选择器:

:hidden      匹配隐藏的元素   CSS中:display:none

:visible        匹配显示的元素  CSS中:display:block

属性选择器:

[attribute]   匹配指定属性的所有元素

[attribute=value]  匹配属性等于指定值的元素    input[name=”username”]

[attribute!=value]  匹配属性不等于指定值的所有元素

[attribute^=value]  匹配属性以指定值开头的所有元素

[attribute$=value]  匹配属性以指定值结束的所有元素

[attribute*=value]  匹配属性中包含指定值的所有元素

[selector1][selector2][selectorN]  匹配列表中所有属性

子元素选择器:

:nth-child(index/even/odd)  匹配索引值为指定值或者索引值为奇偶的子元素  这里的是从1开始的

:first-child 第一个子元素

:last-child 最后一个子元素

:only-child 匹配有且仅有一个子元素

!css3也可以用

表单属性选择器:

:input   匹配表单里面所有元素 包含select  textarea   !$(“input”)它是匹配到所有的input标签      !$(“:input”)它是匹配到除了input标签以外 select  textarea   所有的表单控件元素

:text   匹配单行文本框

:password  匹配单行密码框

:radio   匹配单选按钮

:checkbox 匹配多选按钮

:submit       匹配提交按钮

:reset  匹配重置按钮

:image  匹配图片按钮

:button  匹配普通按钮

:file   匹配文件上传

:hidden  匹配隐藏域   如果是要匹配表单中的隐藏域控件  一定要先加上input标签  $(“input:hidden”)

表单对象选择器:

:enabled  匹配表单中可用的表单控件

:disabled  匹配表单中不可用的表单控件

:checked  匹配表单中默认选中的元素   单选按钮和多选按钮

:selected  匹配表单中默认选中的元素   下拉列表

jQuery对象与JavaScript对象之间相互转换:

jQuery对象转换为JavaScript对象:

方法:jQuery对象[下标]

将JavaScript对象转换为jQuery对象:

方法:$(JavaScript对象)

jQuery中的方法来操作HTML标签中的属性:

attr(name)   获取当前对象的指定的属性的值

attr(key,value)  给当前对象设置属性值

attr(properties)  一次给当前对象设置多个属性值   要求参数必须是一个JSON对象

removeAttr(name) 移动当前对象的属性名和属性值

jQuery对象操作标签中的class属性:

addClass(class)   给当前对象添加class属性值

removeClass(class)  将当前对象的class属性值移除

toggleClass(class)  当前对象中如果有指定的class属性值则移除 反之则添加

hasClass(class)  如果有指定的class属性值就返回true  反之没有就返回false

jQuery对象对标签中的style属性的操作:

css(name) 获取到当前对象的style属性指定的CSS样式的属性值

css(key,value) 给当前对象的的style属性中设置css样式

css(properties) 一次设置多个   要求参数必须是一个JSON对象

尺寸方法:

width()      width(value)      height()      height(value)

文本、值:

html():获取双边标记中的内容

html(val):往双边标记设置内容

val():获取单边标记中的value属性值

val(val):往单边标记中的value属性设置值

text():获取双边标记的中的内容

text(val):往双边标记设置内容

html()和text()方法之间的区别: 一个可以解析HTML标签  一个解析不了

html()获取的时候将标签中的所有的内容都会获取到

text()获取的时候只会获取到标签中的文本内容

时间: 2024-12-16 02:54:47

jQuery入门级part.1的相关文章

个人Web工具箱&资源整理(1)

很久就想把使用的工具及收藏的资源整理一番:一是为了传达博客社区的理念:资源共享,而是方便自己及团队快速获取. 学习资源: 首推两个入门级在线参考网站. 1 w3c school. 2 Runoob.com(菜鸟教程). HTML5:标记语言,是HTML和XHTML的最新版本. HTML5 Outliner HTML5在线生成. 模板: jade:Jade 是一个高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用. jade API:运行在N

如何自学 Java 开发

如何自学 Java 开发? 568赞同反对,不会显示你的姓名 李艾米IT路上学习 568 人赞同 Java Web前端技术 HTML 入门视频课程 1 HTML 简介 2 HTML基本结构[ 3 HTML的BODY标签以及颜色的设定 4 HTML之br标签 5 HTML之p标签 6 HTML之pre标签. 7 HTML之center 8 HTML之引文标签 9 HTML之hr 10 HTML之address 11 HTML之meta 标签 12 HTML之特殊字符 13 HTML之注释 14 H

jQuery对象入门级介绍

你是否曾经见过像  $(".cta").click(function(){})这样的JavaScrip代码?或许你还会思考下 $('#X') 是什么,如果看到这些你都觉得摸不着头脑,那请一定要读完这篇文章.如果你觉得上述的代码片段是不能正常工作的,那请先看一些jQuery的代码范例,你会发现链接中的代码都是这样的结构. 这篇文章将会分析下面代码片段(动画化一个方形)中出现的一些关键知识点.你可能不会经常接触这样的代码,但了解一下这段代码的机制有助于你理解jQuery: 1 2 3 4

Jquery Ajax调用aspx页面实例

目前,我会的几种asp.net界面与后台代码交互方式有几种: 1.webform+服务器控件交互: 2.webform+jquery+ajax+一般处理程序交互: 3.webform+jquery+ajax+Webservice/WCF交互: 4.MVC: 5.webform+jquery+ajax直接交互: 其中第1种交互是入门级,发展级为第2与第3,交互方式类似,也是我常用的开发方式.第4种最近几年才出现,玩过,用于项目比较少. 现在记录一下第5种交互方式. 第一步:准备页面代码: <!DO

Jquery实现详细与精简的切换(实现更多选项的功能)

上周学习了Javascript,只是学习了点皮毛而已.这周学习了Jquery.学习到了Jquery操作Dom节点.然后..然后学习到了隐藏和显示标签.于是想尝试能不能写的出京东商城的那个商品筛选功能. 那个筛选功能如图: 由于刚学习.所以技术不精.这里只实现以下两个功能 更多选项.点击切换收起选项. 点击条目在上面显示已点击条目. 首先是Html代码:这里主要的代码是: <div class="SubCategoryBox"> <div class="mt&

自己手写简约实用的Jquery tabs插件(基于bootstrap环境)

一直想改版网站首页的图书展示部分,以前的展示是使用BootStrap的传统的collapse,网页篇幅占用大,也不够美观,操作也相对来说比较麻烦.于是有了自己利用Jquery来做一个图书展示的tabs的想法,之前也在网上找了半天,并不是很满意. 下面来看看我的实现过程: 首先是HTML部分,HTML部分按照结构简约,突出干货的思路来设计.选项卡使用了列表,在列表中插入了超链接,当然这里的超链接只是作为按钮使用的,当点击任何一个链接,就切换到对应的选项卡.选项卡的内容部分直接使用DIV,将图书的展

菜鸟初试水--JQuery基础

此文仅作入门级文章,望大神们高抬贵手! JQuery: 它是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作. JQuery的用途: ①访问和操作DOM元素: 使用jQuery能够方便便捷地获取和修改页面中指定的元素 ②控制页面样式 能使程序猿便捷地控制页面中的CSS文件 ③对页面事件的处理 让页面的表现层和功能开发分离,更加专注的完成自己的任务 ④方便地使用jQuery插件 jQuery含有大量的插件,使得页面绚丽多彩,功能越发完善 ⑤与Ajax技术的完美集合

jQuery组件写法

知识点: 什么是插件 jQuery插件的模式 jQuery插件的Lightweight Start模式(入门级插件模式) 8.1 插件(Plug-in) “插件”这个关键字,估计大家在日常生活中经常有所耳闻.例如:各网页浏览器,允许用户安装一些插件,增强用户体验,常见的Adobe Flash播放器,银行安全交易插件等.对于不做编程的朋友来说,是一个无所谓的词,但是对于咱们IT技术行业的朋友来说,是必须要了解,知道的. 咱们不是学者,不做特别规范的学术性研究,只要能够理解.够用就可以了. 因为咱们

jquery实现的tab选项卡

作为网页的基本常见特效,我今天趁着中午下班,赶紧试一下,没想到简单的实现了, 不过本来就是入门级的东西,就当打怪升级吧! 效果如图: html: <ul class="nav"> <li class="on">选项卡1</li> <li>选项卡2</li> <li>选项卡3</li> <li>选项卡4</li> </ul> <ul class