一：Jquery-selector

一:jQuery概述
1.基本功能

    a.访问和操作DOM元素:获取元素,修改其样式和内容,删除元素,复制元素...
    b.对页面事件的处理:不需要指定事件中的函数名,直接在事件中绑定响应函数(匿名函数)
    c.插件的运用:验证插件,UI插件...
    d.Ajax技术的结合:$.ajax({"json格式"});  Ajax异步读取服务器数据

2.代码特点

    a.$符号特点
    b.隐式循环
    c.链式书写

3.js与jq区别
传统的方式页面加载会存在覆盖问题，加载比JQ慢(整个页面加载完毕<包括里面的其它内容，比如图片>)
JQ不存在覆盖问题，加载的时候是顺序执行,加载比JS要快！(当整个dom树结构绘制完毕就会加载)
a.加载效率:

        jq:页面框架下载完(页面元素信息)就触发事件  -- 效率高
        js:页面中所应用到的所有资源(img...)全部加载完才触发事件  -- 效率低

b.覆盖问题

        jq:不存在覆盖,加载时顺序执行
        js:存在覆盖,加载时执行最后一个

二:jQuery选择器
$(selector).action(); -- 选取元素,获取jQuery对象,再执行方法
选择器参数是一个字符串,当使用变量时,需使用加号将变量与其他字符串联在一起
1.基本选择器

    #id  -- id属性值
    .class  -- class属性值
    element  -- 标签名
    selector1,selectorn  -- 多个选择器所匹配的元素

2.层级选择器

    selector1 selector2  -- 后代
    selector1>selector2  -- 子类
    selector1+selector2(next())  -- 下一个相邻兄弟
    selector1~selector2(nextAll())  -- 后面所有兄弟
    siblings()  -- 所有兄弟

3.过滤选择器
a.基本过滤

        :first或first()  -- 第一个
        :last或last()  -- 最后一个
        :eq(index)或eq(index)  -- 索引值等于index(从0开始)  :gt()大于    :lt()小于
        :nth-child(index)  -- 子元素过滤(索引从1开始,也可以写成2n)
        :not(selector)  -- 不包含或除给定的

b.内容过滤

        :contains(text)  -- 选取包含给定文本的元素(也包含后代元素出现了text内容,text中英文有大小写区分)
        :has(selector)  -- 选取含有选择器所匹配的元素的元素
        单标签(input,img,br,hr)都属于空元素

c.可见性过滤

        :hidden  -- 不可见(display:none,input type=hidden,宽高=0)
        :visible  -- 可见

d.属性过滤

        [attr]  -- 拥有该属性
        [attr=val]  -- 包含属性且等于val
        [selector1][selectorn]  -- 同时满足属性过滤的多个条件

4.表单选择器(属性过滤的简化)

    :input  -- input,select,button,textarea元素
    :text
    :radio
    :checkbox
    :button  -- input type=button,button元素

表单过滤

    :checked  -- input  --  :radio:checked,:checkbox:checked
    :selected  -- option  --  option:selected
    :disabled  -- 不可用     --  text:disabled,text:enabled

5.筛选

    过滤:first(),last(),eq(index),is(expr/obj/ele)判断集合是否有匹配的元素
    查找:children([expr])子元素,find(expr/obj/ele)后代元素
        parent([expr])父元素,parents([expr])祖先元素
        next([expr])下一个相邻兄弟,nextAll([expr])后面所有兄弟,
        prev([expr])上一个相邻兄弟,prevAll([expr])前面所有兄弟,
        siblings([expr])所有兄弟

三:常用方法
1.设置样式

    a.css()  --  添加style
    b.addClass()  --  添加class(多个class以空格分开)
    c.attr(),prop()  --  设置属性

猜你喜欢