前端-----Jquery

jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

//jquery对象转化为dom对象
方法1
var $div=$("div")
var div=$div[0]
div.style.color="red"

方法2
var $div=$("div")
var div=$div.get(0)
div.style.color="red"

//dom对象转化为jquery对象
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

var div=document.getElementsByTagName("div")
var $div=$(div)
var $first=$div.first()
$first.css("color","red")

//id选择器
$("#id")
    var $div=$("#imooc");
        $div.css("border", "3px solid red");

//类选择器
     var $imooc=$(".imooc");
        $imooc.css("border", "3px solid red");

//元素选择器
$( "element" )
     $("p").css("border", "3px solid red");

//全选择器
* {padding: 0; margin: 0;}
通配符*意味着给所有的元素设置默认的边距。
    $("*")

//层级选择器
//子选择器  $('div > p') 选择所有div元素里面的子元素P  直接子元素
//后代选择器$('div  p')   选择所有div元素里面的p元素  包括 孩子 孙子 曾孙等
//相邻兄弟选择器 $(".prev + div")  选取prev后面的第一个的div兄弟节点
//一般相邻选择器 $(".prev ~ div") 选取prev后面的所有的div兄弟节点

//相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

//基本筛选选择器
找到第一个div    $(".div:first")
找到最后一个div  $(".div:last"
:even 选择所引值为偶数的元素，从 0 开始计数  $(".div:even") 0也是偶数
:odd 选择所引值为奇数的元素   $(".div:odd")
选择索引值为index的元素 $(".div:eq(index)")
选择匹配集合中所有大于给点index的元素 $(".div:gt(index)")
选择匹配集合中所有小于给点index的元素 $(".div:lt(index)")
选择所有标题元素 $(":header")
选择该文档的根元素 $(":root")
选择所有正在执行动画效果的元素 $(":animated")
选择所有元素,去除不匹配的给定的选择器元素 $(":not(selector)")
//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色 $("input:not(:checked) + p")

//内容筛选选择器
查找所有class='div'中DOM元素中包含"contains"的元素节点
$(".div:contains(text)") 选择包含指定文本的元素

查找所有class='div'中DOM元素中包含"span"的元素节点
$(".div:has(span)").css("color", "blue");

选择所有包含子元素或者文本的a元素
$("a:parent")

找到a元素下面的所有空节点(没有子元素)
$("a:empty")

//可见性筛选选择器
$(":visible") 选择所有显示的元素
$(":hidden")  选择所有隐藏的元素

//属性筛选选择器
查找所有div中，属性name=p1的div元素  $('div[name=p1]')
查找所有div中，有属性名为p2的div元素  $('div[p2]')
查找所有div中，有属性name中的值只包含一个连字符“-”的div元素  $('div[name|="-"]')
查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素   $('div[name~="a"]')
查找所有div中，属性name的值是用imooc开头的  $('div[name^=imooc]')
查找所有div中，属性name的值是用imooc结尾的 $('div[name$=imooc]')
查找所有div中，有属性name中的值包含一个test字符串的div元素 $('div[name*="test"]')
查找所有div中，有属性testattr中的值没有包含"true"的div $('div[testattr!="true"]')

//子元素筛选选择器
  不常用

//表单元素选择器
查找所有 input, textarea, select 和 button 元素  $(':input')
匹配所有input元素中类型为text的input元素  $('input:text')
匹配所有input元素中类型为password的input元素  $('input:password')
匹配所有input元素中的单选按钮,并选中  $('input:radio')
匹配所有input元素中的复选按钮,并选中  $('input:checkbox')
匹配所有input元素中的提交的按钮,修改背景颜色 $('input:submit')
匹配所有input元素中的图像类型的元素,修改背景颜色 $('input:image')
匹配所有input元素中类型为按钮的元素 $('input:button').css("background", "red");
匹配所有input元素中类型为file的元素  $('input:file')

//表单对象属性筛选选择器
查找所有input所有可用的（未被禁用的元素）input元素。 $('input:enabled')
查找所有input所有不可用的（被禁用的元素）input元素。  $('input:disabled')
查找所有input所有勾选的元素(单选框,复选框)   $('input:checked')
查找所有option元素中,有selected属性被选中的选项   $('option:selected')

//特殊选择器this

//在img元素中，src就是元素的特性，用来标记图片的地址。
//操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法

//jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写
//删除removeAttr   $("input:eq(3)").removeAttr('value')

attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

attr() 方法设置或返回被选元素的属性和值。
$(selector).attr(attribute)
$(selector).attr(attribute,value)
$(selector).attr(attribute,function(index,currentvalue))
$(selector).attr({attribute:value, attribute:value,...})

//jQuery的属性与样式之html()及.text()
.html()方法 

获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：

.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
.html( htmlString )  设置每一个匹配元素的html内容
.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

.text()方法

得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：

.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数

.text()结果返回一个字符串，包含所有匹配元素的合并文本

.html与.text的方法操作是一样，只是在具体针对处理对象不同
.html处理的是元素内容，.text处理的是文本内容
.html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的

//.val() 主要用于处理表单
jQuery中有一个.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。
.val()方法

.val()无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )，设置匹配的元素集合中每个元素的值
.val( function ) ，一个用来返回设置值的函数

.html()是用来读取元素的html内容（包括html标签），
.text()用来读取元素的纯文本内容，包括其后代元素，
.val()是用来读取表单元素的"value"值。

//.addClass()
一个节点可以有多个类 eg: <div class1="1" class2="2"></div>

.addClass( className )方法

.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

 $('.left div').addClass('newClass')

 $("div").addClass(function(index,className) {

            //找到类名中包含了imooc的元素
            if(-1 !== className.indexOf('imooc')){
                //this指向匹配元素集合中的当前元素
                $(this).addClass('imoocClass')
            }
        });

//jQuery的属性与样式之删除样式.removeClass()

.removeClass( )方法

.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

class=left下div元素删除newClass样式
$('.left div').removeClass('newClass')

//.next() 方法返回被选元素的后一个同级元素。

比如说代码是  $选择器.remove(function(a,b){函数体；return 返回值}）
这里remove(function())相当于个固定格式，
a是选择器所选元素的index值，
b是所选元素的classname值。
后面的函数体部分跟这个function运行无关，
你可以编写进行一些操作，return的返回值是返回给remove()的，
这个返回值要写索要删除的classname值。

//jQuery的属性与样式之切换样式.toggleClass()
.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,
取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

//jQuery的属性与样式之样式操作.css()

.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果

设置：

 .css(propertyName, value )：设置CSS     $('.fourth').css("background-color","red")
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式

可以获取元素的css
    $('p:eq(0)').text( $('.first').css("background-color") )
    $('p:eq(1)').text( $('.first').css("font-size") )
    var value = $('.first').css(['width','height']);

    var value = $('.first').css(['width','height']);
        //因为获取的是一个对象，取到对应的值
        $('p:eq(2)').text( 'widht:' + value.width +  ' height:' +value.height )

//设置
css("font-size","15px")
css("fontSize","0.9em")
css("background-color","red")
css("backgroundColor","yellow")

css("width",function(index,value){
            //value带单位，先分解
            value = value.split('px');
            //返回一个新的值，在原有的值上，增加50px
            return (Number(value[0]) + 50) + value[1];
        })