jQuery -- 选择器、DOM、CSS操作

旧城等待， 2024-02-18 17:50 91阅读 0赞

什么是Jquery：是一个javascript库（主旨-用更少的代码实现更多的功能）

1、中文API在线查阅 [http://t.mb5u.com/jquery/][http_t.mb5u.com_jquery]

英文API在线查询 ：[http://api.jquery.com/][http_api.jquery.com]

一、

1、代码风格：不管是内置函数还是页面元素都是以美元符号$开头，$是jquery的一个重要对象，也是jquery的**缩写；**

alert（$）返回jquery内部方法；

alert（$()）返回jquery对象；

$("\#box").css('color','red');整体也返回jquery对象。连缀功能

Document.getElementById(“”);返回原生DOM对象，也可以通过jquery实现：$(‘\#box’).get(0)

2、加载模式

$()括号的原因是要等到加载完所有的页面元素之后才执行javascript代码；

window.ready对象：要等到页面所有元素加载完才执行而$(document).load()只需加载完DOM结构，即到body结束即可执行，所以效率更高

3、对象互换

从原生对象到jquery对象、从jquery对象到原生对象的互换

4、多个库之间的冲突

5、常规选择器

（1）简单选择器

A、**元素名称**：$(function()\{$('div').css('color','red'); \}) //返回所有的DOM对象

B、**ID** ：$(function()\{$("\#box").css('color','red');\}) // 返回单一DOM对象 注意：一个页面应只有一个ID

C、**class** ：$(function()\{$('.box').css('color','red');\}); //返回所有的DOM对象

（2）进阶选择器

A、**群组悬着器**：获取多个选择器的DOM对象

$(function()\{

$('div,p,strong').css('color','red'); //或者$('\#div,.p,strong').css('color','red');

\})

B、**后代选择器**：

$(function()\{

$('ul li a').css('color','red'); //层层追溯

\}) //ul 标签下的li标签下的a标签

C、**通配选择器**

在全局范围使用通配符会极大消耗资源，常用于局部范围内

$('ul li\*').css('color','red');

**D、可以在ID 、class选择器前加元素名：**

<divclass="box">div</div>

$('div.box').css('color','red');

一个元素多个选择器的情况：<div class="box pox">div</div> 精确的指定样式：$('.box.pox').css('color','red');

（3）高级选择器

A、**层次选择器**

**a**: 后代选择器: $('\#box p').css('color','red'); box下的所有p均有效 //也可以$('\#box').find('p').css('color','red');

**b**: 子选择器:孙子失效

$('\#box >p').css('color','red'); //box下的第一代p有效

也可以用：$('\#box').children('p').css('color','red');

**c**: next选择器：同级的下一个元素：$('\#box + p').css('color','red'); //box与p同级

也可以$('\#box').next('p').css('color','red');

$('\#box ~p').css('color','red'); //同级box下的所有p均有效 ，中间可以出现其他的

也可以 $('\#box').nextAll('p').css('color','red');

注意：next()不传参，则默认传递\*

$('\#box').prevAll('p').css('color','red'); 与next 相反

$('\#box').prev('p').css('color','red');

$('\#box').siblings('p').css('color','red'); //上下同级所有的p

$('\#box').nextUntil('p').css('color','red');//同级box下非p的元素，直到遇到p结束

$('\#box').prevUntil('p').css('color','red');

B、**属性选择器**

(4)过滤选择器

**A**、基本过滤器：以（:）号开头

1）：first 获取匹配的第一个元素  $('li:first'); 当然：last相反

2）：not(selector) 查找所有未选中的 input 元素

3）:even 匹配所有索引值为偶数的元素，从 0 开始计数；当然 :odd相反

……………………………………………………

**B**、内容过滤器

1）:contain(text) 匹配包含给定文本的元素

$("div:contains('John')") : 查找所有包含 "John" 的 div  元素

2):empty $("td:empty") 查找所有不包含子元素或者文本的空元素

3):has(selector) 匹配含有选择器所匹配的元素的元素

4):parent匹配含有子元素或者文本的元素 $("td:parent")

**C、可见性过滤器**

1）:hidden 匹配所有不可见元素，或者type为hidden的元素、style="display:none"

2):visible 匹配所有的可见元素

**D、子元素过滤器**：

1）:first-child 匹配第一个子元素

':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

2): last-child 匹配最后一个子元素

