一. 历史

1. jQuery概念:一款免费且开放源代码的JavaScript的代码库;

2. jQuery框架:(2006年,JavaScript专家-美国约翰特里),以其强大的DOM框架、Ajax封装等

一些功能为所有程序员所推崇;

3. jQuery的作用:

*DOM操作:强大、实用；

*事件绑定：一个事件触发多个动作，以及一个事件同时触发多个事件的处理函数；

*Ajax；

*特效。

*后面可以学下jQuery UI

*手机开发jQuery Mobie;

二. 部署jQuery

jquery-1.8.3.js：（学习版），没有去除空格与回车，具有可读性，方便学习

jquery-1.8.3.min.js：（开发版），去除多余的空格与回车，不具有可读性，但是代码进行压缩，整个大小只有92kb

使用JQuery: 复制核心js文件到项目目录中即可

三. jQuery教程: jQuery选择器（九大选择器）

九类找对象的方法

<1>基本选择器

=>通过id、class、标签找对象,以及可以同时找多个对象并赋值

<a> #id ：通过元素的id属性，匹配元素

eg: 这是#选择器

alert($('#p1').html()); //获取ID选择器双标签里面的内容

$('#p1').html('重新赋值'); //给对象重新赋值

 Element :通过元素名称，匹配元素

eg: <div>测试</div>

alert($('div').html());

<c> selector1,selector2 ：同时匹配多个选择器,元素与元素之间用逗号隔开

eg:所有p标签和div值全部重新赋值

$('div,p').html('这是多条件选择器');

注意: 里面不仅可以输元素,还可以是ID选择器,这样可以精确赋值标签

*所有div标签和id为p1,class为p的标签重新赋值

$('div,#p1,.p').html('这是多条件选择器');

<d> .class ：通过元素的class属性，匹配元素

eg:这是类选择器

$('.p').html('');//把标签赋值为空;

<2>层级选择器

=>当基本选择器中元素匹配对象不适用时,使用层级选择器;

<ul>

</ul>

这是p标签

这是span1标签

<li>这是li标签</li>

这是span2标签

<a> ancetor descendant ：选取ancetor元素下的所有后代元素(所有父子孙元素…)

中间用空格隔开;

eg: $('ul li').html('测试'); //ul下所有子标签li的值改为测试;中间空格;

$('ul li a span').html('测试') //精确把"这是三号"改为'测试';

$('ul li a span').css('color','red'); //把这是三号变成红色的

 parent > child ：选取parent下的子元素(父子关系)

eg: $('a>span').css('color','red'); //通过a标签获取其子标签span

<c> prev + next ：选取prev元素的相邻的下一个元素（同级）

eg: $('#p1+span').html('这是邻居'); //通过p标签获取下一个元素标签span

<d> prev~元素：选取prev元素的后面所有同级元素

eg: $('#p1~span').html('这是所有邻居'); //p标签后面所有的span标签重新赋值

<3>简单选择器

=>常用语有序、无序、td等在同一表格大量出现的标签

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

<a>:first ：选择第一个元素

eg: $('td:first').html('11'); //把第一个td的值改为11

:last ：选取最后一个元素

<c>:even ：偶数索引的值索引从0开始

$('tr:odd').css('backgroundColor','red') //偶数行背景色变色为红色,隔行变色

<d>:odd ：奇数

<e>:eq(索引) ：选取索引为index的元素，默认从0开始

eg: $('td:eq(5)').html(666); //将6改为666;

<f>:gt(index) ：选择索引大于index的元素，默认从0开始

<g>:lt(index) ：选取索引小于index的元素，默认从0开始

<h>:not(selector) ：选择选择器不为selector的元素括号里面的元素可以是id\类等各种选择器

eg: $('td:not(.td1)').html(888); //除了td为3不变,其他的td值改为8

<4>内容选择器

<a> :contains(text) ：匹配元素内容包含text文本的元素

 :empty ：匹配元素内容为空的元素

eg: $('td:empty').html(1231); //把td中内容为空的元素赋值为1231;

<c> :has(selector) ：匹配具有元素的元素

<d> :parent ：匹配内容不为空的元素

<5>可见选择器

