（与jQuery靠近乎）02-与jQuery的初遇

今天，我还是风尚，一个有梦想的咸鱼程序员

今天我们还来和jQuery来靠近乎

首先先来问大家几个问题吧

jquery的核心函数是？

jquery的入口函数与onload区别？

css基本选择器有哪些？

css有哪些层次选择器？

这几个问题是否难为着你了？你是否感觉去翻了翻你雪藏的笔记？

是的话你得好好龚实一下你的jq和css基本功了啊！！！

问题答案欢迎大家在下方评论哦！

今日份必备单词

text 文本    fade  淡入淡出     has  有       children 子        slide 滑动            animated   动画                                hover 悬停               remove  移除                                               

今日份内容：

jQuery的选择器    jQuery对象内容获取    jQuery对象显示与隐藏     jQuery CSS操作

jQuery 类操作     jQuey 属性操作

 

--------------------------------------------------------------------------------------------------------------------------

选择元素---

JQ中选择页面元素和CSS是一致的
$(“#app”)      选择id为app的元素
$(“.sp”)         选择class值为sp的元素
$(“h1”)  选择标签名为h1的元素

基本过滤选择器整合

选择器	描述	返回	示例
:first	选择第1个元素	单个元素	$(“div:first”)选择第1个div元素
:last	选择最后1个元素	单个元素	$(“div:last”)选择最后1个div元素
:not(E1)	去除所有E1选择器匹配的元素	集合元素	$(“input:not(.my)”)选择class不是.my的 所有input元素
:even	选择索引是偶数的所有元素，索引从0开始	集合元素	$(“tr:even”)选择表格中所有偶数的行
:odd	选择索引是奇数的所有元素，索引从0开始	集合元素	$(“tr:odd”)选择表格中所有奇数的行
:eq(index)	选择索引值是index的元素，index从0开始	单个元素	$(“tr:eq(1)”)选择表格行索引等于1的行
:gt(index)	选择索引值大于index的元素,index从0开始	集合元素	$(“tr:gt(1) ”)选择表格行索引大于1的行
:lt(index)	选择索引值小于index的元素,index从0开始	集合元素	$(“tr:lt(1)”)选择表格行索引小于1的行
:header	所取所有的标题元素,h1~h6	集合元素	$(“:header”)选择网页中所有的<h1>, <h2>…<h6>
:animated	选择当前正在执行动画的所有元素	集合元素	$(“div:animated”)选择正在执行动画的 div元素

内容过滤选择器

选择器	描述	返回值	示例
:contains(text)	选择含有text文本内容的元素	集合元素	$(“div:contains(‘我’)”)选择内容里包含我的所有div
:empty	选择不包含子元素或文本的空元素	集合元素	$(“div:empty”)选择不包含子元素（含文本）的所有div元素
:has(E1)	选择包含有(E1选择器匹配的元素)的所有元素	集合元素	$(“div:has(p)”)选择含有p元素的所有div元素
:parent	选择含有子元素或文本的元素	集合元素	$(“div:parent”)选择拥有子元素（包含文本）的所有div元素

可见过滤选择器

选择器	描述	返回值	示例
:hidden	选择所有不可见元素	集合元素	$(“:hidden”)选择所有不可见元素，包括：<input type=“hidden”/>, <div style=“display:none”>和<div style=“visibility:hidden”>等， 如果只选择<input>元素，则可以使用 $(“input:hidden”)
:visible	选择所有可见元素	集合元素	$(“div:visible”)选取所有可见的div元素

操作元素中的内容：

设置：

.html(“str”)   设置元素的里面的内容 可用带html标签

.text(“str”)    设置元素的里面的内容 可用不带html标签

.val(“str”)     设置表单的值

获取

.html()       .text()        .val()

.html(),.text()和.val()的差异总结： 

 .html()是用来读取元素的html内容（包括html标签），

.text()用来读取元素的纯文本内容，包括其后代元素，

.val()是用来读取表单元素的"value"值

关于内容操作：

jQ 事件和js的事件名称是一致的，事件名不带on
$(“button”).click(function(){
// 事件操作
})

JQ中显示隐藏对象

// $(".block").hide()    		隐藏
// $(".block").fadeOut();  		淡出
// $(".block").slideUp();		向上滑出
// $(".block").show(); 		显示
// $(".block").fadeIn(); 		淡入 
// $(".block").slideDown();		向下滑入
// $(".block").fadeToggle();		切换淡入淡出
$(".block").slideToggle("slow"); 	//切换滑入滑出
高级用法：速度与回调函数
fadeIn(speed,[callback] )     

jq中样式操作：

设置单条样式：

.css(“属性名”，”属性值”)

设置多条样式：

.css({“属性名1”:”属性值1”,”属性名2”:”属性值2”,……})

获取样式值：

.css(“属性名”)

jq中的类操作：

1.增加类 .addClass(“类名1 类名2 ……”)   多个类名之间用空格隔开可增加/删除多个类

2.删除类.removeClass(“类名”)

3.切换类.toggleClass(“”)   

.toggleClass(“类名”,true/false)    用来判断样式类添加还是移除的 布尔值

jq中属性操作

01-attr---属性操作attr

获取属性  获取元素的属性

attr("属性名");    .attr(“title”) 获取元素的title属性

设置属性

.attr(“属性名”,”属性值”)

.attr(“title”,”风尚真帅”)   设置元素的title属性为“风尚真帅“

02-prop--表单属性操作prop

获取属性      获取元素的属性

prop("属性名");    .prop(“checked”) 获取表单的选中属性

设置属性

.prop(“属性名”,”属性值”)

.attr(“disabled”,”true”)   设置表单元素不可用

03-attr与prop的区别：

1、操作对象不同

很明显，attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。不过，在jQuery中，attribute和property却是两个不同的概念。

attribute表示HTML文档节点的属性，property表示JS对象的属性。

prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；

attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

2、应用版本不同

attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。

总的来说：

• 对于HTML元素本身有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
• -----------------------------------------------------------------------------------------------------------------

今日份分享到这里结束了

我还是风尚，一个有梦想的咸鱼程序员！让我们一起努力，共创明天的辉煌！喜欢就给个小关注啊，关注风尚不迷路！