当前位置：首页 > 编程语言 > 2、jQuery基本使用

2、jQuery基本使用

2021-03-05 21:30

阅读：597

标签：相关   onclick   输入   其他   切换   就删除   def   selector   获取   

一、jQuery内容选择器（选择器部分可参考jQuery文档查询）

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>14-jQuery内容选择器title>
    style>
        div{
            width: 50px;
            height: 100px;
            background: red;
            margin-top: 5px;
        }
    style>
    script src="js/jquery-1.12.4.js">script>
    script>
        $(function () {
            // 编写jQuery相关代码
            // :empty 作用:找到既没有文本内容也没有子元素的指定元素
            // var $div = $("div:empty");
            // console.log($div);

            // :parent 作用: 找到有文本内容或有子元素的指定元素
            // var $div = $("div:parent");
            // console.log($div);

            // :contains(text) 作用: 找到包含指定文本内容的指定元素
            // var $div = $("div:contains(‘我是div‘)");
            // console.log($div);

            // :has(selector) 作用: 找到包含指定子元素的指定元素
            var $div = $("div:has(‘span‘)");
            console.log($div);
        });
    script>
head>
body>

div>div>
div>我是divdiv>
div>他们我是div123div>
div>span>span>div>
div>p>p>div>

body>
html>

二、jQuery的attr方法

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>16-jQuery的attr方法title>
    script src="js/jquery-1.12.4.js">script>
    script>
        $(function () {
           /*
            1.attr(name|pro|key,val|fn)
            作用: 获取或者设置属性节点的值
            可以传递一个参数, 也可以传递两个参数
            如果传递一个参数, 代表获取属性节点的值
            如果传递两个参数, 代表设置属性节点的值

            注意点:
            如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
            如果是设置:找到多少个元素就会设置多少个元素
            如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增

            2.removeAttr(name)
            删除属性节点

            注意点:
            会删除所有找到元素指定的属性节点

           */
            // console.log($("span").attr("class"));
            $("span").attr("class", "box");
            // $("span").attr("abc", "123");

            // $("span").removeAttr("class name");
        });
    script>
head>
body>
span class="span1" name="it666">span>
span class="span2" name="lnj">span>
body>
html>

三、jQuery的prop方法

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>17-jQuery的prop方法title>
    script src="js/jquery-1.12.4.js">script>
    script>
        $(function () {
            /*
            1.prop方法
            特点和attr方法一致
            2.removeProp方法
            特点和removeAttr方法一致
            */
            /*
            $("span").eq(0).prop("demo", "it666");
            $("span").eq(1).prop("demo", "lnj");
            console.log($("span").prop("demo"));

            $("span").removeProp("demo");
            */

            /*
            注意点:
            prop方法不仅能够操作属性, 他还能操作属性节点

            官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
            */
            // console.log($("span").prop("class"));
            // $("span").prop("class", "box");

            console.log($("input").prop("checked")); // true / false
            console.log($("input").attr("checked")); // checked / undefined

        });
    script>
head>
body>
span class="span1" name="it666">span>
span class="span2" name="lnj">span>

input type="checkbox">
body>
html>

四、jQuery操作类（修改class属性）

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>19-jQuery操作类相关的方法title>
    style>
        *{
            margin: 0;
            padding: 0;
        }
        .class1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .class2{
            border: 10px solid #000;
        }
    style>
    script src="js/jquery-1.12.4.js">script>
    script>
        $(function () {
            /*
            1.addClass(class|fn)
            作用: 添加一个类
            如果要添加多个, 多个类名之间用空格隔开即可

            2.removeClass([class|fn])
            作用: 删除一个类
            如果想删除多个, 多个类名之间用空格隔开即可

            3.toggleClass(class|fn[,sw])
            作用: 切换类
            有就删除, 没有就添加
            */
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                // $("div").addClass("class1");
                $("div").addClass("class1 class2");
            }
            btns[1].onclick = function () {
                // $("div").removeClass("class2");
                $("div").removeClass("class2 class1");
            }
            btns[2].onclick = function () {
                $("div").toggleClass("class2 class1");
            }
        });
    script>
head>
body>
button>添加类button>
button>删除类button>
button>切换类button>
div>div>
body>
html>