<a> :hidden ：匹配所有隐藏元素（display:none与type=hidden）

 :visible ：匹配所有可见元素

<6>属性选择器

这是1号

这是2号

这是3号

<a> [attribute] ：匹配具有某一属性的元素

eg:$('[color]').html('把color属性的值改变');//把所有具有color属性的元素值改变

 [attribute=value] ：匹配属性值等于value的元素

eg: $('[color=red]').html('把color属性的值=red的改变'); //把color属性的值=red的改变

<c> [attribute!=value] ：匹配属性值不等于value的元素

<d> [attribute^=value] ：匹配属性值以value开始的元素

<e> [attribute$=value] ：匹配属性值以value结尾的元素

<f> [attribute*=value] ：匹配属性值包含value的元素

<g> [selector1][selector2][selectorN] ：匹配具有多个指定属性的元素

eg: $('[color][size]').html('独一无二'); //找到同时有color属性和size属性的元素赋值独一无二

<7>子元素选择器

=>了解!

<a> :nth-child(index/even/odd) 从1算起：匹配满足条件（索引，偶数，奇数）子元素

:first-child ：选取第一个子元素

<c> :last-child ：选取最后一个子元素

<d> :only-child ：选取子元素且该子元素是唯一的子元素，则匹配

<8>表单选择器

<a> :input ：匹配所有表单元素（包含select、textarea）不太适用

eg: console.log($(':input')); //匹配出所有表单元素对象

面试题：jquery中:input与input的区别？

:input是匹配所有表单元素

input单独匹配input标签;

 :text ：匹配所有text文本框

val()是jquery对象中获取单标签的值

eg: $('input:text').val('100'); 把input中所有text文本内容重新赋值100;

<c> :password ：匹配所有密码框

eg: $('input:password').css('backgroundColor','green');

<d> :radio ：匹配所有单选

<e> :checkbox ：匹配所有复选框

eg: $('input:checkbox').val('活力'); 把所有复选框的值改为活力

<f> :submit ：匹配所有提交按钮

<g> :reset ：匹配所有重置按钮

<h> :image ：匹配所有图像域

 :button ：匹配所有button按钮（type=’button’或button标签）

<j> :file ：匹配所有文件域

<k> :hidden ：匹配所有隐藏表单

<9>表单对象属性选择器

=>以后做批量删除比较实用

<a> :enabled ：选取所有可用表单

:disabled ：选取所有不可用表单

<*c*> :checked ：选取所有选中的表单元素（单选框与复选框、下拉框）

eg: alert($(':checked').val()); //弹出的是选择框第一个值

var check=$('input:checkbox:checked'); //获取input下所有复选框里面被选中的元素

for (var i = 0; i < check.length; i++) {

alert(check[i].value); //里面是DOM对象

};

<*d*> :selected ：选取被选中的下拉选框（下拉）

<七>查找对象操作

<1> index(): 获取对象的索引下标，从0开始............................

<2> eq(index) ：通过元素的索引匹配元素，默认索引从0开始...............

eg: alert($('a').eq(2).html()); //联系我们

<3> siblings(同级元素): 获取所有的同级元素..........................

<4> filter(expr) ：通过class进行元素过滤匹配元素

eg: alert($('li').filter('.li').html()); //过滤 <a href="">首页</a>

<5> not(expr) ：匹配不是指定选择器元素

<6> parent([expr]) ：查找当前元素的父元素............................

eg: $('span').parent().css('backgroundColor','red');//从儿子找到父亲 ,父亲只有一个,然后加样式

<7> children([expr]) ：匹配所有子元素，里面可以加标识(子元素)..........

eg: $('.li').children('span').html('找到span标签,li的第二个儿子'); //从父元素找到子元素,儿子有多个,要精确查找

<8> find(expr) ：通过后代选择器查找元素(后代元素)......................

eg: $('.li').find('span').html('这是li的第三个儿子');//直接通过find方法找后代,更简单,推荐使用

<9> next([expr]) ：查找下一个元素（相邻的）

<10> prev([expr]) ：查找上一个元素（相邻的）

jQuery初识------01

目录

一. 历史

二. 部署jQuery

三. jQuery教程: jQuery选择器（九大选择器）

猜你喜欢