Jquery使用（三）〜jquery方法

**html()😗*设置或返回所选元素的内容(等同于js中的innerHTML)
**text()😗*设置或返回所选元素的文本内容(等同于js中的innerText)
**val()😗*设置或返回表单字段的值(等同于js中的value)
css():获取或设置元素的样式，
注意： (属性可以写成如：fontSize，‘font-size’，‘fontSize’)

css(参数1)方法，只有一个参数时，返回指定属性名的值
$(’#p1’).css(‘backgroundColor’);
css(参数1，参数2)方法，两个参数时，会修改指定属性名的值
$(’#p1’).css(‘backgroundColor’,‘yellow’);
css()方法同时设置多个样式属性(链式编程)
$(".box").css(“color”,“red”).css(“fontSize”,“30px”);
//使用对象的链式写法
语法：
css({
‘属性名1’:‘属性值1’，
‘属性名2’:‘属性值2’,
‘属性n’:‘属性值n’
})
注意：（1）使用对象的链式写法，属性名与属性值之间用冒号（冒号赋值），不同属性之间用逗号间隔
（2）最后一个属性结尾，不需要写任何符号

**each(参数1,参数2);**用于循环遍历成员/数据，它常用于多元素或对任意数组和对象属性的循环访问
两种写法：
写法一目标.each()
写法二 $.each() : 是一个全局函数，功能和目标.each()相同
参数1: 需要遍历的目标（可选）
参数2: 每个目标需要执行的功能（可选）
// $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots console.log($ (this).attr(“class”));
// console.log(index + “:” + value);
// });

var num = [1,2,3,4,5,6,7];
//上面的数组时js中创建的方式，下面使用each()遍历数组元素时，要先将数组num转为jq对象
$(num).each(function (index,value) {
console.log(index + “:” + value);
});
//对象的创建和使用
var obj = {}; //创建一个空对象
//如果该对象，有name这个属性，那么找到这个属性，并赋值；如果没有，就先添加再赋值
obj.name = “汤姆”;
obj.age = “3”;

//通过中括号访问 (了解)
// obj[age] = “3”; //用中括号访问，如果之前没有这个属性，会报错

//在创建对象时就赋值
var obj2 = {
“name”:“玛丽”,
“sex” : “女”
}
//单独访问
console.log(obj2.sex);

//使用 each方法来访问对象
//写法一：直接用对象来调用each()方法
$(obj2).each(function (index,value) {
console.log(index+":" + value);
});
//写法二：将对象当做参数传入each方法中
$.each(obj2,function (index,value) {
console.log(index + “:” + value);
})
$的使用与其他语言或框架有冲突使用时，需要释放$
var $js = $.noConfict(); 或者直接写jQuery(); //$ ===jQuery

stop(): 停止当前动画或效果，在执行之前
适用于所有jquery效果函数，包括滑入、滑出、淡入、淡出等，以及自定义动画
语法：
$(selector).stop(stopAll，gotoEnd);
参数1：stopAll(可选的)，表示是否应该清楚动画队列，
默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行
参数2：gotoEnd(可选的)，表示是否立即完成当前动画，
默认是false，即stop（）方法会默认清楚指定元素当前的动画

**hover();**鼠标移入、移出元素时的变化效果

案例：鼠标经过一级菜单，它下面的二级菜单栏滑出，鼠标移出后滑入再一级菜单栏(stop()方法和hover()方法运用)
先引入jquery库
css代码

<style>
     ulist{overflow:hidden;}
     ulist li{
         width:100px;
         height:30px;
         line-height:30px;
         border:1px solid gray;
         text-align:center;
         float:left;
     }
</style>

html代码

<ul class="ulist">
    <li>
         <ul>
              <li>二级菜单</li>
              <li>二级菜单</li>
              <li>二级菜单</li>
              <li>二级菜单</li>
         </ul>
    </li>
    <li>一级菜单</li>
    <li>一级菜单</li>
    <li>一级菜单</li>
    <li>一级菜单</li>
</ul>

jquery代码

<script>
         $(".ulist").children("ul").hover(function(){
                  $(this).stop().slideDown(2000);
          },function(){
                 $(this).stop().slideUp(2000);
         });
</script>

jq添加、删除元素的方法

<!DOCTYPE html>
<html>
     <head>
         <meta charset="UTF-8">
         <title>jquery创建添加删除节点的方法</title>
         <script type="text/javascript"  src="jquery-3.4.1.min.js"></script>
     </head>
     <body>
         <ul></ul>
         <div class="box">水果总汇</div>
         <script type="text/javascript">
              $(function() {
                  // jq创建节点
                  var $li = $("<li>榴莲</li>");
                  // jq 添加节点
                  // 内容.appendTo(目标);将内容添加到目标 中 的最后一位
                  $li.appendTo($("ul"));
                  $("<li>芒果</li>").appendTo("ul");
                  $("<li>柠檬</li>").appendTo("ul");
                  
                  //目标.append(“内容”); 将内容添加到目标中的最后一位
                  //目标.prepend("内容"):将内容添加到目标 的第一位
                  $("ul").prepend("<li>西瓜</li>");
                  $("ul").prepend("<li>椰子</li>");
                  $("<li>车厘子</li>").prependTo($("ul"));
                  
                  //插入节点
                  // 目标.after(内容);在指定的元素之后 插入元素
                  $(".box").after("<span class='s'>上面卖的是假货</span>");
                  
                  //内容.insertAfter(目标) :  将内容添加到目标之后
                  // 如果该内容是页面已有元素，这些元素会被移动到指定的位置
                  $("ul").insertAfter($(".box"));
                  
                  //目标.before(内容):在指定的元素之前 插入元素
                  $(".box").before("<span>我是新来的span</span>");
                  
                  //内容.insertBefore(目标6)  将内容添加到目标之前
                  // 如果该内容是页面已有元素，这些元素会被移动到指定的位置
                  $(".s").insertBefore($(".box"));
                  
                  //删除节点
                  // 指定目标.remove()   删除指定目标
                  // $(".s").remove();
                   //清空节点
                   
                  //目标.empty()   清空目标的所有子节点，但不对目标自身造成影响
                  $("ul").empty();
                  
                  //克隆(复制)节点
                  // 目标.clone() :   复制,会返回指定目标的复制体，需要接受或者直接使用
                  var $b = $(".box").clone();
                  $b.appendTo($("body"));
            
                 //显示节点
                 //目标元素.show();   指定目标显示
                 //隐藏节点
                 //目标元素.hide();    指定目标隐藏
              });      
         </script>
     </body>
</html>

jq中查找元素的方法（与jq选择器功能类似）
同样要先引入jquery文件

html代码：
    <p>
      <span></span>
      <span></span>
    </p>
    <p>
        <span></span>
        <span></span>
    </p>
    <div></div>
    <div class="d"></div>
    <button></button>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <button></button>
    <button></button>
    <button></button>

jquery代码：

<script>
    $(function () {
          //1、find()方法    与jq后代选择器相似
        //  匹配元素下的后代元素,可以指定某一元素
        //搜索所有段落中的后代 span 元素，并将其颜色设置为红色：
        $("p").find("span").css("background","red");
        //2、children()方法   与jq子代选择器相似
        匹配元素下的所有的子元素，可以指定某一元素
        // 取得一个包含 匹配的元素集合中 每一个元素的所有子元素的元素集合
        $("p").children().css("fontSize","30px");
        // 描述：在每个div中查找 .selected 的类
        // $("div").children(".selected")
        //3、next()方法   与jq选择器相似
         // 挨着匹配元素的下一个元素
        $(".d").next().css("color","blue");
        //4、 nextAll() 方法  
        //挨着匹配元素下面所有的元素,可以指定某一元素
        $(".d").nextAll("button").html("哈哈哈");
        //5、 prev() 方法  
        //匹配元素的上一个元素
        $(".d").prev().html("我是新来的div");
        // 6、prevAll() 方法   
        //挨着匹配元素的上面的所有元素,可以指定某一元素
        $(".d").prevAll().html("我是新来的div");  // innerHTML
        $(".d").prevAll("span").text("我是新来的div"); // innerText
      // 7、siblings() 方法  
      // 匹配元素的所有兄弟元素
      $(".d").siblings("button");
</script>

来源：CSDN

作者：此鱼非闲鱼也

链接：https://blog.csdn.net/m0_45315697/article/details/104349200

标签

jquery选择器

jquery