jQuery初识------01

目录

一. 历史

二. 部署jQuery

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

---

一. 历史

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、标签找对象,以及可以同时找多个对象并赋值

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

eg:

这是#选择器

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

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

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

eg:

测试

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

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

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

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

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

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

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

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

eg:

这是类选择器

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

<2>层级选择器

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

• 这是1号

• 这是2号

• 这是三号

这是p标签

这是span1标签

这是li标签

这是span2标签

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

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

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

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

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

<3>简单选择器

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

1	2
3
5	6

:first ：选择第一个元素

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

:last ：选取最后一个元素

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

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

:odd ：奇数

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

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

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

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

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

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

<4>内容选择器

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

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

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

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

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

<5>可见选择器

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

:visible ：匹配所有可见元素

<6>属性选择器

这是1号

这是2号

这是3号

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

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

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

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

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

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

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

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

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

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

<7>子元素选择器

=>了解!

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

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

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

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

<8>表单选择器

: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;

:password ：匹配所有密码框

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

:radio ：匹配所有单选

:checkbox ：匹配所有复选框

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

:submit ：匹配所有提交按钮

:reset ：匹配所有重置按钮

:image ：匹配所有图像域

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

:file ：匹配所有文件域

:hidden ：匹配所有隐藏表单

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

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

: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()); //过滤 首页

<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]) ：查找上一个元素（相邻的）