【jQuery教程详解】

1 jquery

1.1  简介

jQuery是一个 JavaScript 库,即对js的封装

jQuery极大地简化了JavaScript编程,如对节点增删改查及动画添加

jQuery封装了异步post和 get请求

要学习jQuery前你首先要具备HTML/CSS/JS的相关知识

jQuery开发教程网站:

http://jquery.cuishifeng.cn/

http://www.w3school.com.cn/jquery/index.asp

1.1 jquery能做什么

1. HTML元素选取

2. HTML事件函数

3. HTML元素操作-增删改查

4. CSS操作

5. JavaScript特效和动画

6.  HTML DOM遍历和修改

7. AJAX

1.2  jquery的基本使用

jquery的导入

下载jquery库,下载地址:http://jquery.com/【下载的jquery版本一般没有要求】

把jquery.js导入项目WebContent的js 目录下


在html的head标签中导入jQuery的js文件

在script标签中写jQuery代码,如图,代码都写在function的括号内

文档就绪函数

这是为了防止文档在完全加载(就绪)之前运行jQuery代码。如果在文档没有完全加载之前就运行函数,操作可能失败。


jquery的语法

基础语法是:$(selector).action()

美元符号定义jQuery

选择符(selector)“查询”和“查找” HTML 元素

jQuery的 action() 执行对元素的操作

jquery的选择器和事件

id选择器




element元素选择器



class选择器


jquery的事件监听函数

组合选择器

组合选择器也就是将id,元素,类选择器组合使用.

selector1,selector2,selectorN



属性选择器

jQuery使用 XPath 表达式来选择带有给定属性的元素。

$("[src]")选取所有带有 href 属性的元素。

]$("[src='#']")选取所有带有 href 值等于 "#" 的元素。

$("[src$='.jpg']")选取所有 href 值以 ".jpg" 结尾的元素。



query筛选

普通筛选

:first第1个

:last最后1个

eq(index)指定索引

even偶数

:odd奇数

:lt(index)小于

:gt(index)大于

:not(selector)排除

查找筛选

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合

children([expr])

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选



jquery控制css


jquery控制html

添加标签

append() -在被选元素的结尾插入内容

prepend() -在被选元素的开头插入内容

after() -在被选元素之后插入内容

before() -在被选元素之前插入内容


删除标签

remove() -删除被选元素(及其子元素)

empty() -从被选元素中删除子元素

设置或获取html标签的内容

text() -设置或返回所选元素的文本内容

html() -设置或返回所选元素的内容(包括 HTML 标记)

val() -设置或返回表单字段的值


添加属性与获取属性值

attr("placeholder","请输入用户名");

attr("placeholder");


移除属性

removeAttr()




©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,306评论 0 3
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,451评论 0 44
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 670评论 0 3
  • Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img...
    扑克脸_457e阅读 583评论 0 1
  • $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({sr...
    专注寒冰三千岁阅读 513评论 0 4