第一章 jQuery 基础语法

一,基础语法

jq就是JavaScript封装的一系列方法的包 用jq语法的时候需要先引入一个包

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

1.基础语法

写法:$(选择器).方法().方法n()

• id的获取方法

<p>p标签</p>
<p id="wrap" style="color: red;">111111</p>
<p class="first">6666</p>

 console.log($("#wrap"));

id

---

• class的获取方法

       console.log($(".first"));
  

• 标签的获取方法

            $("p")//直接标签名就ok
  

• 层级选择器 如果我们要选取div下面的p标签

            $("div>p")
            $("div p")
  

• 过滤选择器
  1.:first或 first()

                :first或 first()  找到第一个 
                $("p:first") //找到第一个p标签 
  

2.:last或 last()

             $("p:last") //找到最后一个p标签

3.:not()选取到除什么以外的元素

             $("p:not") // 选取除了p标签的其他元素

4.:even 下标偶数 :odd 下标奇数

               $("p:even")//选取下标为偶数的p标签

5.eq() 相当于nth:child type 选择同类型第几个标签

          $("p").eq(2)//选取第二个p标签

6.:gt(下标值) 下标值大于某某的元素 :lt(下标值) 下标值小于某某的元素

          $("p:gt(0)")选取p下标值大于0的元素

7.:contains()内容过滤选择器 获取到含有文本内容是XX的元素

       $("span:contains(3)").css("color","red")//筛选文本是3的文本 设置为红色

        $("div:empty").css("background","red")//:empty 空  获取到为空的

        $("div:parent").css("background","red") //:parent 获取非空的

8.可见性过滤选择器 :hidden选取不可见元素 :visiable 选取可见元素

   $("div:visiable").css("background","red")//选取可见的div背景颜色设置为红色

10. [属性]属性选择器

             $("img[src]").css("border","1px solid red")//获取img中有src属性的
    
    
               $("a[href='www.baidu.com']").css("color","red")//需要加引号!!!
                          //获取a标签href属性是www.baidu.com的
    

11.:input表单选择器

      $(":input").css("width","500px") //给全部input设置 500宽度

       $(":password").css("width","500px") //给密码框设置

如果想要同时获取的话,中间用逗号间隔开

2.方法

2.1css()方法
设置一组时 用逗号隔开

//改一个颜色
    $("#wrap").css("color","green")//设置一组时 用逗号隔开 

设置多个样式时 需要在小括号里面在加入{} 里面的属性:属性值

$("#wrap").css({"background":"blue","font-size":"20px"})

2.2html()方法 相当于innerHTML
输出id为wrap的内容

         console.log($("#wrap").html());

html
修改内容的话就在html()里面写修改内容

              $("#wrap").html("修改的内容"); 

修改

• 2.3text()
  只获取文本内容
  2.4val()方法 相当于innerText() 获取文本 获取或设置文本

• 扩展
  jquery中的文档就绪事件

1.jquery文档就绪事件
        $(document).ready(function(){  })

2.       简化写法
        $(function(){ })

二,jq对象和dim对象的互相转换

jQuery对象就是jquery包装DOM对象后产生的对象

• jquery对象是jquery独有的,js里面的方法不可以应用

• DOM对象不可以应用jq里面的方法,比如html()

DOM对象转换成jq对象

// 只需要在DOM对象外面$() 包裹起来就ok
         var op = document.getElementsByTagName("p")[0];
        //dom对象使用jq方法
        // op.css("color","red")  //报错
        $(op).css("color","red")

dom对象转换jq

jq对象转换为DOM对象

通过get(0)方法,得到相应的DOM对象。里面的0是固定写法

var op = $("p").get(0) //0是固定写法
        console.log(op.innerHTML);
        // 通过get()方法,得到相应的DOM对象

q对象转换为DOM对象