当前位置:  首页  >  前端开发  >  Jquery

jquery教程(一)详细讲解jquery选择器的使用

Jquery-1.4.4.js:这个文件是jquery完整的内容,但包括制表符,空格等字符,所以这个文件体积略大,一般可以用于个人学习使用

一.什么是jquery?

一款免费且开放源代码的JavaScript代码库

流行的js框架:Dojo ,jquery ,extJs

 二. 了解jquery

1. 在网上下载相应的jquery版本

将下载到的压缩包进行解压,发现里面有两个文件

Jquery-1.4.4.js :这个文件是jquery完整的内容,但包括制表符,空格等字符,所以这个文件体积略大,一般可以用于个人学习使用。

Jquery-1.4.4.min.js :在这个文件中,去除了原有的不必要的空格、换行、制表符等字符,这样会使这个文件体积变小,有利于客户端的下载一般在项目开发或布署时

2.怎么使用???

选出你想使用的js文件,将其复制到我们的项目,然后在其它程序中包含进来,这样即可引入jquery程序库:

《script》

三. 选择器

选择器就是在网页程序中匹配或定位某些元素的方式。

document.getElementById(‘div1’).innerHTML=’内容’;

document.getElementsByName

document.getElementsByTagName

document.frm.text1

对象.属性=值

Jquery的选择器分类:基本,层级,简单,内容,可见性,属性,子元素,表单,表单对象属性选择器 9大选择器:

3.1 基本选择器

  • #id :通过id属性匹配某些元素    

Document.getElementById(); (js方式)

  • Element :通过标记名匹配某些元素

Document.getElementsByTagName();

  • selector1,selector2 :匹配所有指定的元素
  • .class :匹配使用指定类选择器的元素
php教程

 3.2 层级 选择器

  • ancetor descendant :匹配祖先元素的第一个后代元素
  • parent > child :匹配父元素下的所有子元素
  • prev + next :匹配prev元素的next元素
  • prev~siblings :匹配prev元素的平辈元素
php教程

3.3简单 选择器  对基本选择器和层级选取进一步的精确定位

  • :first :匹配第一个元素
  • :last :匹配最后一个元素
  • :even :匹配索引为偶数的元素   索引从0开始计算
  • :odd :匹配索引为奇数的元素
  • :eq(index) :匹配指定索引的元素
  • :gt(index) :匹配大于指定索引的元素
  • :lt(index) :匹配小于指定索引的元素
  • :not(selector) :排除某个元素
php教程
jquery 教程
php学习

#p#jquery教程-选择器使用详细教程#e#

jquery选择器详细教程

3.4 内容 选择器  对基本选择器和层级选取进一步的精确定位

  • :contains(text) :匹配包含指定内容的元素
  • :empty :匹配内容为空的元素
  • :has(selector) :匹配包含某个选择器的元素
  • :parent :匹配内容不为空的元素
jquery教程

3.5可见性 选择器  对基本选择器和层级选取进一步的精确定位

  • :hidden :匹配所有隐藏的元素
  • :visible :匹配所有显示的元素
jquery选择器

3.6 属性 选择器  对基本选择器和层级选取进一步的精确定位

  • [attribute] :匹配具有指定属性的元素
  • [attribute=value] :匹配属性等于指定值的元素
  • [attribute!=value] :匹配属性不等指定值的元素
  • [attribute^=value] :匹配以指定的属性值开头的元素
  • [attribute$=value] :匹配以指定的属性值结尾的元素
  • [attribute*=value] :匹配指定的属性出现过指定的属性值的元素
  • [selector1][selector2][selectorN] :匹配所有指定条件的元素
php教程
php教程

3.7 子元素 选择器 对基本选择器和层级选取进一步的精确定位

  • :nth-child(index/even/odd) :匹配指定索引的子元素 索引从1算起 
  • :first-child :匹配第一个子元素
  • :last-child :匹配最后一个子元素
  • :only-child :如果当前子元素是父元素的唯一元素,则匹配
php教程

3.8 表单 选择器 只针对表单

  • :input :匹配所有input元素
  • :text  :匹配所有文本框元素
  • :password :匹配所有密码框元素
  • :radio ;匹配单选按钮元素
  • :checkbox :匹配所有复选框元素
  • :submit :匹配提交按钮元素
  • :reset :匹配重置按钮元素
  • :image :匹配image按钮
  • :button :匹配所有button按钮
  • :file :匹配所有文件框 
  • :hidden :匹配所有隐藏域

其余用法相同:

jquery教程

3.9表单对象属性 

  • :enabled :匹配状态激活的元素
  • :disabled :匹配状态禁用的元素
  • :checked :匹配被选中项的元素  checkbox、radio
  • :selected :匹配下拉列表中选中项的元素    select
php教程

#p#jquery教程-属性详细教程#e#

属性,css 的使用

四.属性 属性

  • css
  • html
  • 文本

4.1 基本 属性

  • attr(name)

获取属性值

Name:属性名

  • attr(key,value)

设置属性值

Key:属性名

Value:属性值

  • attr(properties)

同时设置多个属性值

properties:要求是一个json格式的数据

  • attr(key,fn)

用一个函数的返回值做为指定属性的属性值

Key:属性名

fn:函数名

  • removeAttr(name)

移除某个属性

Name:要删除的属性名

php教程
jquery教程

4.2 Css (addClass/removeClass/toggle) 属性

  • addClass(class) 为指定的元素添加css类
  • removeClass(class) 移除元素的某个css类
  • toggleClass(class)  css类的切换 (如果使用了指定的类,则删除,如果没使用,则使用)
  • hasClass(class) 判断元素是否使用了某个css类

  

jquery教程
php教程

4.3 html/文本/值()

    html

innerHTML(js里面)

Value(js里面)

innerText   //js里面

php教程

五. Css:css,位置,尺寸

5.1 基本

php教程

5.2 位置

php教程

5.3 尺寸

php教程

#p#jquery教程-jquery对象和dom对象的比较#e#

jquery对象和dom对象的比较

六.Jquery对象和dom对象区别

通过以上的学习,我们了解到,可以通过$(selector)或者jquery(selector)的形式对所有页面内的对象进行获取,那么,这些获取到的对象和DOM 对象有何区别?

如:

6.1 dom对象

var div1=document.getElementById(‘div1’);

div1.innerHTML=’测试’;

这种写法表示获取一个dom对象,这个对象可以使用所有dom下的属性和方法

如:

document.getElementById(id);

document.getElementsByName(name);

document.getElementsByTagName(tagName);

6.2 jquery对象

$(‘div’).html();

这种写法表示获取一个jquery对象,这个对象可以使用所有jquery下的方法

$(“#id”)

$(“tagname”)

php教程

6.3 关于jquery对象和dom对象的转换问题

$(‘#div1’).html();

Document.getById().innerHTML

现在的问题:

比如说,我对jquery不是特别熟,但是喜欢用jquery里面的选择器,获取出来的将是一个jquery对象,那怎么调用相关的dom属性和方法

我得到一个dom对象,但我想用这个dom对象调用jquery中封装好的方法,该如何操作???

jquery[0] 或者jquery.get(0) :返回指定索引的数组元素(dom对象)

php教程
jquery对象

通过jquery获取所有复选框对象,再通过checked验证每一个是否被选中,如果选中,则弹出对应的值

jquery教程
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
Tools Online | 在线开发工具
RankList | 热门文章
Recommend | 推荐阅读
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有