jquery获取img的src值

JQuery

主要内容

Jquery对象

jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，“如虎添翼”。同时网络上丰富的 jQuery 插件也让我们的工作变成了"有了 jQuery，一切 so easy。" --因为我们已经站在巨人的肩膀上了。

jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

Jquery的下载与安装

下载

http://jquery.com/ 下载

版本

jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)

（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码想高手学习是最好学习方法)

（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)

目前使用版本：jquery-3.4.1.js

优点

（1）提供了强大的功能函数

（2）解决浏览器兼容性问题

（3）实现丰富的 UI 和插件

（4）纠正错误的脚本知识

…

安装

在页面引入即可

Jquery核心

$ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象。通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

$ <==> jQuery

Dom对象与 Jquery包装集对象

明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是dom对象；而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。

Dom对象

javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法：

var div = document.getElementById("testDiv"); var divs = document.getElementsByTagName("div");

Jquery包装集对象

可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集：

var jQueryObject = $("#testDiv");

Dom对象转 Jquery对象

Dom对象转为jQuery对象，只需要利用$()方法进行包装即可

var domDiv = document.getElementById('mydiv'); // 获取Dom对象 mydiv = $(domDiv);

Jquery对象转 Dom对象

jQuery对象转Dom对象，只需要取数组中的元素即可

// 第一种方式获取jQuery对象 var jqueryDiv = jQuery('#mydiv'); // 第二种方式获取jQuery对象 jqueryDiv = $('#mydiv'); var dom = jqueryDiv[0]; // 将以获取的jquery对象转为dom

通过遍历jQuery对象数组得到的对象是Dom对象，可以通过$()转为jQuery对象

