jQuery 基础

Posted 2022-08-27 debug

jQuery

大多数函数支持链式操作 一个主语执行完一个函数后 这个函数又返回该主语 可以继续用点接着执行其它函数

---

查找

            1.按选择器
                $(...)支持所有css选择器
                css中没有的，jQuery添加的
                    基本过滤：先将所有元素收集到一个结果集合中统一编号，再选择集合中指定位置的元素，和元素在其父元素下的位置无关
                        first-child vs first
                    内容过滤：3种
                        1.按包含的文本内容过滤
                            :contains(text) 查找内容中包含指定text文本的元素
                        2.按子元素特征过滤
                            :has(selector) 查找内容中包含符合selector要求的子元素的父元素
                        3.按是否包含内容过滤
                            :empty 空元素
                            :parent 非空的元素
                    可见性过滤：
                        :hidden 只能选中两种情况的隐藏
                            1.display: none
                            2.input type=hidden
                        :visible
                    状态过滤：三大状态 :disabled :checked :selected
                    表单元素过滤：
                        :input 可以选择四大类表单元素 input、button、textarea、selected
                        :[type] 每种input都对应一种专门的选择器
                            :text :password :checkbox :radio

            2.按节点间关系
                父元素 .parentNode => .parent()
                直接子元素 .children => .children()
                第一个子元素 .firstElementChild => .children().first()
                最后一个子元素 .lastElementChild => .children().last()
                前一个兄弟 .previousElementSibling => .prev()
                                                      .prevAll()
                后一个兄弟 .nextElementSibling => .next()
                                                  .nextAll()
                除我之外，所有兄弟 .siblings()

---

修改：一个函数两用(get、set)

            内容
                .innerhtml   => .html()
                .textContent => .text()
                .value       => .val()
            属性
                标准属性
                    elem.属性名 => $elem.attr('属性名'[,值])
                状态属性
                    elem.属性名 => $elem.prop('状态属性'[,bool])
                自定义扩展属性
                    elem.dataset.属性名 => $elem.data('属性名'[,值])
            样式
                修改内联样式
                1.仅修改一个css属性
                    .style.css属性=值 => .css('css 属性名'[,值])
                2.批量修改多个css属性
                    .css(
                        'css 属性名': 值,
                        ...: ...
                    )