初——jQuery

最新推荐文章于 2024-10-09 00:58:21 发布

阿甘正赚.

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量207

点赞数 1

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_74537518/article/details/127990043

版权

一.jQuery是一个快速、简洁的JavaScript框架

1.jquery方法

append 内部末未追加

prepend 内部开头添加

after 外部当前元素的后边

before 外部当前元素的后边

例：

children 子级元素

find 所有后代元素

next 紧挨着下一个同级元素

prev 紧挨着上一个同级元素

nextAll 紧挨着后边所有同级元素

prevAll 紧挨着前边所有同级元素

siblings 所有的同级元素

eq 获取第N个元素，从0开始

first 第一元素

last 最后一个

slice 最后一个

$("类名，元素名等").方法名.();

2.jquery常用

addClass() 添加类名

removeClass() 删除类名

click (函数)点击

css 样式

contains() 选取包含指定字符串的元素

even 偶数行

odd 奇数行

hover(函数) 悬浮

first 第一个

last 最后一个

remove() 删除元素包括内容

empty()删除文本内容

val()获取值（括号内可设置值）

change()改变

3.动态删除

<body>
    <div id="test">
        <button class="newBtn" id="newOn">On</button>
        <button class="newBtn" id="newClk">Click</button>
        <ul class="ul">
        <li>这是原有的HTML元素on<button class="deleteOn">删除</button></li>
        <li>这是原有的HTML元素Click<button class="deleteClk">删除</button></li>
        <!--动态添加一些li-->
        </ul>
        </div>
</body>
   <script>
      var str1="li这是click动态添加的HTML元素<button class='deleteClk'>删除</button></li>"
      var str2="li这是on动态添加的HTML元素<button class='deleteOn'>删除</button></li>"
     //点击click按钮
     $("#newClk").click(function(){
        //执行click按钮
        $(".ul").append(str1);
     });

     //点击on按钮
     $("#test").on(function(){
       $(".ul").append(str2);
     });

     //删除click
     $(".deleteClk").click(function(){
      $(this).parent().remove();
     });

     //on
     $(".ul").on("click",".deleteOn",function(){
        $(this).parent().remove();
     });
   </script>