jQuery基础知识点

程序员文章站 2022-06-13 12:30:45

...

jQuery是什么？？？？？

jQuery是一种新的JavaScript库。jq是用js写能用jq实现的用js都能实现，js能实现的 jq有些不能实现

---------------------------------------------------------------------------------------------------------------

jQuery API的中文网站:http://jquery.cuishifeng.cn/

jQuery API的官网:http://api.jquery.com/

jQuery API库的下载地址：http://www.bootcdn.cn/jquery/

导入jQuery:

（1）本地：先在网上下载对应的库：http://www.bootcdn.cn/jquery/

jQuery基础知识点

这里我选择的是3.3.1版本的，比较常用，第二个多了个min是产品上线前用的比较多，因为节省空间，但两者并无区别

打开你要的库之后，把代码复制一份到本地，新键一个JS文件，就可以引用了

jQuery基础知识点

（2）引用线上的：

jQuery基础知识点

PS：如果alert 可以成功弹出，表示成功引入了 jQuery

引用方法：

jQuery. 或者一个$符号

在jQ中使用选择器选择元素，和在CSS中使用CSS选择器是一样的

jQuery基础知识点

js和jQuery的转换：

jQuery基础知识点

选择器：直接找到某个或者某类标签

（1）id选择器------$("#id")

（2）class选择器-----$(".c1") <div class="c1"></div>

（3）标签选择器-----$("标签")

（4）组合选择器------$("标签名1，标签2，标签3...")

（5）层级选择器-----$("#i10 a")子子孙孙，id=i10里的所有a标签

$("i10>a") 儿子

（6）基本选择器：

：first :last :eq

（7）属性选择器：

$("[alex]")------具有alex属性的所有标签

$("[alex=123]")------alex属性等于123的标签

jQuery属性操作：

attr 设置/获取标签属性

jQuery基础知识点

prop 设置/获取标签属性废除

removeAttr() 移除标签属性

jQuery基础知识点

removeProp() 废除

addClass

jQuery基础知识点

removeClass

jQuery基础知识点

传class 移除你传的那个没有移除全部

toggleClass 有就删没有则加操作class类名

jQuery基础知识点

jQuery	JavaScript
html()	innerHTML
text()	innerText
val()	value

在jq里面，设置某个值的时候，一般自带遍历（即全部设置）

获取某个值的时候，一般获取第一个