':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

3) :only-child如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

4) :nth-child(n) 匹配其父元素下的第N个子或奇偶元素

6、DOM基本操作和CSS操作

A、设置元素及内容

1) html() 、html(value) ：获取元素的html内容 //value用于替换html内容

2)text() 、 text(value) : 获取元素中的文本内容 //value用于替换文本内容

3)val()、val(value) 获取表单文本内容，对于下拉列表、复选框可以通过数组传值选定。

B、元素属性操作

1）attr(key) 如$("img").attr("src"); 以src为key获取值

2）attr(key,value)，设置值

3）attr(key,function) $("img").attr("title",function() \{ return this.src \});

4)removeAttr(key)删除以key为键的属性值

C、元素样式操作：

1）.css(): $("p").css("color"); 获取p元素的color属性值

$("p").css(\{color: "\#ff0011", background: "blue" \}); 设置相应值

$(“p”).css(‘width’,function()\{\}),通过匿名函数传值

2）$('div').each(function(index,element)\{

alert(index + ":" +element);

\}); //获取原生态对象数组

3）.addClass() 添加元素class样式如：

$('ulli:last').addClass(function() \{

return 'item-' + $(this).index();

\}); //添加了 class=”item-0”

与之相反的是removeClass

4) .toggleClass("selected") class两个样式之间的切换（默认样式和指定样式），点击切换

$("p").click(function()\{

$(this).toggleClass("highlight",count++ % 3 == 0);

\});

D、CSS方法：

1）.width() $(document).width()

$('ul').width('200px') //设置值

$('li').width(function(index,width)\{

return width - 500 + 'px';

\})

2）innerWidth()、innerHeigth()、outerHeigth()……

7、DOM节点操作：节点模型也就是DOM中的M

A、创建节点

var box = $('<div id="box">节点</div>') //创建节点

$('body').append(box); //插入节点

B、插入节点

(1)内部插入

\* append(content) $('div').append("<strong>DOM</strong>");

\*append(function()\{\})

$('div').append(function(index)\{

return "<strong>DOM</strong>";

\})

\*appendTo(content) $('strong').appendTo('div');移入到，不需要创建节点

\*prepend(content) $('div').prepend('<strong>yes</strong>') 在div下创建一个节点，该节点在其他节点之前

\* $('strong').prependTo('div');一到后面

（2）外部插入

\*after(content) $('div').after('<strong>df</strong>');

\*before(content)

\*inserBefore(content)

\*inserAfter(content)

C、包裹节点

\*wrap(html) $('div').wrap('<strong></strong>');包裹外层

\*wrap(function(index)\{return ‘<strong></strong>’\})

\*unwrap() $('div').unwrap();一层层移除

\*wrapAll() $('div').wrapAll('<strong></strong>');所有div被一层strong 包裹

\*wrapInner() $('div').wrapInner('<strong></strong>');内部包裹

D、节点操作

\*clone(true|false) 节点复制，true 事件也复制

\*remove(selector) 删除不保留事件

\*detach(selector) 删除后保留事件

\*replaceWith(content) 替代节点

7、表单选择器

A、常规选择器

\* $('input').val() //默认选择第一个

\* $('input').eq(1).val() //选择第二个

\* $('input\[name=user\]').val() //语义稍微清晰

B、表单选择器：返回的都是元素集合

\* :input //匹配所有 input, textarea, select 和 button  元素

$(":input").length // 匹配所有 input, textarea, select 和button  元素

$(‘input’).length //匹配input的值

$(":input\[name=password\]").val()

\* :password //匹配所有密码框

$(":password\[name=password\]").val()

…………………………

C、表单过滤器：

\*:enable $("form:enabled").length //当前可用

\*:disable $("form:disabled").length //当前不可用

\*:checked

\*:selected

[http_t.mb5u.com_jquery]: http://t.mb5u.com/jquery/
[http_api.jquery.com]: http://api.jquery.com/

jQuery -- 选择器、DOM、CSS操作

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery -- 选择器、DOM、CSS操作

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

相关 jQuery选择器及jQuery基本操作

相关 jquery 操作css 选择器

相关 jQuery 之（一）选择器、快捷操作

相关 Jquery选择器操作select、checkbox、radio

相关 Jquery选择器-基本选择器

相关 jQuery-jQuery选择器

相关 jQuery-选择器

相关 Jquery选择器与样式操作