JQuery学习记录

最新推荐文章于 2021-04-21 20:25:07 发布

柏竹

最新推荐文章于 2021-04-21 20:25:07 发布

阅读量119

点赞数

分类专栏： Web 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45963193/article/details/115404674

版权

JQuery

jQuery 是个 JavaScript 库, 它简化了JavaScript编程!
封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

引用

外部引用JavaScript脚本文件即可

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

语法

使用前提, 需要文档加载完毕后, 在应用JQ

//No.1
$(document).ready(function(){
   
	//jQuery 代码 ...
});

//No.2
$(function(){
   
	//jQuery 代码 ...
});

JQuery选择器

$(this)	选取
$(“p”)	所有 `<p>` 元素
$(“p.intro”)	所有 class=“intro” 的 `<p>` 元素
$(".intro")	所有 class=“intro” 的元素
$("#intro")	id=“intro” 的元素
$(“ul li:first”)	每个 `<ul>` 的第一个 `<li>` 元素
$(" [h r e f$ =’.jpg’]")	所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)	id=“intro” 的 `<div>` 元素中的所有 class=“head” 的元素
#(“div , p”)	所有 `<div>` `<p>` 元素
#(“form input”)	所有 `<form>` 中的 `<input>` 元素
#(“form>input”)	所有 `<form>` 中的 `<input>` 元素
#(“label+input”)	所有 `<label>` 的下一个元素

点击更多JQuery选择器

<head>
<script src="../js/jquery-1.11.1.js"></script>
    <script>
        function printList(list) {
    
            for (var i = 0; i < list.length; i++) {
    
                console.log(list[i]);
            }
        }
        //引用JQ代码
        $(function () {
    
            allSelector();
        });
        //标签
        function LabelSelector() {
    
            //遍历结果是 HMTL节点 集合
            var list = $("div");
            printList(list);
        }
        //id
        function idSelector() {
    
            var list = $("#div4");
            printList(list);
        }
        //class
        function classSelector() {
    
            var list = $(".div2");
            printList(list);
        }
        //全局
        function allSelector() {
    
            var list = $("*");
            printList(list);
        }
    </script>
</head>
<body>
    <div>div1</div>
    <div class="div2">div2</div>
    <div>div3</div>
    <div id="div4">div4</div>
</body>

<head>
<script src="../js/jquery-1.11.1.js"></script>
<script>
    function printList(list) {
    
        for (var i = 0; i < list.length; i++) {
    
            console.log(list[i]);
        }
    }
    //引用JQ代码
    $(function () {
    
        visibilitySelector();
    });
    //并集
    function episodeSelector() {
    
        var list = $("div,b");
        printList(list);
    }
    //后代
    function descendantSelector() {
    
        var list = $("form label");
        printList(list);
    }
    //子
    function sonSelector() {
    
        var list = $("form>.test");
        printList(list);
    }
    //相邻
    function adjacentSelector() {
    
        var list = $("label+input");
        printList(list);
    }
    //属性
    function attributesSelector() {
    
        // var list = $("input[name]");
        // var list = $("p[class='test']");
        // var list = $("input[type='text'][name='userss']");
        // var list = $("input[name^='user']");
        var list = $("input[name$='ss']");
        // var list = $("input[name*='ss']");
        printList(list);
    }
    //可见性
    function visibilitySelector(){
    
        var list = $("div:hidden");
        // var list = $("div:visible");
        printList(list);
    }
</script>
</head>
<body>
    <form action="#">
        <label for="userid">I D : </label>
        <input type="text" name="userid">
        <br>
        <label for="userss">账号:</label>
        <input type="text" name="userss">
        <br>
        <label for="password">密码:</label>
        <input type="password" name="password">
        <br>
        <b>b1</b>
        <b class="test">b2</b>
        <div>
            div1
            <p class="test">p1</p>
            <p>p2</p>
        </div>
        <div class="div2" style="display: none;" >div2</div>
        <div class="test" style="visibility: hidden;" >div3</div>
        <div id="div4">div4</div>
    </form>
</body>

JQuery HTML

点击更多jQuery操作方法

编辑HTML内容

常用方法	说明
$(selector).text([content])	设置或返回所选元素的文本内容
$(selector).html([content])	设置或返回所选元素的内容,包括 HTML 标签
$(selector).val([content])	设置或返回表单字段的值

<head>
<script src="../js/jquery-1.11.1.js"></script>
<script>
    $(function(){
    
        var str = "Test!!";
        var div = $("div");
        console.log(div.html());    //div<button>按钮</button>
        console.log(div.text());    //div按钮
        console.log(div.val());     //null ,因非表单value值
        console.log($("input").val());  //张三
    });
</script>
</head>
<body>
    <div>
        div
        <button>按钮</button>
    </div>
    <input type="text" value="张三">
</body>

编辑HMTL属性

常用方法	说明
$(selector).attr()	设置或返回元素属性和值
$(selector).prop()	判断是否选中
$(selector).removeAttr()	元素移除指定属性

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

最低0.47元/天解锁文章

柏竹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery学习记录

JQueryjQuery 是个 JavaScript 库, 它简化了JavaScript编程!封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。引用外部引用JavaScript脚本文件即可<head> <script src="jquery-1.11.1.js"></script></head>语法使用前提, 需要文档加载完毕后, 在应用JQ//N
复制链接

扫一扫