day01

今天学到了什么？

1.Jquery的选择器

1.1基本选择器

Jq的选择器支持所有css选择器
eg：  A:    id-->$("#one"), class-->$(".one")
 
hello world
    

         
B:所有元素-->$(“*”),标签元素-->$(“p”)
hello world
    
div
    
h1
    



C:分组选择器-->$(“p,div”):
h1
    
p
    
div
    

1.2层次选择器

A:后代选择器-->$(“div >p”),$(“div p”)
 
        
hello world
        

            
hello world
        
    
    change
    


B:兄弟选择器-->$(“div+p”),$(“div~p”)

1.3过滤选择器

           
hello world
           
hello world
           
hello world
           
hello world



   

1.4内容过滤选择器

$("p:contains(hello)")  //选取文本中含有”hello”的p元素
$(“div:has(p)”)  //选取含有p元素的div元素
$(“div:parent”)   //选取含有子元素或者文本的元素  

hello2
    
good
    
world
    

        
test
    
    

        
h1
    
    

1.5可见性过滤选择器

 


    
hello world
    
hello world
    
hello world
    
hello world
    

1.6属性过滤选择器

2.Jquery中的DOM操作

2.1查找节点

 // text()-->获取元素的文本
 // text（value)-->修改元素的文本
 // attr(key)获取属性节点
 // html()-->返回标签包裹内容，包含html标签
 // val()-->获取输入框的值
eg:
    

        
1
        
2
        
3
    
    

        
hello world
    
    
    

2.2创建节点

  /*
$("
2
")-->创建一个元素
appened-->向父元素后面的添加
prepend-->向父元素的前面添加
  */
    

        
1
    
    

2.3插入节点

   /*
    brfore,after-->兄弟元素之前，之后
    */
    
div
    
end
    
    

2.4/删除节点

1.删除节点
eg1:

        
1
        
2
        
3
    
    btn
    

2.让标签的内容消失
eg2:
     
hello world
     

3.替换节点
eg3:
    
hello world
    

3.包裹节点

 // wrap-->在元素的外层嵌套标签
 // wrapInner-->在元素内层嵌套标签
    
hello world
    

4.属性操作

  1.操作属性attr(attrName,value)
  2.设置多个属性$("p").attr("class","two");
  3.删除属性$("p").removeAttr("class");
    
hello world
    
   

5.样式操作

//2.addClass-->添加class样式
// 3.removeClass-->移除class的样式

 


 
hello world
    btn
    

6.切换样式

1.判断是否含有某个样式,返回true或false-->hasClass()
2.toggleClass-->切换样式


 
hello world
    toggle
    

6.1遍历节点

    

        
1
        
2
        
3
        
4
    
    

6.2遍历节点

hello world
    

8.css的操作