$('#mydiv').each(function() {//遍历 var jquery = $(this); });

案例：

<div id="mydiv">write less, do more</div> <script type="text/javascript"> console.log("-------------获取dom对象------------------") // dom对象 var domDiv = document.getElementById("mydiv"); console.log(domDiv); console.log("-------------获取jquery对象------------------") // 获取jquery对象 // 第一种方式 var jqueryDiv = jQuery('#mydiv'); console.log(jqueryDiv); // 第二种方式 jqueryDiv = $('#mydiv'); console.log(jqueryDiv); console.log("-------------dom转jquery------------------") // dom转jquery包装集/对象 var obj = $(domDiv); console.log(obj); console.log("-------------jquery转dom------------------") // jquery对象转dom对象 var dom = $('#mydiv')[0]; // 获取jquery对象转为dom // 或 var dom2 = jqueryDiv[0]; // 将jquery对象转为dom console.log(dom); console.log(dom2); /* this代表了dom对象，不是jquery对象 */ console.log("-------------dom转jquery------------------") $('#mydiv').each(function() { // 通过id选择器选择了id为mydiv的所有元素然后进行遍历 // 那么遍历出的每个元素就是id为mydiv的标签元素 // 而this就代表了当前的这个元素 var jquery = $(this); }); console.log("-------------jquery转dom------------------") $('#mydiv').each(function() { var dom3 = this; }); </script>

Jquery选择器

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。

jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用到再查阅。

基础选择器

选择器	名称	举例

层次选择器

选择器	名称	举例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>层次选择器</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> <style type="text/css"> .testColor{ background: green; } .gray{ background: gray; } </style> </head> <body> <div id="parent">层次择器 <div id="child" class="testColor">父选择器 <div class="gray">子选择器</div> <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" /> <img src="http://www.baidu.com/img/bd_logo1.png" width="270" height="129" /> </div> <div> 选择器2<div>选择器2中的div</div> </div> </div> </body> <script type="text/javascript"> console.log("=========后代选择器-选择所有后代====="); var ancestorS = $('#parent div'); ancestorS.each(function(){ console.log($(this).text()); }); console.log("=========子代选择器-选择儿子辈====="); var child = $('#parent>div'); child.each(function(){ console.log($(this).text()); }); console.log("=========相邻选择器====="); var pre_next = $(".gray + img"); console.log(pre_next.length); console.log("=========同辈选择器,其后，（弟弟）====="); var pre_siblings = $(".gray ~ img"); console.log(pre_siblings.length); </script> </html>

表单选择器

Forms	名称	举例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单验证</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> </head> <body> <form id='myform' name="myform" method="post"> <input type="hidden" name="uno" value="9999" disabled="disabled"/> 姓名:<input type="text" id="uname" name="uname" /><br /> 密码:<input type="password" id="upwd" name="upwd" value="123456" /><br /> 年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩 <input type="radio" name="uage" value="1"/>你懂得 <br /> 爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球 <input type="checkbox" name="ufav" value="爬床"/>爬床 <input type="checkbox" name="ufav" value="代码"/>代码<br /> 来自:<select id="ufrom" name="ufrom"> <option value="-1" selected="selected">请选择</option> <option value="0">北京</option> <option value="1">上海</option> </select><br /> 简介:<textarea rows="10" cols="30" name="uintro"></textarea><br /> 头像:<input type="file" /><br /> <input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/> <button type="submit" οnclick="return checkForm();">提交</button> <button type="reset" >重置</button> </form> </body> </html> <script type="text/javascript"> function checkForm(){ // 获取所有的表单元素 $(":input").each(function(){ // console.log($(this)[0]); console.log($(this)[0].tagName); }) console.log("------+++++++++++++++++++++--------") // 获取 text console.log("text-->" + $(":text").length); // 1 // 获取 password console.log("password-->" + $(":password").length); // 1 // 获取radio console.log("radio-->" + $(":radio").length); // 2 // 获取checkbox console.log("checkbox-->" + $(":checkbox").length); // 3 // 获取file console.log("file-->" + $(":file").length); // 1 // 获取按钮 console.log("button-->" + $(":button").length); // 2 // 获取submit按钮 console.log("submit-->" + $(":submit").length); // 1 // 获取image按钮 console.log("image-->" + $(":image").length); // 1 // 获取reset按钮 console.log("reset-->" + $(":reset").length); // 1 return false; } </script>

Jquery Dom操作

jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。

常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：以下的操作方式只适用于jQuery对象。

操作元素的属性

获取属性

方法	说明	举例

<form action="" id="myform"> <input type="checkbox" name="ch" checked="checked"/> aa <input type="checkbox" name="ch" /> bb </form> <script type="text/javascript"> var ch = $("input[type='checkbox']") console.log(ch) ch.each(function(idx, em){ console.log(idx + "-" + $(em) + "=" + this) console.log($(em).attr('checked') + "==" + $(em).prop('checked')) console.log('--------------') }) </script>

设置属性

方法	说明	举例

移除属性

方法	说明	举例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性操作</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> </head> <body> <pre> <h5>1.attr()</h5> 设置或者返回元素的属性 ; <h5>2.prop()</h5> 设置具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。 </pre> <hr /> <a href="http://www.baidu.com" id="a1">百度</a> <a href="http://www.sina.com" id="a2">新浪</a> <input type="checkbox" name="all" checked="checked"/>全选 </body> <script type="text/javascript"> // 获取属性值：attr console.log($('#a1').attr('href')); console.log($(':checkbox').attr('name')); // 若未选中显示undefined，选中显示 checked console.log($(':checkbox').attr('checked')); // 获取属性值：prop // 若未选中显示false，选中显示 true console.log($(":checkbox").prop('checked')); console.log($('#a2').prop('href')) // 设置属性值 $('#a1').attr('href','https://jquery.com'); $(":checkbox").prop("checked",false); // 移除属性 $('#a2').removeAttr('href'); </script> </html>

操作元素的样式

对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。

方法	说明

增加元素的具体样式，格式：

1）css({‘样式名’:’样式值’,’样式名2’:’样式值2’}) 例：css({"background-color":"red","color":"#fff"}); 2）css(“样式名”,”样式值”) 例：css('color','white')

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置元素样式</title> <script src="jquery-3.4.1.js" type="text/javascript" ></script> <style type="text/css"> div{ padding: 8px; width: 180px; } .blue{ background: blue; } .larger{ font-size: 30px; } .green { background : green; } </style> </head> <body> <h3>css()方法设置元素样式</h3> <div id="conBlue" class="blue larger">天蓝色</div> <div id="conRed">大红色</div> <div id="remove" class="blue larger">天蓝色</div> </body> <script type="text/javascript"> // 获取样式名称 console.log($("#remove").attr("class")); // 修改样式，那么id为remove的元素样式class只有green // $('#remove').attr("class","green") // 添加样式名称，class名称 --叠加 // $('#conBlue').addClass("blue larger"); // 添加元素具体样式 // { "":"" , "":"" } 名:值对 $('#conRed').css({"background-color":"red","color":"#fff"}); $('#remove').css('color','red'); // 移除样式 // $("#remove").removeClass("blue larger"); </script> </html>

操作元素的内容

对于元素还可以操作其中的内容，例如文本，值，甚至是html。

方法	说明

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>操作内容</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> </head> <body> <h3><span>html()和text()方法设置元素内容</span></h3> <div id="html"></div> <div id="text"></div> <input type="text" name="uname" value="oop" /> </body> <script type="text/javascript"> // 获取HTML内容，包括HTML标签 console.log($('h3').html()); // 获取文本内容，不包括HTML标签 console.log($('h3').text()); // 获取value值 console.log($('[name=uname]').val()); // 设置 $('#html').html("<p>使用html设置,看不到标签</p>"); $('#text').text("<p>使用text设置,能看到标签</p>"); $('[name=uname]').val("哈哈哈"); // http://console.info("abc"); // console.log("abc"); // console.warn("abc") // console.error("abc"); </script> </html>

创建元素

在jQuery中创建元素很简单，直接使用核心函数即可

$(‘元素内容’);

$('<p>this is a paragraph!!!</p>');

添加元素

方法	说明

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>追加</title> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> div { margin: 10px 0px; } span{ color: white; padding: 8px } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } </style> </head> <body> <h3>prepend()方法前追加内容</h3> <h3>prependTo()方法前追加内容</h3> <h3>append()方法后追加内容</h3> <h3>appendTo()方法后追加内容</h3> <span class="red">男神</span> <span class="blue">偶像</span> <div class="green"> <span >小鲜肉</span> </div> </body> </html> <script type="text/javascript"> var str ="<span id='mydiv' style='padding: 8px;width: 180px;background-color:#ADFF2F;'>动态创建span</span>"; // 1、使用prepend前加内容 $("body").prepend(str); // 2、使用prependTo前加内容 $("<b>开头</b>").prependTo('body'); // 3、使用append后加内容 $("body").append(str); // $("div").append($('.red')); // 当把已存在的元素添加到另一处的时候相当于移动 // 4、使用appendTo后追加内容 $(str).appendTo('body'); // $('.blue').appendTo("div"); </script>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>插入元素</title> <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> span{ color: white; padding: 8px } .red{ background-color: red; } .blue{ background-color: blue; } .green{ background-color: green; } </style> </head> <body> <h3>before() 和 after()方法在元素之前后插入内容</h3> <span class="green">财大气粗</span> </body> </html> <script type="text/javascript"> var str1 = "<span class='red'>土豪</span>"; var str2 = "<span class='blue'>暴发户</span>"; $(".green").before(str1); // 前置元素 $(".green").after(str2); // 后存元素 </script>

删除元素

方法	说明

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>删除元素</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> <style type="text/css"> span{ color: white; padding: 8px; margin: 5px; float: left; } .green{ background-color: green; } .blue{ background-color: blue; } </style> </head> <body> <h3>删除元素</h3> <span class="green">jquery<a>删除</a></span> <span class="blue">javase</span> <span class="green">http协议</span> <span class="blue">servlet</span> </body> </html> <script type="text/javascript"> // 删除所选元素或指定的子元素 // $("span").remove(); // 删除样式为blue的span // $("span.blue").remove(); // 清空元素 // $("span").empty(); // $(".green").empty(); </script>

遍历元素

each()

$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element是当前的元素，此时是dom元素。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>遍历元素</title> <style type="text/css"> span{ color: white; padding: 8px; margin: 5px; float: left; } .green{ background-color: green; } .blue{ background-color: blue; } </style> <script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h3>遍历元素 each()</h3> <span class="green">jquery</span> <span class="green">javase</span> <span class="green">http协议</span> <span class="green">servlet</span> </body> <script type="text/javascript"> $('span').each(function (idx , e) { console.log(idx + " ---> " + $(e).text()); }) </script> </html>

Jquery事件

ready加载事件

ready()类似于 onLoad()事件

ready()可以写多个，按顺序执行

(document).ready(function(){})等价于(document).ready(function())等价于(function(){})

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ready事件</title> <script src="js/jquery-3.4.1.js" type="text/javascript"></script> <script type="text/javascript"> // 文档载入完便触发ready方法 $(document).ready(function(){ $("div").html("ready go..."); }) // $(document).ready(function(){}) == $(function(){}) $(function(){ $("p").click( function () { $(this).hide(); }); }); $(function(){ $("#btntest").bind("click",function(){ $("div").html("剁吧..."); }); }); </script> </head> <body> <h3>页面载入时触发ready()事件</h3> <div></div> <input id="btntest" type="button" value="剁手" /> <p>aaa</p> <p>bbbb</p> <p>ccc</p> <p>dddd</p> </body> </html>

bind()绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind( eventType [, eventData], handler(eventObject));

eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。

这类类型可以包括如下：

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick

mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter

mouseleave,change, select, submit, keydown, keypress, keyup, error

[, eventData]：传递的参数，格式：{名:值,名2:值2}

handler(eventObject)：该事件触发执行的函数

简单的bind()事件

绑定多个事件

Jquery Ajax

$.ajax

jquery调用ajax方法：

格式：$.ajax({});

参数：

type：请求方式GET/POST

url：请求地址url

async：是否异步，默认是true表示异步

data：发送到服务器的数据

dataType：预期服务器返回的数据类型

contentType：设置请求头

success：请求成功时调用此函数

error：请求失败时调用此函数

get请求

$.ajax({ type:"get", url:"js/cuisine_area.json", async:true, success : function (msg) { var str = msg; console.log(str); $('div').append("<ul></ul>"); for(var i=0; i<msg.prices.length;i++){ $('ul').append("<li></li>"); $('li').eq(i).text(msg.prices[i]); } }, error : function (errMsg) { console.log(errMsg); $('div').html(errMsg.responseText); } });

post请求

$.ajax({ type:"post", data:"name=tom", url:"js/cuisine_area.json", contentType: "application/x-www-form-urlencoded", async:true, success : function (msg) { var str = msg; console.log(str); $('div').append("<ul></ul>"); for(var i=0; i<msg.prices.length;i++){ $('ul').append("<li></li>"); $('li').eq(i).text(msg.prices[i]); } }, error : function (errMsg) { console.log(errMsg); $('div').html(errMsg.responseText) } });

$.get

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

// 1.请求json文件，忽略返回值 $.get('js/cuisine_area.json');

// 2.请求json文件，传递参数，忽略返回值 $.get('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值 $.get('js/cuisine_area.json',function(data){ console.log(data); });

// 4.请求json文件,传递参数,拿到返回值 $.get('js/cuisine_area.json',{name:"tom",age:100},function(data){ console.log(data); });

$.post

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

// 1.请求json文件，忽略返回值 $.post('../js/cuisine_area.json');

// 2.请求json文件，传递参数，忽略返回值 $.post('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值 $.post('js/cuisine_area.json',function(data){ console.log(data); });

// 4.请求json文件,传递参数,拿到返回值 $.post('js/cuisine_area.json',{name:"tom",age:100},function(data){ console.log(data); });

$.getJSON

表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){ console.log(data); // 要求返回的数据格式是JSON格式 });

$.get(‘js/cuisine_area.json’);

```js // 2.请求json文件，传递参数，忽略返回值 $.get('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值 $.get('js/cuisine_area.json',function(data){ console.log(data); });

// 4.请求json文件,传递参数,拿到返回值 $.get('js/cuisine_area.json',{name:"tom",age:100},function(data){ console.log(data); });

$.post

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。

请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

// 1.请求json文件，忽略返回值 $.post('../js/cuisine_area.json');

// 2.请求json文件，传递参数，忽略返回值 $.post('js/cuisine_area.json',{name:"tom",age:100});

// 3.请求json文件,拿到返回值,请求成功后可拿到返回值 $.post('js/cuisine_area.json',function(data){ console.log(data); });

// 4.请求json文件,传递参数,拿到返回值 $.post('js/cuisine_area.json',{name:"tom",age:100},function(data){ console.log(data); });

$.getJSON

表示请求返回的数据类型是JSON格式的ajax请求

$.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){ console.log(data); // 要求返回的数据格式是JSON格式 });

jquery获取img的src值_JQuery相关推荐

jquery 获取tr里的值_jquery遍历table的tr获取td的值实现方法
下面小编就为大家带来一篇jquery遍历table的tr获取td的值实现方法.小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 html代码: 删除删除删除方法一: v ...
jquery 获取tr里的值_jquery获取tr中控件值并操作tr实现思路
Material/Special Tool Rental/Tool Cantainer/Transportation/Mobile Project No 选择 Final Custome: Label ...
Jquery获取列表中的值和input单选、多选框控制选中与取消
一.Jquery获取列表中的值 1.jsp页面代码 <tbody><c:forEach var="model" items="${listRefEnti ...
jquery获取checkbox选中的值
jquery获取checkbox选中的值,包括全选取消全选反选选中奇数行获取选中的值这里有一个注意点:使用attr(),会发现代码那里的checked="checked" ...
js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下复制代码 <script> function get1() { document.getElementById("tx ...
获取 html class属性,jquery获取class属性的值
jquery获取class属性的值的方法:首先创建一个前端示例文件:然后通过"$('#demo').attr('class');"或者"$('#demo')[0].cla ...
jquery 获取父页面Id 值
jquery 获取父页面Id 值 $('#id', parent.document).val();
jquery 获取某个值得键名_jQuery获取元素索引值index（）方法
jQuery的index()方法搜索匹配的元素,并返回相应元素的索引值,从0开始计数: 如果没给.index()方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于同辈元素的位置: ...
通过jQuery获取Select选中的值或文本
如何使用jQuery获取Select元素选中的值或文本呢?本篇文章给出相应的解决方法目录第一步.引入jQuery 第二步.编写一个Select案例第三步.编写获取select选中的值或文本第四 ...

jquery获取img的src值_JQuery

jquery获取img的src值_JQuery相关推荐

最新文章

热门文章