jQuery基础归纳总结【1】（jQuery(),文档结构,选择器）

jQuery基础归纳总结

jQuery函数 jQuery() = $();

1，一般用来传递css选择器，返回匹配元素的元素集合。
        $('#id')   $('class');
2，传递Element,Document,Window对象,将这些对象封装成jQuery对象,并返回

3，传递html文本,将文本创建好的html元素封装成jQuery对象，并返回

4，传递函数,文档加载完毕,DOM可操作的时候，调用该函数.相当于原生js的onload方法

总结:一般情况下，就是引入参数,返回jQuery对象

jQuery中的getter和setter(获取和设定)

简要理解getter/setter：

    1，jq中,同一个方法，既是getter,也能当setter。
    2，作为getter,查询元素的第一个元素，返回值，只能放在链式调用的末尾
    3，作为setter,会给jq元素中设定一个值,然后返回对象,方便链式调用

1,attr() //操作HTML属性；

attr(),操作html属性值。  $('form').attr('action');
removeAttr()，移除html属性

2,css() //操作HTML元素的css样式；

css() $('div').css('font'); //只作用于元素的css样式

3，class属性的操作

addClass()    //往class属性再加一个
    例如：$('div').addClass('class1 class3');
removeClass() //删除
toggleClass() //如果class属性没有,就添加。如果有,就删除
    例如:$('div').toggleClass('class1');
hasClass()    //判断某类的存在
    hasClass()参数只能为一个,所以is()可以有多个参数。

4，val() //设置和获取html表单的值

获取表单中value属性的值
    $('#text').val();
    $('input:radio[name=ship]:checked').val();
    $('#email').val('请输入邮件')//设定初始值

5，text()和html() //获取和设置元素的内容（纯文本）

text()//返回所有的内容
html()//返回指定匹配元素的内容

6，offset() //设定或获取元素的位置

offset()返回一个位置信息,坐标是left和top，对应X，Y坐标。
例如: var div = $('#id');             //获取对象
        var position = div.offset();    //获取当前位置
        position.top += 100;            //该表Y坐标
        elt.offset(position);           //换位置

注意:position()方法,只能获取不能设定位置,并且是相对父类元素的偏移量

7，width()/height()/innerWidth()/innerHeight()/outerWidth()/outHeight()//获取和设定元素的长宽高

他们的不同之处在于实际值，外边距，内边距。比较简单，可按照字面意思理解

8，scrollTop()/scrollleft //获取滚动条的位置信息

一般用在window和document元素。
只能获取，不可以传参。

一般可使用scrollTop()和height()配合，做分页、加载。

9，data() 获取和设定与文档元素相关的数据，还可以将其关联起来 data() / removeData()

修改文档结构

简要理解：
    HTML是一颗节点数,而不是现行序列

1，插入和替换：

append()    //结尾插入            appendTo()
prepend()   //起始处插入          prependTo()
after()     //后面插入           insertAfter()
before()    //前面插入           insertBefore()
repleaceWith()  //替换内容       replaceAll()

$(target).method(content)    $(content).method(target)
$("#id").append('<p>xxx</p>')   $('<p>xxx</p>').appendTo('#id');

2,复制元素

clone()

3，包装元素

wrap()         //包装每一个选中元素
wrapAll()      //将选中元素作为一组来包装
wrapInner()    //包装每一个元素的内容

4，删除元素

empty()       //删除所有选中元素的子节点
remove()      //文档中移除元素
filter()      //过滤删除
detach()      //和remove类似,不会移除时间处理程序
unwrap()      //移除元素,不影响其他节点,是包装元素的反操作，不可接受选择器参数

未完待续…………（选择器,动画函数，Ajax等）