JQuery基础知识

jQuery基础知识:

1.jquery涉及到的概念

js类库:

对常用的方法和对象进行封装,方便我们使用，jquery是单独的js文件，通过script标签的src属性导入即可

获取一个jquery对象：

$("选择器")  或者 jQuery("选择器")

dom对象和jquery对象之间的转换

dom对象===>jquery对象

$(dom对象)

jquery对象===>dom对象

方式1:

jquery对象[index]

方式2:

jquery对象.get(index)

页面加载:

js方式: 在一个页面中只能使用一次

window.οnlοad=function(){}    

jquery方式：在一个页面中可以使用多次

方式1:

$(function(){...})

方式2:

$(document).ready(function(){});

派发事件:

$("选择器").click(function(){...});
等价于 原生js中
dom对象.οnclick=function(){....}
掌握事件:
focus
blur
submit
change
click

jquery中效果:

隐藏或展示

show(毫秒数) hide(毫秒数)

滑入或滑出

slideDown(毫秒数):向下滑入

slideUp(毫秒数):向上滑出

淡入或淡出

fadeIn(int):淡入

fadeOut(int):淡出

2.选择器知识总结

基本选择器：
$("#id值")  $(".class值")  $("标签名")  
理解:获取多个选择器 用逗号隔开
$("#id值,.class值")

·id选择器
要求:
html元素必须有id属性且有值   <xxx id="id1"></xxx>
css中通过"#"引入,后面加上id的值  #id1{...}
·class选择器
要求:
html元素必须有class属性且有值 <xxx class="cls1"/>
css中通过"."引入,后面加上class的值  .cls1{...}
·元素选择器
直接用元素(标签)名即可   xxx{...}

派生的选择器：

属性选择器

要求:

html元素必须有一个属性不论属性是什么且有值  <xxx nihao="wohenhao"/>

css中通过下面的方式使用

元素名[属性="属性值"]{....}

例如:

xxx[nihao="wohenhao"]{....}

后代选择器

选择器 后代选择器{...}   在满足第一个选择器的条件下找后代的选择器,给满足条件的元素添加样式

层次选择器 

a b:a的所有b后代

a>b:a的所有b孩子

a+b:a的下一个兄弟(大弟弟)

a~b:a的所有弟弟

基本过滤选择器:

:frist 第一个

:last 最后一个

:odd  索引奇数

:even 索引偶数

:eq(index) 指定索引

:gt(index) >

:lt(index) <

内容过滤:

:has("选择器"):包含指定选择器的元素

可见过滤:

:hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none

:visible 

属性过滤器:

[属性名]

[属性名="值"]

表单过滤:

:input  所有的表单子标签  input select textarea button

//input

表单对象属性过滤选择器：

:enabled   可用的

:disabled  不可用

:checked 选中的(针对于单选框和复选框的)

:selected 选中的(针对于下拉选)

3.属性和css操作总结

对属性的操作:
attr():设置或者获取元素的属性

方式1:获取
attr("属性名称")
方式2:设置一个属性
attr("属性名称","值");
方式3:设置多个属性  json格式设置
attr({
"属性1":"值1",
"属性2":"值2"
})

removeAttr("属性名称"):移除指定属性
添加class属性的时候 

attr("class","值");
addClass("指定的样式值")，相当于 attr("class","指定的样式值");

removeClass("指定的样式值");

对css操作:操作元素的style属性
css():获取或者设置css样式

方式1:获取  
css("属性名")
方式2:设置一个属性
css("属性名","值")
方式3:设置多个
css({
"属性1":"值1",
"属性2":"值2"
});

获取元素的尺寸:

width()
height()

4.遍历数组

两种方式：

数组.each(function(){});
$.each(遍历数组,function(){});

注意:

each的function中可以加两个参数 index和dom：

index是当前遍历的索引值，dom指代的是当前遍历的dom对象(开发中一般使用this即可)

设置或者获取value属性

jquery对象.val():获取
jquery对象.val("...."):设置

设置获取获取标签体的内容 

html()
text()

xxxxx():获取标签体的内容
xxxxx("....."):设置标签体的内容
设置的区别:

html:会把字符串解析
text:只做为普通的字符串

获取的区别:

html:获取的html源码
text:获取只是页面展示的内容

创建一个元素: $("<标签></标签>")
文档操作:

内部插入

a.append(c):将c插入到a的内部(标签体)后面

a.prepend(c):将c插入到a的内部的前面

appendTo

prependTo

外部插入

a.after(c):将c放到a的后面

a.before(c):将c放到a的前面

a.insertAfter(c)

a.insertBefore(c)

删除

empty() 清空元素

remove() 删除元素