独立开发者（47）——jquery使用回顾

基本必备的前端知识点之一，虽然已经逐步转到vue react 上，但是很多临时项目或者老项目，jq还是非常有用。梳理下常用的jq案例。
1.加载机制的理解。默认情况下，浏览器是按照代码的执行顺序执行解析代码，但是有些代码却必须等到全部页面加载完成后，才能跑，特别是渲染那图片和一些css 所以如果写的代码位置不对，会造成页面执行的错误。这个时候，就需要用到
window.onload = function () {} 该方法告诉浏览器 加载完成后执行
而在jq里面有简写方法: $(function())该方法比较常用，所以经常可以看到$(function(){})的写法

2. 根据后端渲染的参数，展示特定的内容

   产品有2个选项，每次选择其中一个，页面展示一个相关的选项，同时隐藏另外一个

   朋友圈的动态效果，如果用户选择了发送图片，会隐藏发视频，否则会隐藏发送图片

      var vtype = $("#c-vtype").val(); //读取到渲染的参数类型
           if(vtype == 1){
               $("#hfile").hide(); // 隐藏
               $("#himages").show();
           }else{
               $("#himages").hide(); 
               $("#hfile").show(); // 显示在页面
           }
   

3. 事件的绑定理解 （事件就是前端触发）

   类似 鼠标点击的时候 双击的时候，鼠标移动过的时候 诸如此类的场景
   $(‘#c-vtype’).click(function(){}) 点击到v-vtype元素的时候，触发的事件

   比较常用的交互是某个值改变，让页面进行变化 值变化事件 change
   $(‘#c-vtype’).change(function(){}) 事件的变化情况 使用场景，用户改变dom节点的值，可以导致其他节点的隐藏或者显示

   <select id="colorSelect">
       <option value="red">Red</option>
       <option value="green">Green</option>
       <option value="blue">Blue</option>
   </select>
   

   选择不同的值，触发不同的场景 change事件

4. 远程数据获取 最基础也是最重要的能力之一，和远程url进行交互

   $.ajax({
      url: 'url', // 远程数据的 URL
      method: 'GET', // 请求方法，可以是 GET、POST 等
      dataType: 'json', // 预期返回的数据类型，如 json、html、xml 等
      success: function (data) {
        // 请求成功后执行的回调函数
        $('#result').html(data.someProperty); // 根据返回的数据进行相应的操作
      },
      error: function (error) {
        // 请求失败时执行的回调函数
        console.error('Error fetching data:', error);
      }
    });

获取数据成功之后

5.二级联动数据 改变上个数据，切换另外一个数据

    //切换老师  班级改变 data-source="banji/index"
        $("#c-teachers_id").change(function(){
            $.post("banji/index",{
                //搜索条件，上一个selectpage选择完后传过来的id作为此次搜索的条件
                custom: {teachers_id: $('#c-teachers_id').val()},
                keyField:'id',
                showField:'name',
            },function(result){
                //动态更改数据源
                $('#c-banji_id').selectPageData(result.list);
            });
        })

​ 6.this概念 指定自己当前元素自己本身

  $("button").click(function(){
    $(this).hide();
  });

​ 这样就可以非常方便的操作当前元素，类似点击自己变化颜色，而无需定义另外一个变量来操作自己。点击隐藏自己

7.其他常用语法小结:
选取每个

• 元素的第一个
• 元素 $(“ul li:first-child”) 场景 要对所有的ul的第一个li进行加粗处理
  如果只需要 选取第一个
  • 元素的第一个
  • 元素 $(“ul li:first”) 如果是读取a标签第一个 $(“a:first”)类似这种方法可以读取任意的第一个元素进行操作
    选取带有 href 属性的元素 $(“[href]”) 这种方法可以表示元素里面的任意属性 比如自定义的data-x属性 这样就可以完成某个框架内部的自定义元素操作 类似bootstrap框架定义某个 data-field
    选取所有 target 属性值不等于 “_blank” 的 元素 $(“a[target!=‘_blank’]”) 等于和不等于都可以使用到jquery里面 筛选等于的时候加上不等于号!=即可

8.理解jq的回调函数
没有回调函数的使用:

$("button").click(function(){
  $("p").hide(1000);
  alert("我先弹出");
});

hide是函数是异步执行的，所以导致出现的效果，后面的alert先弹出，然后再去隐藏p元素。如果要改变这种情形，需要使用到回调函数概念:

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

加入回调函数，会先隐藏再弹出，回调函数可以确保执行顺序

9.元素捕获加深:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标签）
val()- 设置或返回表单字段的值
获取属性值$(“#runoob”).attr(“href”)

10.元素变动:
append() - 在被选元素的结尾插入内容 可写的某个元素里面新增内容到后面 ul p段落 变动的就是元素本身的内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容 元素的html新增内容，无法新增内容的标签 前后增加相关元素的操作 不会影响操作的元素