案例1--全选，反选，取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <input  type="button" value="全选" onclick="checkAll();"/>
    <input  type="button" value="反选" onclick="ReverseAll();"/>
    <input type="button" value="取消" onclick="cancleAll();"/>
    <table border="1px">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.1</td>
            <td>80</td>
        </tr>
         <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.1</td>
            <td>80</td>
        </tr>
         <tr>
            <td><input type="checkbox"/></td>
            <td>1.1.1.1</td>
            <td>80</td>
        </tr>
        </tbody>
    </table>
    <script src="jQuery.js"></script>
    <script>
        function checkAll(){
            $('#tb:checkbox').prop('checked',true);
        }
        function cancleAll(){
            $('#tb:checkbox').prop('checked',false);
        }
        function ReverseAll(){
            $(':checkbox').each(function(){
                //this代指当前循环的每一个元素
                //反选
                /* 用DOM实现
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                }*/
                //用jQuery实现
                // if($(this).prop("checked")){
                //     $(this).prop("checked",false)
                // }else{
                //     $(this).prop("checked",true)
                // }
                /*  三元运算 ：var v =条件？真值：假值*/
                var v =$(this).prop("checked")?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>

筛选器：

next	下一个
prev	上一个
eq	把jq转换成特定的jq
hasClass	检查当前的元素是否含有某个特定的类，如果有，则返回true。否则返回false
children	找儿子可以不传参数
find	不传参，默认不找传参的话就找符合参数的后代
parent	不需要参数
parents(".show")	找到名字叫做show的祖先
siblings	不传参所有兄弟传参所有兄弟按照参数筛选出合格的

案例2---菜单栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            color: crimson;
            font-family: 黑体;

        }
        .content{
            min-height:50px;
            background-color: antiquewhite;
            font-family: 楷体;
            font-style: normal;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div style="height:200px;width:200px; border:1px solid #ddd; margin:auto;padding-top:10px;background-color: #69ff9f">
        <div class="item">
            <div class="header">老师们</div>
            <div class="content hide" >
                <p>南北老师</p>
                <p>小泼老师</p>
                <p>式微老师</p>
            </div>
        </div>
        <div class="item">
            <div class="header">同学们</div>
            <div class="content hide">
                <p>三花</p>
                <p>夕阳</p>
                <p>梅梅</p>
            </div>
        </div>
        <div class="item">
            <div class="header">水果啊</div>
            <div class="content hide">
                <p>苹果</p>
                <p>香蕉</p>
                <p>草莓</p>
            </div>
        </div>
        <div class="item">
            <div class="header">好友</div>
            <div class="content hide">
                <p>啊</p>
                <p>出错</p>
                <p>啦啦啦</p>
            </div>
        </div>
    </div>
    <script src="jQuery.js"></script>
    <script>
        $('.header').click(function () {
            //当前点击的标签$(this)
            //获取某个标签的下一个标签
            //获取某个标签的父标签
            //获取所有的兄弟标签
            //添加样式和移除样式
            $(this).next().removeClass("hide");
            $(this).parent().siblings().find(".content").addClass("hide");
            //链式编程
            //$(this).next().removeClass("hide").parent().siblings().find("content").addClass("hide")
        })
    </script>
</body>
</html>

效果：

jQuery基础知识点

jQ的属性操作：

attr 设置/获取标签属性
prop 设置/获取标签属性废除
removeAttr() 移除标签属性
removeProp() 废除
addClass
removeClass 传class 移除你传的那个没有移除全部

toggleClass 有就删没有则加操作class类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        p.on{
            font-size: 18px;
            color: red;
        }
        p.show{
            font-size: 25px;
            color: #18ffd5;
        }
    </style>
</head>
<body>
    <div id="box" class="box1">
        <p class="on">1</p>
        <p>2</p>
        <p class="show">3</p>
    </div>

    <script src="jquery.js"></script>
    <script>
        var $box = $("#box");
        alert($box.attr("class"));//读操作
        // $box.attr("class","xiaopo");//写操作
        // $box.attr("tz","py");//写操作，自定义的
        // $box.removeAttr("class");
        // $box.addClass("box2");
        // $box.addClass("box3 box4");
        // $box.removeClass("box4");
        $box.removeClass();

        $("#box p").toggleClass("show");

        alert($("#box p").html());
    </script>
</body>
</html>

jQ操作样式：

.css()
.width()
.height()
innerWidth() / innerHeight 算了padding
outerWidth() / outerHeight 算了 padding+border
offset()该对象有top /left 属性，代表到浏览器窗口的 top/left的值
position()该对象有top /left属性，代表到定位父级的 top/left的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: #18ffd5;
            margin: 50px;
            padding: 30px;
            border: 10px solid red;
            position: relative;
        }
        #box1{
            width: 100px;
            height: 100px;
            background: #212529;
            position: absolute;
            top: 10px;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="box1"></div>
    </div>
    <script src="jquery.js"></script>
    <script>
        var $box = $("#box");
        // alert($box.width());
        // alert($box.height());
        // $box.css("width","200px");//oBox.style.width = "200px"
        // $box.css({
        //     "width" : "200px",
        //     "height": "200px",
        //     "background" : "blue"
        // });

        // alert($box.innerWidth());
        // alert($box.outerWidth());

        // alert($box.offset().top);
        // alert($("#box1").offset().top);
alert($("#box1").position().top);
    </script>
</body>
</html>

jQ滚动条：

$(window).scrollTop() 获取

$(window).scrollTop(0) 设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body style="height: 2000px;width: 1000px;">
    <script src="jquery.js"></script>
    <script>
        // $(document).click(function () {
        //     console.log("滚动的高度"+ $(this).scrollTop());
        //     console.log("滚动的宽度"+ $(this).scrollLeft());
        // })
        $(document).click(function () {
            $(this).scrollTop(1000);
            $(this).scrollLeft(500);
        })
    </script>
</body>
</html>

文档操作：

方法	描述
addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()	向目标结尾插入匹配元素集合中的每个元素。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()	向目标开头插入匹配元素集合中的每个元素。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>我是一直存在的p</p>
    </div>
    <b id="box1">我是外面的b标签</b>
    <script src="jquery.js"></script>
    <script>
     // $("#box").append("<em>我是新加的1</em>");
     // $("#box").prepend("<em>我是新加的2</em>");
     //    $("<em>我是新加的2</em>").appendTo($("#box"));

        var oBox1 = document.getElementById("box1");
        // $("#box").append($(oBox1));
        $("#box").append(oBox1);

    </script>
</body>
</html>

绑定事件：

详细请参考：https://blog.csdn.net/aiolos1111/article/details/52047380

$('.c1').click()
$('.c1')......
$('.c1').bind('click',function(){})
$('.c1').unbind('click',function(){})
$('.c1').delegate('a',click',function(){}) #委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text"/>
    <input id="a1" type="button" value="添加"/>
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
    <script src="jQuery.js"></script>
    <script>
        $('#a1').click(function(){
           var v = $('#t1').val();
           var temp = "<li>"+v+"</li>";
           $('#u1').append(temp);
        });
        $('ul').delegate('li','click',function () {
            var v = $(this).text();
            alert(v);
        });
    </script>

</body>
</html>

$('.c1').undelegate('a','click',function(){})
$('.c1').on('click',function(){})
$('.c1').off('click',function(){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 50px;
            /*height: 200px;*/
            background: #0aa770;
        }
        li{
            width: 50px;
            height: 50px;
            background: #212529;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>001</li>
            <li>002</li>
            <li>003</li>
            <li>004</li>
        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
        /*
        jquery里面的事件
                都是函数形式的，去掉on的那种
                原理上事件都是事件绑定的形式而不是赋值的形式
        jquery事件绑定、解绑
                所有事件的添加都是绑定的形式
                可以通过on来添加事件
         */
        var oBox = document.getElementById("box");
        /*oBox.onclick = function () {
            alert(1);
        };
        oBox.onclick = function () {
            alert(2);
        };*/

        /*$("#box").click(function () {
            alert(1);
        });
        $("#box").click(function () {
            alert(2);
        });*/

        //on绑定单个事件
        /*$("#box ul li").on("click",function () {
            alert($(this).index());//index() 在jq里面是方法 对应的是你的下标
        });*/

        //on绑定多个事件
        /*$("#box").on({
            "click" : function () {
                console.log("click");
            },
            "mouseenter" : function () {
                console.log("mouseenter");
            },
            "mouseleave" : function () {
                console.log("mouseleave");
            }
        });*/

        //$("#box").off("click");//移除满足条件的事件
        //$("#box").off();//移除事件

        /*$("#box").hover(function () {
            console.log(2);//一个函数，移入移出执行同一个函数
        })*/

        $("#box").hover(function () {
            console.log("移入la");//移入函数
        },function () {
            console.log("移出啦");//移出函数
        })
    </script>
</body>
</html>

动画：

不传参瞬间显示隐藏传一个数字参数，代表毫秒，改变宽、高、透明度
show()
hide()

toggle() 切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素；

默认时间300毫秒改变透明度
fadeIn()
fadeOut()
fadeTo(1000,0.1) 可以把透明度设置一个值，时间参数不能省略
默认时间300毫秒改变高度
slideDown()
slideUp()
slideToggle()

这三组，不仅仅可以接受一个数字参数，能接受的参数有：
* number / string 代表动画时间（可缺省）   毫秒数 / （"fast" "normal" "slow"）
* string   代表运动曲线（可缺省）
* function   代表回调函数（可缺省）

animate()
传参：
* obj 必传 { }格式代表的变化的属性和目标值数值变化
* number/string 可缺省代表毫秒数或者三个预设好的值默认300
* string 可缺省，代表运动曲线，默认jQuery提供"linear" 和 "swing"
* function 可缺省，代表动画结束后的回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: #0aa770;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script src="jquery.js"></script>
    <script>
       $("#box").animate({
           "width": "300px",
           "height": "300px",
           "marginLeft": "200px"
       },2000);
    </script>
</body>
</html>

停止动画stop()：

清空动画队列，可以接受两个布尔值参数
第一个不用管
第二个决定是否瞬间到达队列终点，true 到 false(默认) 不到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul{
           overflow: hidden;
        }
        li{
            width: 70px;
            list-style: none;
            font-size: 12px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            margin: 10px;
            background: pink;
            float: left;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>南北</li>
            <li>Lucky</li>
            <li>which</li>
            <li>小泼</li>
        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
        $("#box ul li").hover(function () {
            $(this).stop(true,true).animate({"height": "400px"});
        },function () {
            $(this).stop(true,true).animate({"height": "35px"});
        })
    </script>
</body>
</html>

jQuery基础知识点

导入jQuery:

js和jQuery的转换：

选择器：直接找到某个或者某类标签

jQuery属性操作：

筛选器：

jQ的属性操作：

jQ操作样式：

jQ滚动条：

文档操作：

绑定事件：

动画：

停止动画stop()：

*星：区块链去中心化的2大技术基础

创建公共调用 jQuery Ajax 带返回值

Chosen 基于jquery的选择框插件使用方法

jQuery $.get 的妙用访问本地文本文件

jQuery 插件仿百度搜索框智能提示(带Value值)

jquery使用ColorBox弹出图片组浏览层实例演示

JSP自定义标签基础知识学习

PHP+jQuery+Ajax实现用户登录与退出

跨境电商品牌运营必备知识点你get到了吗

小强的HTML5移动开发之路（47）——jquery mobile基本的页面框架

jQuery基础知识点

导入jQuery:

js和jQuery的转换：

选择器：直接找到某个或者某类标签

jQuery属性操作：

筛选器：

jQ的属性操作：

jQ操作样式：

jQ滚动条：

文档操作：

绑定事件：

动画：

停止动画stop()：

*星：区块链去中心化的2大技术基础

创建公共调用 jQuery Ajax 带返回值

Chosen 基于jquery的选择框插件使用方法

jQuery $.get 的妙用 访问本地文本文件

jQuery 插件仿百度搜索框智能提示(带Value值)

jquery使用ColorBox弹出图片组浏览层实例演示

JSP自定义标签基础知识学习

PHP+jQuery+Ajax实现用户登录与退出

跨境电商品牌运营必备知识点 你get到了吗

小强的HTML5移动开发之路（47）——jquery mobile基本的页面框架

jQuery $.get 的妙用访问本地文本文件

跨境电商品牌运营必备知识点你get到了吗