admin
管理员
管理员
  • UID1
  • 粉丝2
  • 关注2
  • 发帖数339
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:4788回复:0

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

楼主#
更多 发布于:2013-10-25 13:02
分享到:

一.什么是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 language=’javascript’ src=’jquery-1.4.4.js’></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 :匹配使用指定类选择器的元素


 3.2 层级 选择器
  • ancetor descendant :匹配祖先元素的第一个后代元素
  • parent > child :匹配父元素下的所有子元素
  • prev + next :匹配prev元素的next元素
  • prev~siblings :匹配prev元素的平辈元素


3.3简单 选择器  对基本选择器和层级选取进一步的精确定位
  • :first :匹配第一个元素
  • :last :匹配最后一个元素
  • :even :匹配索引为偶数的元素   索引从0开始计算
  • :odd :匹配索引为奇数的元素
  • :eq(index) :匹配指定索引的元素
  • :gt(index) :匹配大于指定索引的元素
  • :lt(index) :匹配小于指定索引的元素
  • :not(selector) :排除某个元素




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

jquery选择器详细教程


3.4 内容 选择器  对基本选择器和层级选取进一步的精确定位
  • :contains(text) :匹配包含指定内容的元素
  • :empty :匹配内容为空的元素
  • :has(selector) :匹配包含某个选择器的元素
  • :parent :匹配内容不为空的元素


3.5可见性 选择器  对基本选择器和层级选取进一步的精确定位
  • :hidden :匹配所有隐藏的元素
  • :visible :匹配所有显示的元素


3.6 属性 选择器  对基本选择器和层级选取进一步的精确定位
  • [attribute] :匹配具有指定属性的元素
  • [attribute=value] :匹配属性等于指定值的元素
  • [attribute!=value] :匹配属性不等指定值的元素
  • [attribute^=value] :匹配以指定的属性值开头的元素
  • [attribute$=value] :匹配以指定的属性值结尾的元素
  • [attribute*=value] :匹配指定的属性出现过指定的属性值的元素
  • [selector1][selector2][selectorN] :匹配所有指定条件的元素



3.7 子元素 选择器 对基本选择器和层级选取进一步的精确定位
  • :nth-child(index/even/odd) :匹配指定索引的子元素 索引从1算起
  • :first-child :匹配第一个子元素
  • :last-child :匹配最后一个子元素
  • :only-child :如果当前子元素是父元素的唯一元素,则匹配


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

其余用法相同:

3.9表单对象属性
  • :enabled :匹配状态激活的元素
  • :disabled :匹配状态禁用的元素
  • :checked :匹配被选中项的元素  checkbox、radio
  • :selected :匹配下拉列表中选中项的元素    select


#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:要删除的属性名


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

   <div class=’a  b  c’></div>


4.3 html/文本/值()
    html
  • html():获取
  • html(val) :设置

innerHTML(js里面)
  • val():获取
  • val(val) :设置

Value(js里面)
  • text() :获取
  • text(val) :设置

innerText   //js里面

五. Css:css,位置,尺寸
5.1 基本
  • css(name) 获取css属性值
  • css(name,value) 设置css属性值
  • css(properties) 使用json同时设置多个css属性值


5.2 位置
  • offset()  获取对象的位置,该方法会返回一个json数据类型,这个数据有两个属,分别为left、top。
  • offset(coordinates)  使用json数据设置对象的位置,这个json要求有left和top属性


5.3 尺寸
  • width()获取对象的宽度
  • width(value) 设置对象的高度
  • height()获取对象的高度
  • height(value)设置对象的高度


#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”)

6.3 关于jquery对象和dom对象的转换问题
  • Jquery对象只能使用jquery内封装的方法

$(‘#div1’).html();
  • Dom对象只能使用标准dom提供的方法

Document.getById().innerHTML
现在的问题:
比如说,我对jquery不是特别熟,但是喜欢用jquery里面的选择器,获取出来的将是一个jquery对象,那怎么调用相关的dom属性和方法
我得到一个dom对象,但我想用这个dom对象调用jquery中封装好的方法,该如何操作???
  • Jquery对象转换为Dom对象

jquery[0] 或者jquery.get(0) :返回指定索引的数组元素(dom对象)
  • Dom对象转换为Jquery对象;直接在dom对象外面加个$即可:$(dom)

  • 例题:

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

返回顶部