50 Jquery 库

Posted 侠客云

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了50 Jquery 库相关的知识,希望对你有一定的参考价值。


一.概念:
1.jquery 的选择器和ccs 相同

2.jquery对象, dom对象的集合,类似python中list,有自己的各种方法和属性 // [dom1,dom2,.....]

3.方便之处,可以省略原生js中for 循环的操作

4.jquery 对象和dom对象的关系:
jquery对象转化成dom 对象:$()[]---------->dom对象 例子:$("li")[0] 切片
dom对象转化成jquery对象:$(dom)---------->jquery对象

5.入口函数 ,当js代码放在head头部时,需要写入口函数
导入jquery.js 文件
<script src="jquery-3.3.1.js"></script>
<script>
入口函数,相当于window.onload=function(){写js代码}
$(function(){写js代码})
</script>


二.jquery 选择器 和 筛选器

1.基本选择器
$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")

2.层级选择器
$(".outer div") 后代选择器 子子孙孙
$(".outer>div") 子代 ,只包含儿子
$(".outer+div") 毗邻,下面的第一个
$(".outer~div") 该dom对象下面的兄弟

3.基本筛选器  :冒号有筛选的含义,选出
$("li:first") 或$("li").first() 用后面这种比较好些,不用字符串的拼接
$("li:eq(2)") 或$("li").eq(2)
$("li:even")
$("li:gt(1)")

