jQuery了解

jQuery了解

1.简介

• jQuery是什么:一个JS函数库: write less, do more

• jQuery如何使用:

  • 引入jQuery库

    • 在练习中使用本地引入

    • <script src="./js/jquery-3.1.1.js"></script>
      

  • 使用jQuery

    • 使用jQuery函数: $/jQuery
    • 使用jQuery对象: $xxx(执行$()得到的)

2.jQuery使用

• jQuery函数: $/jQuery

  • jQuery向外暴露的就是jQuery函数, 可以直接使用

  • 当成一般函数使用人: $(param)

    param是function: 相当于window.onload = function(文档加载完成的监听)

    param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象

    param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)

    param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回

  • 当成对象使用: $.xxx

    • each(obj/arr, function(key, value){})
    • trim(str)

• jQuery对象

  • 包含所有匹配的n个DOM元素的伪数组对象

  • 执行$()返回的就是jQuery对象

  • 基本行为:

    length/size(): 得到dom元素的个数

    each(function(index, domEle){}): 遍历所有dom元素

    index(): 得到当前dom元素在所有兄弟中的下标

3.选择器

• 分类

  • 基本

    #id

    tagName/*

    .class

  • 过滤

    • 在原有匹配元素中筛选出其中一些
    • :first
    • :last
    • :eq(index)
    • :not(selector)
    • :hidden
    • :visible
    • [attrName]
    • [attrName=value]

  • 表单

    • :input
    • :text
    • :checkbox
    • :radio
    • :checked: 选中的

4.属性/文本

操作标签的属性, 标签体文本

attr(name) / attr(name, value): 读写非布尔值的标签属性

prop(name) / prop(name, value): 读写布尔值的标签属性

removeAttr(name)/removeProp(name): 删除属性

addClass(classValue): 添加class

removeClass(classValue): 移除指定class

val() / val(value): 读写标签的value

html() / html(htmlString): 读写标签体文本