Jquery基础

JQuery

1.    Jquery与DOM对象是不一样的

DOM对象：

<p id=”imcoo”></p>

<script>

var p=document.getElementById(‘imooc’);

p.innerHTML=’您好，好好学习’;

p.style.color=’red’;

</script>

通过DOM原生的DOM模型获取DOM元素，再通过innerHTML与stryle属性处理

JQuery：

<p id=”imcoo”></p>

var p=$(‘#imooc’);

p,html(“好好学习”).css(‘color’,’red’);

通过$方式获取$p的JQuery对象，$P是一个类数组对象，这个对象里面包含DONM对象的信息，然后封装了很多操作，调用自己的方法Html，css，得到效果与JavaScript处理的结果一致

2.    JQuery对象转化为DOM对象

JQuery库本身还是JavaScript代码，它只是对JavaScript进行封装，为了是提供更好的操作。JQuery是一个类数组对象，DOM对象是一个单独的DOM元素。

JQuery转化为DOM元素

<div>元素1</div>

<div>元素2</div>

var $div=$(‘div’)//JQuery对象

var div=$div[0]//转化为DOM对象

var div=$div.get(0)//通过get方法获取

3.    DOM元素转化为JQuery对象

<div>元素1</div>

<div>元素2</div>

获取DOM元素

var div ＝docment.getElementByTagName(‘div’);//DOM元素

var $div=$(div)，转化为JQuery对象（类数组）

4.    JQuery－ID选择器

页面元素的操作都需要节点的支持，JQuery提供一种根据Id属性直接获取的方法：$(“#id”) 注意在页面中id属性是唯一的。

ID选择器在JQuery中使用JS的docment.get ElementById的方法。

5.    类选择器

通过class样式进行获取节点的

$(“.class”) 类选择器相对id选择器来说，效率相对低一点但是优势是可以多选。jQuery使用js原生的get ElementByClassName函数来实现的，内部实现了很多方法。

/通过原生方法处理

        //样式是可以多选的，所以得到的是一个合集

        //需要通过循环给合集中每一个元素修改样式

        var divs =document.getElementsByClassName('aaron');

        for (var i = 0; i <divs.length; i++) {

           divs[i].style.border = "3px solid blue";

        }

<script type="text/javascript">

        //通过jQuery直接传入class

        //class选择器可以选择多个元素

       $(".aaron").css("border", "3px solidred");

    </script>

6.    元素选择器

根据给定的（html）标记名称选择所有的元素

$(“element”)搜索制定的元素签名的所有节点，这个是集合操作。同样的也是js原生getElemrntByTagName函数实现的

<script type="text/javascript">

    //通过原生方法处理

    //获取到所有的节点标记名为div的元素

    //给每一个div加上蓝色的边框

    var divs =document.getElementsByTagName('div');

    for (var i = 0; i <divs.length; i++) {

        divs[i].style.border ="3px solid blue";

    }

</script>

<script type="text/javascript">

    //通过jQuery直接传入标签名p

    //标签是可以多个的，所以得到的同样也是一个合集

   $("div").css("border", "3px solid red");

   </script>

7.    全选择器

选中页面中所有的元素$(“*”)

是使用js原生方法getElementByTagName函数在传入参数为＊

8.    层级选择器

$(“parent>child”):子选择器：选择所有指定“parent”元素中指定的“child”的直接子元素

$(“ancestor descendant”):后代选择器

$(“prev+next”):相邻兄弟选择器

$(“prev~sibings”):一般选择器，匹配‘prev’元素后的所有兄弟元素

//子选择器

        //$('div >p') 选择所有div元素里面的子元素P

//后代选择器

        //$('div  p') 选择所有div元素里面的p元素

//相邻兄弟选择器

        //选取prev后面的第一个的div兄弟节点

//一般相邻选择器

        //选取prev后面的所有的div兄弟节点

9.    jQuery的属性

操作DOM方法主要有三个，getAttribute、setAttribute、removeAttribute方法。Jquery中使用attr()方法获取合设置属性

art()表达式：

1.    attr（传入属性名）：获取属性值

2.    attr（属性名，属性值）：设置属性值

3.    attr（属性名，函数名）通过函数返回值设定属性的值

4.    attr（attributes）：通过键值对，对属性赋值

removeAttr删除方法

html()方法（DOM中的innerHtml）

1.    html()不传入值，就是获取集合第一个匹配元素的html内容

2.    html(htmlString)设置每一个匹配元素的html内容

3.    html(function(index,oldhtml))用来返回设置html内容的函数

html与text的异同：

   html处理的是元素的内容，text处理的是文本内容

val方法

1.    val（）无参数，获取匹配的元素集合中的第一个元素

2.    val（value）设置匹配的元素集合的所有值

3.    val（function），一个用来返回设置的函数

注意：1.通过val处理select元素，当没有选中的项时，它返回null

       2.val多用来处理表单元素

       3.select元素有multiple（多选）属性，并且至少有一个被选中，val方法返回的是一个数组

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

1.html(),text(),val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），text()用来读取元素的纯文本内容，包括其后代元素，val()是用来读取表单元素的"value"值。其中html()和text()方法不能使用在表单元素上,而val()只能使用在表单元素上；另外html()方法使用在多个元素上时，只读取第一个元素；val()方法和html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是text()和他们不一样，如果text()应用在多个元素上时，将会读取所有选中元素的文本内容。

2 html(htmlString),text(textString)和val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。

3 html(),text(),val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

addClass()增加一个样式，在元素本身拥有的样式的基础上再次增加

addClass（className1吃lassName2 …）可以一次增加多个样式

removeClass()删除样式

toggleClass()：在匹配元素集合中的每一个元素上添加或者移除一个或多个样式，没有加，有删

css():获取或者设置元素的样式。

获取：css（样式的属性名），withd、height、background－color

设置：css（propertyName，value）