JQuery下载和一些语法

最近学了六种jQuery选择器,我想把学过案例和知识结合起来,给大家分享下!

那么既然学jQuery选择器,肯定要先了解下jQuery是什么吧!jQuery是一个快速、简洁的JavaScript框架,相当于用jQuery能更加高效的创建JS代码,这就是jQuery,选择器是它的一种语法,代码的使用上就不能再用JS语法了,要用jQuery创建的语法。

那么用它,肯定要进行下载吧!下面附上链接和官网图片jQueryhttps://jquery.com/

1.基本选择器

这种选择器学起来简单好理解,但也很重要,因为后面的选择器是依托它的!所以这个必须学牢固

下面是基本选择器的代码:

复制代码
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.2.1.js"></script>
    (这是调用jQuery包,只有调用后才能使用以下的jQuery语句)
</head>
<body>
    <div id="one" style="width: 500px;height: 150px;border: 1px dashed;"></div>
    <div id="two" style="width: 500px;height: 150px;border: 1px dashed;"></div>
    <div id="three" style="width: 500px;height: 150px;border: 1px dashed;"></div>
    <div class="four" style="width: 500px;height: 150px;border: 1px dashed;"></div>
    <script>
        //(以下是基本选择器)
        //id选择器
        console.log($("#one"));
        //标签名选择器
        console.log($("div"));
        //class选择器
        console.log($(".four"));
        //*选择器
        console.log($("*"));
        //联合选择器
        $(function (){
            console.log($("#one,#two,.four"));
        })
    </script>
</body>
</html>

结合代码看控制台,对应的个数分别是1、4、1、10、3,通过这些条件能进行快速、准确的查询。很方便!

复制代码
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <div id="dv" style="width: 300px;height: 300px;border: 2px solid;">
      <input id="a" type="button" value="按钮1"/>
      <div style="width: 100px;height: 100px;border: 1px solid;padding: 10px;">
        <input id="c" type="button" value="按钮2"/>
      </div>
      <input class="b" type="button" value="按钮3"/>
      <input type="button" value="按钮4"/>
    </div>
    <button type="button" οnclick="text1()">验证后代元素选择器</button>
    <button type="button" οnclick="text2()">验证子元素选择器</button>
    <button type="button" οnclick="text3()">验证紧邻同辈元素选择器</button>
    <button type="button" οnclick="text4()">验证同辈元素选择器</button>
    <script>
    function text1(){
      console.log($("#dv input"));
    }
    function text2(){
      console.log($("#dv>input"));
    }
    function text3(){
      console.log($(".b+input"));
    }
    function text4(){
      console.log($("#a~input"));
    }
  </script>
</body>
</html>

1.选择器之间是空格的作用是验证后代元素

2.选择器之间是'>'的作用是验证子元素,就是只查看自己的儿子

3.选择器之间是'+'的作用是验证紧邻的同辈元素(不能是大哥)

4.选择器之间是'~'的作用是验证相邻的同辈元素(不能是大哥)

相关推荐
crary,记忆5 分钟前
Angular如何让整个项目的所有页面能够整体缩小一定的比例?
javascript·ecmascript·angular.js
Mintopia19 分钟前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia22 分钟前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo24 分钟前
🔔 Flutter 本地通知: 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊29 分钟前
一、redis安装(单机)和使用
前端·数据库·redis
江城开朗的豌豆31 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
天蓝色的鱼鱼31 分钟前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
你的电影很有趣36 分钟前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
江城开朗的豌豆36 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..37 分钟前
VUE工程化开发模式
前端·javascript·vue.js