How to assign value to src in jquery

jquery is a very powerful and practical JavaScript library that is widely used in the web development process. In the process of web development, we often need to manipulate DOM elements, such as changing its content, style or attributes. One of the problems often encountered is how to assign a value to src through jquery. This article will explain this problem in detail.

1. what is jquery?

jquery is a JavaScript library that simplifies the interaction between HTML and JavaScript, making it easier to manipulate elements and styles in HTML. It is a lightweight, fast and concise JavaScript library that can simplify event processing, document traversal, animation and other operations, and is easy to use and extend.

2. jquery assigns the src attribute

jquery can use the attr() method to assign a value to src. The attr() method is a method in jQuery for manipulating element attributes. Its syntax is as follows:

$(selector).attr(attribute,value)

where selector is the jquery selector, attribute represents the attribute name to be operated, and value is the attribute to be set. value.

Let’s give an example:

<!--html代码-->
<img id="img1" src=""/>
<button id="btn">改变图片</button>

<script>
  //jquery获得按钮元素
  $(document).ready(function(){
     $("#btn").click(function(){
        $("#img1").attr("src","图片地址");
     });
  });
</script>

In the above example, we created a picture element and a button element. Through jquery's attr() method, when we click the button, the src attribute of the image element is changed to "image address".

It should be noted that some browsers or versions do not support dynamically changing the image address, which may cause the image to fail to load. For example, browsers of IE9 and below do not support dynamically changing the image address. You need to set the initial address of the image when the page is loaded or use other methods to dynamically load the image.

3. jquery modification attribute application scenario

jquery's attr() method can not only be used to modify the src attribute of the image, but can also be applied to modify the attributes of other elements, for example:

• Modify the value of the text box

  <!--html代码-->
  <input type="text" id="input1" value=""/>
  <button id="btn">改变值</button>
  
  <script>
  //jquery获得按钮元素
  $(document).ready(function(){
     $("#btn").click(function(){
        $("#input1").attr("value","新的值");
     });
  });
  </script>

• Modify the href attribute of the hyperlink element

  <!--html代码-->
  <a id="link1" href="https://www.baidu.com">点击跳转</a>
  <button id="btn">改变链接地址</button>
  
  <script>
  //jquery获得按钮元素
  $(document).ready(function(){
     $("#btn").click(function(){
        $("#link1").attr("href","https://www.google.com");
     });
  });
  </script>

• Modify the button The disabled attribute of the element

  <!--html代码-->
  <button id="btn1" disabled="true">禁用按钮</button>
  <button id="btn2">启用按钮</button>
  
  <script>
  //jquery获得按钮元素
  $(document).ready(function(){
    $("#btn2").click(function(){
        $("#btn1").attr("disabled",false);
     });
  });
  </script>

As can be seen from the above example, jquery's attr() method can not only modify the src attribute of the image, but also modify the attributes of other elements. This is also One of the reasons why it is widely used in the web development process.

4. Conclusion

Through the explanation of this article, I believe you have understood how jquery assigns values ​​to src and how to use the attr() method to assign values ​​to the attributes of other elements. jquery is easy to learn and flexible to operate, and it can also play a huge role in actual development. Therefore, learning jquery is one of the basic skills that every front-end developer must master.

The above is the detailed content of How to assign value to src in jquery. For more information, please follow other related articles on the PHP Chinese website!