全国报名热线
15201841284
当你无法改变周遭环境时,至少可以调整自己的心态去面对它。
感觉很难时,告诉自己:再坚持一下,别辜负了曾经经历的苦难与磨练。
从这一篇开始,我们开始学习jQuery。
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)
完整版 : jquery-3.3.1.js -> 学习版本(学习源码 向高手学习时最好的学习方法)
压缩版 : jquery-3.3.1.min.js -> 开发版本(压缩版,减少传输)
提供了强大的功能函数
解决浏览器兼容性问题
实现丰富的 UI 和插件
纠正错误的脚本知识
等等...我们一起学习与发现
在html页面引入jQuery文件即可
<!-- 引入jQuery文件 --> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
$符号在 jQuery 中代表对jQuery对象的引用, jQuery是核心对象,通过该对象可以获取jQuery对象,调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。
$ 等价于 jQuery
和使用js操作DOM一样,获取文档中的节点对象是很频繁的一个操作,在jQuery中提供了简便的方式供我们查找|定位元素,称为jQuery选择器,选择器可以说是最考验一个人 jQuery 功力的地方,通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的DOM 对象并且以 jQuery 包装集的形式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的,具体分类如下。基础选择器掌握即可 ,
其他用到再查阅。
http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
http://www.w3school.com.cn/jquery/jquery_selectors.asp
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery选择器</title> </head> <body> <h3>jQuery选择器</h3> <div id="mydiv1">id选择器<span><p>span中的内容</p></span></div> <div id="mydiv2" class="clazz">元素选择器</div> <span class="clazz">类选择器</span> <input id="inp" type="text" value="我是一个输入框" /> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> // ----------------------id选择器---------------------- console.log("-----id选择器-----"); var mydiv1 = $('#mydiv1'); console.log(mydiv1.html()); // 等价于DOM: 元素.innerHTML console.log(mydiv1.text()); // 等价于DOM: 元素.innerText var inp = $("#inp"); console.log(inp.val()); // 等价于DOM: 元素.value // ----------------------元素选择器---------------------- console.log("-----元素选择器-----"); var divs = $('div'); // 有多个div元素 divs.each(function() { // $(this)是当前循环的每一个对象 console.log($(this).index() + "---" + $(this).text()); }); // ----------------------类选择器,class---------------------- console.log("-----类选择器-----"); var dv = $('.clazz'); // 有多个class="clazz"的元素 dv.each(function() { // $(this)是当前循环的每一个对象 console.log($(this).text()); }); // ----------------------通用选择器:*---------------------- console.log("-----通用选择器-----"); var all = $("*"); console.log(all.length); all.each(function() { // $(this)是当前循环的每一个对象 console.log($(this)); }); // ----------------------组合选择器---------------------- console.log("-----组合选择器-----"); var divs = $('div, span, .clazz'); divs.each(function() { // $(this)是当前循环的每一个对象 console.log($(this).prop("tagName") + "---" + $(this).text()); }); // ----------------------后代选择器---------------------- console.log("-----后代选择器-----"); var descendant = $('#mydiv1 span p'); descendant.each(function() { console.log($(this).html()); }); </script> </body> </html>
jQuery也提供了对HTML节点的操作,而且在原生js的基础之上进行了优化,使用起来更加方便。
常用的从几个方面来操作,查找元素(选择器已经实现);创建节点对象;访问和设置节点对象的值,以及属性;添加节点;删除节点;删除、添加、修改、设定节点的CSS样式;动画操作等。注意:以下的操作方式只适用于jQuery对象。
遍历元素
each()
$(selector).each(function(index, element))遍历元素
参数 function 为遍历时的回调函数,
index 为遍历元素的序列号,从 0 开始。
element是当前的元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery遍历元素</title> </head> <body> <h3>遍历元素 each()</h3> <span class="red">jQuery<b>段落</b></span> <span class="blue">Python</span> <span class="red">Java</span> <span class="blue">CSS</span> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> // each()遍历获取到的是DOM对象 $('span').each(function(idx, e) { console.log(idx + " -> " + $(e).text() + ' -> ' + $(e).index()); }); </script> </body> </html>
获取属性
注意:
attr():操作 checkbox 时选中返回 checked,没有选中返回 undefined
prop():可以获取元素名称prop("tagName"),获取 checkbox 建议使用prop(),attr()无法获取变化的checkbox,只可以获取静态的状态,而prop()都可以。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery获取属性</title> </head> <body> <h3>jQuery获取属性</h3> <form action="" id="myform"> <input type="checkbox" name="ch" checked="checked" /> aa <input type="checkbox" name="ch" /> bb </form> <button id="btn" type="button">测试按钮</button> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> // 获取属性 function getAttr() { var inp = $("input"); console.log(inp); // 手动勾选bb之后attr()依旧返回undefined,prop()返回true inp.each(function(idx, em) { console.log(idx + "---" + $(em)); console.log($(em).attr('checked') + "---" + $(em).prop('checked')); console.log($(e).attr("name")); console.log($(e).attr("type")); console.log('---------------------------------'); }); } // 绑定事件执行函数 $('#btn').click(getAttr); </script> </body> </html>
设置属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery移除属性</title> </head> <body> <h3>jQuery移除属性</h3> <form action="" id="myform"> <input type="checkbox" name="ch" checked="checked" /> aa <input type="checkbox" name="ch" checked="checked" /> bb </form> <button id="btn" type="button">测试按钮</button> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> // 移除属性 function delAttr() { var inp = $("input[name='ch']"); console.log(inp); inp.each(function(idx, em) { $(em).removeAttr('checked'); }); } // 绑定事件执行函数 $('#btn').click(delAttr); </script> </body> </html>
对于元素的样式,也是一种属性,由于样式用得特别多,所以对于样式除了当做属性处理外还可以有专门的方法进行处理。
增加元素的具体样式,格式:
a. css({"样式名":"样式值", "样式名2":"样式值2"})
例:css({"background-color":"red", "color":"#fff"});
b. css("样式名", "样式值")
例:css("color", "white");
移除全部使用removeAttr("style")
移除单个使用css("属性","");
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery操作样式</title> <style type="text/css"> div { width: 200px; padding: 10px; } .blue { background: blue; color: #fff; } </style> </head> <body> <h3>jQuery操作样式</h3> <div id="blue_div">蓝色</div> <div id="red_div">红色</div> <button type="button" id="add_btn">添加样式</button> <button type="button" id="remove_btn">移除样式</button> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> // 添加样式 // 第一种 当做属性处理 function addAttr() { var blue_div = $('#blue_div'); // 直接添加class属性 blue_div.attr('class', 'blue'); // 或者使用style添加样式 //blue_div.attr("style", "background: blue;color: #fff;"); } // 移除样式 function delAttr() { var blue_div = $('#blue_div'); blue_div.removeAttr('class'); // 移除所有 //blue_div.removeAttr('style'); } // 第二种 使用指定方法css() // 添加样式 function addCss() { var blue_div = $('#blue_div'); blue_div.css({ 'background': 'blue', 'color': '#fff' }); } // 移除样式 function delCss() { var blue_div = $('#blue_div'); blue_div.css({ 'background': '', 'color': '' }); // 移除所有 //blue_div.removeAttr('style'); } // 绑定事件 $('#add_btn').click(addAttr); $('#remove_btn').click(delAttr); </script> </body> </html>
对于元素还可以操作其中的内容,例如文本,值,甚至是html。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery操作内容</title> </head> <body> <h3><span>jQuery操作内容</span></h3> <button type="button" id="btn">测试按钮</button> <div id="html"><p>div1</p></div> <div id="text"><p>div2</p></div> <input type="text" name="uname" value="jQuery" /> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $("#btn").click(function() { // 获取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("哈哈哈"); }); </script> </body> </html>
在jQuery中创建元素很简单,直接使用核心函数即可。
$('元素内容');
$('<p>我是一个p元素</p>');
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery添加元素</title> <style type="text/css"> div { width: 200px; height: 50px; } .red { background-color: red; } .yellow { background-color: yellow; } .blue { background-color: blue; } </style> </head> <body> <h3>jQuery_添加元素</h3> <p>prepend()前追加内容</p> <p>prependTo()前追加内容</p> <p>append()后追加内容</p> <p>appendTo()后追加内容<p> <span class="red"><b>Java</b></span> <span class="blue"><b>Python</b></span> <div class="yellow"> <span><b>jQuery</b></span> </div> <button type="button" id="btn">测试按钮</button> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> var create_span = "<span id='mydiv' style='width: 200px;background-color:black;color: white;'>动态创建span</span>"; // 1、prepend()前追加内容 function prependFunc() { // 在body元素内最前面添加指定元素 $("body").prepend(create_span); } // 2、prependTo()前追加内容 function prependToFunc() { // 将指定元素添加至body元素内最前面 $("<b>开头</b>").prependTo('body'); } // 3、append()后追加内容 function appendFunc() { // 在body元素内最后面添加指定元素 $("body").append(create_span); // 把已存在的元素添加到另一处的时候相当于移动 //$("div").append($('.red')); } // 4、appendTo()后加内容 function appendToFunc() { // 将指定元素添加至body元素内最后面 $(create_span).appendTo('p'); // 把已存在的元素添加到另一处的时候相当于移动 //$('.blue').appendTo("div"); } var btn = $("#btn"); btn.click(appendToFunc); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery删除元素</title> <style type="text/css"> span { color: white; padding: 10px; } .red { background-color: red; } .blue { background-color: blue; } </style> </head> <body> <h3>jQuery删除元素</h3> <span class="red">jQuery<b>段落</b></span> <span class="blue">Python</span> <span class="red">Java</span> <span class="blue">CSS</span> <button type="button">测试按钮</button> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> function delElement() { // 清空元素 //$("span").empty(); // 删除所选元素或指定的子元素 $("span").remove(); $("span b").remove(); // 删除样式为blue的span //$("span.blue").remove(); // 清空样式为red的元素 //$(".red").empty(); } $('button').click(delElement); </script> </body> </html>
今日jQuery分享到这里,下一篇我们一起学jQuery事件。(分享自:公众号 嗨码歌)
更多Java及前端技术资料,学习视频请联系客服小姐姐获取。上海尚学堂Java大数据免费试学名额申请中,赶快领取吧!