jquery基础

jquery

1. 版本

1.x：兼容性好，可支持旧浏览器。如：ie6，ie7
3.x：体积小，仅支持新浏览器。如：chrome，firefox

2. 使用

需要导入
格式为：

    <script src="路径/js文件名">
    </script>

3. API

1）基本选择器
#id值, .class值, 标签名
* 表示选择所有标签
, 用来将多个选择器的结果合并

    document.getElementById();
    document.getElementsByTagName();
    document.querySelector()
    document.querySelectorAll()

2）层级选择器
空格 祖先后代选择器
> 父子选择器

3）筛选器

    :first //找到结果中的第一个元素
    :last //找到结果中的最后一个元素
    :eq(n) //找到结果中的下标为n的元素
    :odd //找到结果中的下标为奇数的元素
    :even //找到结果中的下标为偶数的元素
    :gt(n) //找到结果中的下标大于n的元素 
    :lt(n) //找到结果中的下标小于n的元素
    p:not(p:first) //取反，找到除了第一个段落以外的其它段落
    :not(p:first) //取反，找到除了第一个段落以外的其它所有标签

4）属性选择器

    $("input[name]");  //选中有name属性的input
    $("input[name=aaa]");  //选中有name属性且值为aaa的input
    //也可以同时匹配多个属性
    $("input[type=button][name=aaa]"); // 选中type是按钮且name值为aaa的input

5）子元素选择器

    $("td:nth-child(4)")  //选中表格中的第四列
    $("td:first-child")  //选中表格中的第一列
    $("td:last-child")  //选中表格中的最后一列

6）表单选择器

    //等价于input[type=button]
    :button  //// 匹配所有按钮
    :radio  // 单选按钮
    :password  // 密码框
    :checkbox  // 复选框
    :submit  // 提交按钮
    :reset  // 重置按钮
    :checked  // 单选框或复选框是否被选中

4. 操作

4.1 修改内容

    .text  //获取标签的内容，功能上等价于：innerText
    .text(新内容);  //将标签的内容改为新内容
    .html();  //获取标签内容，功能上等价于：innerHTML
    .html(新内容);  //将标签的内容改为新内容

4.2修改属性

    .prop("属性名");  //获取属性值
    .prop("属性名", "新值");  //修改属性值
    .val();  //获取value属性的值
    .val(新值);  //修改value属性的值

4.3删除内容和标签

    .empty();  //清空内容，但不删除标签
    .remove();  //删除整个标签，包括内容，功能上等价于：子标签.parentNode.removeAttribute(子标签);

4.4样式属性

    .addClass("样式");  //添加一个class值
    .removeClass("样式");  //移除一个class值
    .css("样式名", "样式值");  //修改一个style样式
    .css("样式名");  //获取一个style样式值

4.5显示隐藏

.hide()  //隐藏标签
.show()  //显示标签
.toggle()  //切换显示与隐藏的效果
.hide(毫秒值);  //有动画效果持续该毫秒值.slideUp();.fadeOut();
.show(毫秒值); //有动画效果，动画效果会持续该毫秒值 .slideDown();.fadeIn();