jQuery 是一个 JavaScript 函数库,jQuery库包含以下特性(HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities)。

jQuery目前包含三个版本:jQuery的1.x、jQuery的2.x、jQuery的3.x(jquery-2.0以上版本不再支持IE 6/7/8),每个版本中都会有两个类型提供选择uncompressed(未压缩版,用于测试和开发), minified(压缩版,用于实际的网站中),jQurey下载引用地址:点击

jQuery的两种使用方式:

  • 下载jQuery文件放到与页面相同的目录中使用
<script src="jquery-1.12.4.js"></script>
  • 通过 CDN(内容分发网络) 引用jQuery
#百度压缩版引用地址:
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

#微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>

#官网jquery压缩版引用地址:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

 jQuery与Dom对象之间的转换:

// $(Dom对象)    =>jQuery对象
var a = document.getElementById("MySignature")
<div id=​"MySignature">​</div>​
$(a)
//输出:n.fn.init [div#MySignature, context: div#MySignature]0: div#MySignaturecontext: div#MySignaturelength: 1__proto__: Object(0)


//jquery对象[0]   => Dom对象
$(a)[0]
//输出:<div id=​"MySignature">​</div>​

 

一、查找元素

1、jQuery常用选择器,直接找到某个或者某类标签:

 1.1、id、class、标签、组合、层级查找元素

$('#id')    					//根据id查找元素
$(".c1")				     //根据class查找元素	
$('a')					        //查找出所有标签为a的元素
$('a,.c2,#i10')					//查找出所有标签为a、class=c2、id=i10的元素,并将匹配到的元素合并到一个结果内
$('#i10 a') 					//查找出id=i10标签下的所有的后代元素
$('#i10>a')				        //查找出id=i10标签下的子元素
$('#i10+a') 					//查找出id=i10标签的下一个兄弟元素
$('#i10~a')				        //查找出id=i10标签的下一个siblings元素

1.2、基本筛选器、属性查找元素

常用的基本筛选器
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
$('li:first');          //匹配第一个li元素
$('li:last');        //匹配的最后一个li元素
$('li:eq(2)');        //匹配下标索引为2的li元素(从0开始)
$('li:gt(2)');        //匹配下标索引大于2的li元素(从0开始)
$('li:even');        //匹配下标索引为偶数li元素
$('li:odd');        //匹配下标索引为奇数li元素

属性
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
$('[name]')                     //匹配具有name属性的所有标签
$('[name="milkman"]')             //匹配name属性等于milkman的标签
$("input[name='milkman']")        //匹配input标签下name属性等于milkman的标签
$("input[name!='milkman']")        //匹配input标签下name属性不等于milkman的标签
$("input[name^='milk']")        //匹配input标签下name属性以milk开头的标签
$("input[name$='man']")            //匹配input标签下name属性以man结尾的标签
$("input[name*='man']")            //匹配input标签下name属性包含man的标签
基本筛选器、属性

相关文章:

  • 2022-01-22
  • 2021-05-17
  • 2021-05-23
  • 2021-11-27
  • 2022-12-23
  • 2022-12-23
  • 2021-05-04
  • 2021-11-03
猜你喜欢
  • 2021-07-24
  • 2021-09-29
  • 2021-12-06
  • 2021-12-21
  • 2022-12-23
  • 2021-11-29
相关资源
相似解决方案