五、jQuery操作html，操作文本，操作value的相关方法

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>20-jQuery文本值相关的方法title>
    style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
        }
    style>
    script src="js/jquery-1.12.4.js">script>
    script>
        $(function () {
            /*
            1.html([val|fn])
            和原生JS中的innerHTML一模一样
            2.text([val|fn])
            和原生JS中的innerText一模一样
            3.val([val|fn|arr])
            */
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                $("div").html("
我是段落我是span
");
            }
            btns[1].onclick = function () {
                console.log($("div").html());
            }
            btns[2].onclick = function () {
                $("div").text("
我是段落我是span
");
            }
            btns[3].onclick = function () {
                console.log($("div").text());
            }
            btns[4].onclick = function () {
                $("input").val("请输入内容");
            }
            btns[5].onclick = function () {
                console.log($("input").val());;
            }
        });
    script>
head>
body>
button>设置htmlbutton>
button>获取htmlbutton>
button>设置textbutton>
button>获取textbutton>
button>设置valuebutton>
button>获取valuebutton>
div>div>
input type="text">
body>
html>

六、jQuery操作css样式

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>21-jQuery操作CSS样式的方法title>
    script src="js/jquery-1.12.4.js">script>
    script>
        $(function () {
            // 编写jQuery相关代码
            // 1.逐个设置
            $("div").css("width", "100px");
            $("div").css("height", "100px");
            $("div").css("background", "red");

            // 2.链式设置
            // 注意点: 链式操作如果大于3步, 建议分开
            $("div").css("width", "100px").css("height", "100px").css("background", "blue");

            // 3.批量设置
            $("div").css({
                width: "100px",
                height: "100px",
                background: "red"
            });

            // 4.获取CSS样式值
            console.log($("div").css("background"));;
        });
    script>
head>
body>
div>div>
body>
html>

七、jQuery操作尺寸和位置的方法

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>22-jQuery位置和尺寸操作的方法title>
    style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid #000;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    style>
    script src="js/jquery-1.12.4.js">script>
    script>
        $(function () {
            // 编写jQuery相关代码
            var btns = document.getElementsByTagName("button");
            // 监听获取
            btns[0].onclick = function () {
                // 获取元素的宽度
                // console.log($(".father").width());
                // offset([coordinates])
                // 作用: 获取元素距离窗口的偏移位
                // console.log($(".son").offset().left);
                // position()
                // 作用: 获取元素距离定位元素的偏移位
                console.log($(".son").position().left);
            }
            // 监听设置
            btns[1].onclick = function () {
                // 设置元素的宽度
                // $(".father").width("500px")

                // $(".son").offset({
                //     left: 10
                // });

                // 注意点: position方法只能获取不能设置
                // $(".son").position({
                //     left: 10
                // });

                $(".son").css({
                    left: "10px"
                });
            }
        });
    script>
head>
body>
div class="father">
    div class="son">div>
div>
button>获取button>
button>设置button>
body>
html>

八、jQuery中scrollTop方法

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>23-jQuery的scrollTop方法title>
    style>
        *{
            margin: 0;
            padding: 0;
        }
        .scroll{
            width: 100px;
            height: 200px;
            border: 1px solid #000;
            overflow: auto;
        }
    style>
    script src="js/jquery-1.12.4.js">script>
    script>
        $(function () {
            // 编写jQuery相关代码
            var btns = document.getElementsByTagName("button");
            // 监听获取
            btns[0].onclick = function () {
                // 获取滚动的偏移位
                // console.log($(".scroll").scrollTop());
                // 获取网页滚动的偏移位
                // 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
                console.log($("body").scrollTop()+$("html").scrollTop());
            }
            btns[1].onclick = function () {
                // 设置滚动的偏移位
                $(".scroll").scrollTop(300);
                // 设置网页滚动偏移位
                // 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
                $("html,body").scrollTop(300);
            }
        });
    script>
head>
body>
　　div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是divdiv>
　　button>获取button>
　　button>设置button>
　　br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>br>
　　br>
body>
html>

 

2、jQuery基本使用

标签：相关   onclick   输入   其他   切换   就删除   def   selector   获取   

原文地址：https://www.cnblogs.com/lyh233/p/12901863.html

上一篇：js 获取和设置css3 属性值的实现方法

下一篇：Github Pages搭建网站

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：2、jQuery基本使用
文章链接：http://soscw.com/index.php/essay/60630.html

评论

亲，登录后才可以留言！

热门文章

推荐文章

最新文章

置顶文章

关于我们 | 版权声明 | 常见问题 | 素材投稿 | 联系我们 | 网站地图 |
搜素材网素材除本站原创外均由用户分享，若发现权利被侵害，请联系及时联系我们，我们会在第一时间进行处理。
特别说明：本站所有资源除本站原创外仅供学习与参考，请勿用于商业用途,如有侵犯您的版权请联系客服服务QQ：点击这里给我发消息
Copyright © 2024 soscw.com 搜素材网素材网版权所有 蜀ICP备18015633号-1