jQuery基础

jQuery01:
    特点: DOM操作相对比较简单 选元素 改样式 改属性 改内容
    引入:<srcript src="路径"></script>
    1.$关键字               让渡  noConfict() 
        作用1:  
            window.οnlοad=function(){
                //页面元素加载完成之后 
            }
            $(function(){
            
            });
        区别:
        a:window.onload 等待页面元素(图片)全部加载完成之后才执行
         $(); dom元素加载完成之后就可以执行  
         
        b: window.onload 在页面中只执行一次 后面的会覆盖前面的
         $(); 可以执行多次
         
        作用2:快速的选出页面的中DOM元素  $("选择器")
            结合CSS中的所有的选择器来选择元素
            id选择器   $("#id选择器")
            类选择器   $(".类选择器")
            标签选择   $("标签名称选择器")
            
            问题:
            用$选择出来的元素 被称为jQuery对象 用原生js代码选出来的是DOM对象
            方法不可以混用 
            转换
            jquery对象--->原生DOM对象  $("#id")[0]
            原生DOM对象-->jQuery对象   $(document.getElementById(""))
            
    2.选出元素的几个常用方法:
        ①eq(n)       获取第n个元素的方法
        ②:gt(n)  $("li:gt(2)") 获取从n+1个开始所有的元素
        
        ③find()   在某个元素中去查找满足第二选择器条件的元素   
                    在A1宿舍楼里面找学生会的学生---->学生
        ④has()    找到包含第二选择器的某个元素
                    在A1宿舍楼找到包含学生会学生的寝室--->寝室
        
        ⑤filter() 在第一个选择器的基础上过滤出满足第二个选择器的元素
        ⑤not() 在第一个选择器的基础上过滤出不包含第二个选择器的元素
            
    3.根据层级关系选元素
        
    4.元素的创建/插入/删除/复制操作:
        A：创建一个标签
            var obj=$("<p>我是一个p标签</p>");
        B: 把元素添加进去
            A.append("B");           把B元素加入到A元素内部结尾处
            A.appendTo("B");        把A元素加入到B元素内部结尾处
    
            A.prepend("B");           把B元素加入到A元素内部开头处
            A.prependTo("B");       把A元素加入到B元素内部开头处
            
            A.after("B")               把B元素加入到A元素外部后面
            A.insertAfter("B")      把A元素加入到B元素外部后面
            
            A.before("B")            把B元素加入到A元素外部前面
            A.insertBefore("B")      把A元素加入到B元素外部前面
        C：删除某个元素
            empty();   //清空   清除内容
            remove(); //清除元素 
        d: 复制
            clone();  //复制一个一模一样的
            
    5.修改元素内容    
        .text()  不解析html
        .html()  解析html
        .val()   设置表单元素的内容
    
    6.获得元素的下标
        .index()  返回是其父元素的第几个元素
        
    7.修改样式:
        .css("样式名称","值");
        .css({"样式名称":"值","样式名称":"值"});
        //加入的是行内样式 优先级较高 注意使用
        
        addClass()     添加某个class样式
        removeClass()  移除某个class样式
        
    8.修改属性
        .attr("属性","值");         //修改属性
        .attr("属性");              //查看属性
        .removeAttr("属性");        //删除属性
        
        --做原生属性的修改  img:src   input:checked  
        .prop("属性","值");         //修改属性
        .prop("属性");              //查看属性
        .removeProp("属性");        //删除属性
        
    9.元素的遍历
        each(function(index){
            $(this) //每一个元素
            index   //从0开始数的下标
        });
            
jQuery链:
    链式编程 一句代码编写很多个操作  本质原因是jquery方法返回的都是jquery对象
    
    $("p").find("span").addClass("c1").addClass("c2");
    
                span  +  class="c1"
                span  +  class="c2"
            
    $("p").find("span").addClass("c1").end().addClass("c2");
            end():终止当前操作对象 返回上一个操作对象
            
            span + class=“c1”
            p    + class="c2"
    
    $("p").find("span").addClass("c1").andSelf().addClass("c2");
            andSelf(); 终止当前操作对象返回上一个对象和当前对象
            span + class=“c1”
            p span +class="c2"

 

 

选择器:
    标签选择器 类选择器  id选择器
    
    1. * 用于选中所有的元素
    2. > 用于选中父子关系节点
    3. 空格 div p  p只要包含在div中即可选中
    4. ,  div,p{color:red;} 多个选择器之间共用同一个样式  
          div{color:red;}
          p{color:red;}
    5. + 毗邻元素选择器E+F 匹配紧邻E元素之后的同级F元素
    6. ~ 毗邻元素选择器E~F 匹配E元素之后的同级F元素
    7. 属性选择器:  表单 
        E[attr] 匹配有这个属性
        E[attr="值"] 匹配有这个属性并且值相等
        E[attr*="值"] 匹配有这个属性值包含指定的数据
        E[attr^="值"] 匹配有这个属性值以指定的数据开头
        E[attr$="值"] 匹配有这个属性值以指定的数据结尾
    8.伪类选择器:
        选个数:
            :nth-child(n)  
                p:nth-child(2)   p标签 是在其父元素必须排第二个
            
            :nth-of-type(n)      
                p:nth-of-type(2) p标签 在其父元素中第二个P标签
    
            
            :nth-child(1) === :first-child 
            :nth-of-type(1)===:first-of-type
    
            :nth-child(2n)   :nth-child(even)   偶数
            :nth-child(2n+1) :nth-child(odd)    奇数
        
        动态(状态)伪类:
            :hover   鼠标移动上去 
            :link    默认状态
            :active  激活 点击下去没松手
            :visited 点击完成后
            
            :focus     获得焦点 表单 
            :selected  下拉列表中被选中的项
            :checked   单选按钮/复选框选中的项
            :disabled  选中被禁用
            :enabled   选中启用
    9.伪元素选择器:
        ::first-letter 第一个字母
        ::first-line   第一行 
        
        ::after   在后面加内容
        ::before  在前面加内容
        
        ::selection 选中区域的效果
        
    10CSS权重计算方式:
        计算表
            权重值      A        B          C         D
        类型             
        行内样式        1        0          0         0       (1000)
        Id              0        1          0         0        (100)
        class/属性      0        0          1         0        (10)
        标签/伪类       0        0          0         1        (1)
        继承            0        0          0         0        (0)
        
         !important 忽略权重计算规则 以此为准