web基础_jQuery_002

ABB测试笔记

已于 2022-01-19 16:45:37 修改

阅读量160

点赞数

分类专栏： web 文章标签：前端

于 2022-01-13 16:19:56 首次发布

本文链接：https://blog.csdn.net/yulle/article/details/122476616

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是jQuery?
-是一个高效的，精简且功能丰富的js工具库

优点：
-许多api调用
-浏览器的兼容性好

使用方法：
1.下载：
https://www.jq22.com/jquery-info122
2.不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

使用jQuery做什么？

查询操作DOM
处理js事件
实现动画效果
封装插件
使用AJAX 发送异步请求

基础语法belike:

基础语法： $(selector).action()

jQuery选择器：

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>选择器</title>
    <link rel="stylesheet" href="">
    <script type="text/javascript" src="./js/jquery-3.0.0.js"></script>
    <script type="text/javascript">
        // $(document).ready(function(){
        //     var username= $("#username");  //id 选择器
        //     console.log(username);

        //     var area_list=$('.area');  //类选择器
        //     console.log(area_list);

        //     var plist=$('p');  //标签选择器
        //     console.log(plist);
        // })

        //简写
        $(function(){
            var username= $("#username");  //id 选择器
            console.log(username);

            var area_list=$('.area');  //类选择器
            console.log(area_list);

            var plist=$('p');  //标签选择器
            console.log(plist);

            var bodylist = $('body *');   //body中所有的标签
            console.log(bodylist);

            var bodylist = $('body p');   //body中所有的p标签
            console.log(bodylist);

            var bodylist = $('body > p');   //body中直接子级的p标签
            console.log(bodylist);    
        })

    </script>
</head>