jquery简单入门(一)

时间:2022-08-29 18:09:39

相关:

本文参考《锋利的jQuery第二版》

写在前面:

jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架...

百度指数分析:(http://index.baidu.com/?tpl=demand&word=javascript)

jquery简单入门(一)

如有纰漏,请各位看客赐教


内容目录:(本文采用连载模式组织)

1.jquery选择器

2.Dom操作

3.事件和动画

4.表单、表格应用

5.Ajax应用


1.jquery选择器(便捷、快速选定DOM,并对被选中的DOM添加行为,而不需考虑浏览器兼容问题)

A.基本选择器

B.层次选择器

C.过滤选择器

D.表单选择器

在介绍选择器之前,先大概描述下DOM树

Head      title

Html              ...

Body      p        ...

...


A.基本选择器(通过元素id、class和标签名来查找DOM元素)

Id:$(“#id”).jqueryFunction();

Class: $(“.class”).jqueryFunction();

标签:$(“tag”).jqueryFunction();


B. 层次选择器(通过DOM元素之间的层次关系查找元素,如:后代元素、子元素...)

后代元素:$(“father children”).jqueryFunction();

子元素:$(“father > children”).jqueryFunction();

相邻元素:$(“tag1 + tag2”).jqueryFunction();

同辈元素: $(“tag1 ~ tag2”).jqueryFunction();


C. 过滤选择器(通过特定过滤规则查找元素,选择器都是以一个冒号(:)开头)

aa.基本过滤

表现形式:

1.$(“:filter”).jqueryFunction();如:$(“:focus”).jqueryFunction();<!-- 选择当前被聚焦的元素 -->

2.$(“tag : filter”).jqueryFunction();如:$(“div : first”).jqueryFunction();<!-- 对第一个div元素做jqueryFunction()函数操作 -->

3.$(tag : filter()).jqueryFunction();如:$(div : eq(2)).jqueryFunction();<!-- 对第二个div元素做jqueryFunctio()函数操作 -->

bb.内容过滤(对所包含的子元素或文本内容进行过滤选择)

表现形式:

1.$(“tag : filter”).jqueryFunction();如:$(“div : parent”).jqueryFunction();<!-- 选择具有父标签的div元素 -->

2.$(“tag : filter(‘para’)”).jqueryFunction();如:$(“div : contains(hello)”).jqueryFunction();<!-- 选择包含文本hello的div元素 -->

cc.可见过滤(:hidden和:visible)

表现形式:

1.$(“tag : hidden”).jqueryFunction();

2.$(tag : visible).jqueryFunction();

dd.属性过滤(通过元素的属性过滤选择元素)

表现形式:

1.$(“tag[attribute]”).jqueryFunction();如:$(“div[class]”).jqueryFunction();<!-- 选择具有class属性的div 元素-->

2.$(“tag[attribute = value]”).jqueryFunction();如:$(“div[class=icss]”).jqueryFunction()<!-- 选择具有class属性且class属性值为icss的div元素 -->

3.$(“tag[attributeSign = value]”).jqueryFunction();如:$(“div[class^=icss]”).jqueryFunction();<!-- 选择具有class属性且class属性值首字母为icss -->

ee.子元素过滤

表现形式:

1.$(“tag : nth-child(n)”).jqueryFunction();如:$(“div : nth-child(2)”).jqueryFunction();<!-- 选择div的第二个子元素,进行jqueryFunction()函数操作 -->

2.$(“tag : first-child”).jqueryFunction()

3.$(“tag : last-child”).jqueryFunction();

4.$(“tag : only-child”).jqueryFunction();

ee.表单对象属性过滤

表现形式:

1.$(filter :attribute).jqueryFunction();如:$(“select : selected”).jqueryFunction();<!-- 获取下拉框被选中的内容 -->

2.$(“form filter:attribute”).jqueryFunction();如:$(“#iform input:disable”).jqueryFunction();<!-- 选择表单标签为iform的input子元素且该子元素为不可见绑定jqueryfunction()函数操作 -->


D. 表单选择器:

表现形式:

$(“#form : filter”).jqueryFunction();

(未完...)

jquery简单入门(一)的更多相关文章

  1. jQuery简单入门

    jQuery是什么 John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作为什么要使用jQuery (1)write less do ...

  2. jQuery简单入门&lpar;三&rpar;

    3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全 ...

  3. jQuery简单入门&lpar;二&rpar;

    2.Dom操作 A.DOM分类 个人认为在jQuery中这些分类被弱化了,有兴趣的读者可以自行补充这方面的知识: aa.DOM Core bb.HTML -DOM cc. CSS-DOM B.jQue ...

  4. jQuery简单入门(五)

    5.Ajax应用 在jQuery中$ajax()方法属于最底层的方法,第二层是load().$.get().$.post(),第三层是$.getScript()和 $.getJSON():下面根据使用 ...

  5. jQuery简单入门&lpar;四&rpar;

    4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method ...

  6. jquery简单入门1

    前端 html:展示 form: 属性: action和method 子标签: input(10种) text password radio checkbox file submit button r ...

  7. jquery 简单入门

    例:GridView

  8. 从零开始学习jQuery &lpar;一&rpar; 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  9. HTML5简单入门系列(五)

    前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...

随机推荐

  1. 【转】VS2010安装后出现无法使用帮助的解决方案

    安装完VS2010后 再安装MSDN 打开“Help Library 管理器 - Microsoft Help 查看器 1.0” 提示“请为本地内容选择位置” 默认的位置是在“C:/Documents ...

  2. JMeter学习参数化User Defined Variables与User Parameters

    偶然发现JMeter中有两个元件(User Defined Variables与User Parameters)很相近,刚开始时我也没注意,两者有什么不同.使用时却发现两者使用场景有些不同,现在小结一 ...

  3. Jenkins &plus; NuGet &plus; MSBuild

    Jenkins + NuGet + MSBuild 背景 项目上需要做UWP的自动安装包,在以前的公司接触的是TFS来做自动build. 公司要求用Jenkins来做,别笑话我,之前还真不晓得这个东西 ...

  4. ABBYY FineReader 12最新官方版下载

    ABBYY FineReader是市场领先的文字识别(OCR)软件,可快速方便地将扫描纸质文档.PDF文件和数码相机的图像转换成可编辑.可搜索的信息,ABBYY FineReader 12是目前最新版 ...

  5. Day18 Django之路由系统、模板语言、Ajax、Model

    一.路由系统 1.创建Django项目 django-admin startproject day18 cd day18 python3 manage.py startapp app01 2.app0 ...

  6. 如何用 React Native 创建一个iOS APP?(三)

    前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...

  7. PreTranslateMessage和TranslateMessage区别&lpar;转&rpar;

    PreTranslateMessage是消息在送给TranslateMessage函数之前被调用的,绝大多数本窗口的消息都要通过这里,比较常用,当需要在MFC之前处理某些消息时,常常要在这里添加代码. ...

  8. Git 实用指南

    传送门: https://mp.weixin.qq.com/s?__biz=MzI3MzgxNDY2MQ==&mid=2247484159&idx=1&sn=2d28513ef ...

  9. SQL语句操作数据

    --切换数据库:手动切换和命令切换 use MySchool --向Student表中插入数据 --语法:INSERT [INTO] 表名 (列名) VALUES (值列表) --注意事项: --1. ...

  10. MVC &vert;分部视图 PartialView&lpar;&rpar;

    介绍如何定义 其实它和普通视图没有多大区别,只是创建分部视图的时候视图里没有任何内容,你需要什么标签你自己加.第二就是分部视图不会执行_ViewStart.cshtml中的内容) 控制器 Partia ...