4.属性选择器
$("‘[自定义属性名]‘")
$(‘[id="div1"]‘)
$(‘["alex="sb"][id]‘)

5.表单选择器
$("[type=‘text‘]")----->$(":text") 注意只适用于input标签 : $("input:checked")

5.表单属性选择器
:enabled
:disabled
:checked
:selected
例子:$("input:checked")

6.过滤筛选器

$("li").eq(2)
$("li").first()
$("ul li").hasclass("test")


7.查找筛选器  

1. 查找子标签:
$("div").children(".test")
$("div").find(".test")

2.向下查找兄弟标签:
$(".test").next()
$(".test").nextAll()
$(".test").nextUntil()

3.向上查找兄弟标签:
$("div").prev()
$("div").prevAll()
$("div").prevUntil("标签名") //不包含,括号里面的标签

4.查找所有兄弟标签:
$("div").siblings() //不包含自己

5.查找父标签:
$(".test").parent()

$(".test").parents() //一层一层往上找父亲

$(".test").parentUntil()
技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src ="jquery-3.3.1.js"></script>
    <script>
        //选择器
        //入口函数
        $(function () {
            //基础选择器
            // $(".c1").css("color","red");
            // $(".c3").css("color","red");
            // $(".c3:first").css("color","red");
            // $(".c3").first().css("color","red");
            // $(".c3:last").css("color","red");
            // $(".c3").last().css(‘color‘,"red");
            // $(".c3:even").css("color","red");//偶数
            // $(".c3:odd").css("color","red");//奇数
            // $(".c3:gt(2)").css("color","red");//索引大于2的
            // $(".c3:lt(2)").css("color","red");//索引小于2的
            // $("[alex]").css("color","red");//自定义属性选择器
            // $("[alex=‘123‘]").css("color","red");
            // $("[alex=‘123‘][peiqi]").css("color","red");
            // $("[type=‘checkbox‘]").attr("checked","checked");
            // $(":checkbox").attr("checked","checked");


            //进阶筛选器
            // $(".c5 :checked");  //筛选.c5下被选中的标签的集合

            // $(".c3:first").css("color","red");
            // $(".c3").first().css("color","red");
            // var index =2;
            // $(".c3:"+"eq("+index+")").css("color","red"); //需要字符串的拼接,麻烦
            // $(".c3").eq(index).css("color","red"); //不需要字符串的拼接

            //判断某个标签是否拥有那个属性
            // console.log($("#i1").hasClass("c1"));//true
            // console.log($("[yuan]").hasClass("c7")); //true,一个对象拥有就行

            //导航选择器
                //查找兄弟标签
            // 向下查找兄弟标签
            // $("#i2").next().css("color","red");//下一个
            // $("#i2").nextAll().css("color","red");//向下找所有的兄弟
            // $("#i2").nextUntil(".c8").css("color","red");//不包括until中的那个
            //向上查找兄弟标签
            // $("#i2").prev().css("color","red");//上一个兄弟
            // $("#i2").prevAll().css("color","red");//向上找所有的兄弟
            // $("#i2").prevUntil("#i3").css("color","red");//向上找兄弟直到#i3,不包括#i3
            //找到所有的兄弟标签,不包括自己
            // $("#i2").siblings().css("color","red");

            //查找子孙标签
            // $(".p1").children().css("color","red");
            // $(".p1").children("p").css("color","red");
            // $(".p1").find("p").css("color","red");//find 和children的区别,find必须加条件

            // $(".p1").children(":first").css("color","red");//第一个儿子
            // $(".p1").children().first().css("color","red");

            //查找父标签
            // $(‘.c10‘).parent().css("color","red");//找到父标签
            // $(".c10").parents() //找到一层一层往上找父标签
            // $(".c10").parents.Until("body")/一层一层往上找父标签到body结束,且不包括body


        })

    </script>
</head>
<body>
   <div class="c1" id="i1">DIV</div>

<div class="c2">
    <p class="c4">111</p>
    <a href="">click</a>
</div>
<div class="p1">
     <p class="c3" id="i3">222</p>
     <p class="c3">333</p>
     <p class="c3" id="i2">444</p>
     <p class="c3">555</p>
     <p class="c3 c8">666</p>
     <p class="c3">777</p>
</div>

<div alex="123" peiqi="678">alex和配齐</div>
<div alex="123">alex</div>
<div alex="234">egon</div>
<div peiqi="678">8888</div>
<div class="c5">
    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">
</div>


<div class="c6" yuan="123">123</div>
<div class="c7" yuan="234">234</div>


<div class="c9">
    <p>111</p>
    <p>222</p>
    <div class="c10">
        <p>333</p>
    </div>
    <a href="">click</a>
</div>
</body>
</html>
jquery选择器和赛选器

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>


<ul class="box">
    <li>123</li>
    <li>234</li>
    <li>456</li>
    <li>567</li>
    <li class="c1">678</li>
</ul>
<button class="add">ADD</button>
<button class="rem">remove</button>

<script>
    //jquery 事件绑定格式:    $(选择器).事件(function(){})

    // $("ul").click(function () {
    //     alert($(this).html());
    // });
    // 事件委派
    $("ul").on("click","li",function () {
        alert($(this).html());
    });
    $(".add").click(function () {
        // $(".box").appendChild(‘<li>789</li>‘);不能这样写
        $(".box").append("<li>789</li>");
    });
  
</script>

</body>
</html>
jquery事件绑定

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
          .left{
              width: 15%;
              height: 600px;
              float: left;
              background-color: wheat;
          }

          .right{
              float: left;
              width: 85%;
              height: 600px;
              background-color: lightgray;

          }

           .title{
               text-align: center;
               line-height: 30px;
               background-color: #0e90d2;
               color: white;
           }
        .item{
            padding: 10px;
        }

        .hide{
            display: none;
        }
    </style>

    <script src="jquery-3.3.1.js"></script>
</head>
<body>



<div class="outer">
      <div class="left">
           <div class="item">
               <div class="title">菜单一</div>
               <ul class="con hide">
                   <li>111</li>
                   <li>111</li>
                   <li>111</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜单二</div>
               <ul class="con hide">
                   <li>222</li>
                   <li>222</li>
                   <li>222</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜单三</div>
               <ul class="con hide">
                   <li>333</li>
                   <li>333</li>
                   <li>333</li>
               </ul>
           </div>
      </div>
      <div class="right"></div>
</div>


<script>
    //jquery 版的菜单栏实现
    $(".title").click(function () {
        // $(this).next().removeClass("hide");//操作完之后的对象还是$(this).next()
        // $(this).parent().siblings().children(".con").addClass("hide");

        $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
    })




</script>
</body>
</html>
基于jquery实现菜单栏


四.jquery 操作


1 文本操作
$("").html() //获取值
$("").text()
$("").html("参数") //设置内容
$("").text("参数")

2 属性操作
$().attr("") //获取属性值
$().attr("","") // 添加属性和值
$("p").attr("alex")
$("p").attr("alex","dsb") //添加属性和值
$("p").removeAttr("class") // 删除属性

3 class 操作

$("p").addClass("c1") // 添加样式
$("p").removeClass("c1") //// 删除样式
















































以上是关于50 Jquery 库的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 可编辑/可排序列表

jQuery 选择器到 JSON 对象表示

jquery插件库一般怎么使用。

关于jquery库:我在网上找到了两种jquery库jquery-1.9.0.js和jquery-1.9.0.min.js,这两种库有何区别?

最实用的50个jquery小技巧

jQuery 是一个 JavaScript 库。