JS和JQ知识点、JQ入门、JQ和JS对比、切换效果
1、JavaScript - JS
ECMAScript -> Java语法相似度99%
DOM -> Node节点
document: getElement..
creatElement()
Element: setAttribute()
getAttribute()
appendChild()
innerHTML
childNodes -> 标签+文本(空文本)
Attribute: 属性 src href value
Text: 文本
BOM
Window -> this 弹窗类 计时器类 打开/关闭
history -> back() forward()
location -> href
顶层函数/全局函数 -> eval() encodeURI() decodeURI()
事件\函数\正则表达式\数组
onclick onsubmit onchange onmouseover onmouseout onblur2、JQuery -> JQ
JS代码库-提供函数库
CSS选择器: class选择器 id选择器 属性选择器 元素选择器
选择器: 通过一定手段选择一些元素
JQ选择器: 选择一些元素, 调用函数
属性:
attr removeAttr -> attribute
自定义属性<color>
prop removeProp -> property
固有属性<a href> <img src> <input checked>
$.each(object,[callback]): 可以循环任何数组(包括普通array, JQ数组)
jq对象.each()
json
{ key1: {
key1: {}
}, key2: {}, key3:{} }
key: {} , ...
key: value , ...3、JQ入门
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQ入门</title>
<!-- 先引入JQuery代码库 -->
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> // JS的页面加载函数 onload = function() { alert("老张") } // 再次定义, JS中页面加载函数不能重复定义, 否则会将之前的覆盖掉 onload = function() { alert("老王") } // JQ的页面加载函数, 不会将JS的页面加载函数覆盖, 而且会先执行 jQuery(document).ready(function() { alert("老李"); }); // JQ的页面加载函数可以有多个, 而且按顺序执行 jQuery(function() { alert("老赵"); }); // jQuery -> $ $(function() { alert("老刘"); }); </script>
</head>
<body>
</body>
</html>
4、JQ和JS对比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQ和JS对比</title>
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> $(function() { $("#btn1").click(function() { // JS对象 var span = document.getElementById("msg"); // 修改标签体内容 span.innerHTML = "<font color=red>棒棒哒</font>"; span.innerText = "萌萌哒"; // 输入框内容修改 var input = document.getElementById("text1"); text1.value = "张无忌"; console.log(text1.value); // JS对象使用了JQ的函数 -> 报错 // console.log(span.html()); // this对象是JS对象 this.innerText = "this改掉了"; }); $("#btn2").click(function() { // JQ对象 $("#msg").html("<font color=red>蠢蠢哒</font>"); $("#msg").text("么么哒"); $("#text1").val("赵敏"); console.log($("#text1").val()) // JQ对象使用了JS的属性 -> 报错 //console.log($("#msg").innerText); // -- 掌握 // JQ对象 转换成 JS对象 $("#msg").get(index) console.log($("#msg").get(0).innerText); // JS对象 转换成 JQ对象 $(this).html("JQ的this改掉了"); }); }); </script>
</head>
<body>
<span id="msg"></span> <br>
<button id="btn1">使用JS修改span的内容</button>
<button id="btn2">使用JQ修改span的内容</button><br/>
<input id="text1" type="text" placeholder="请输入用户名"/>
</body>
</html>
5、切换效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>切换效果</title>
<script src="../js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> $(function() { $("#toggleBtn").click(function() { $("#img").toggle(); }); }) </script>
</head>
<body>
<img id="img" src="../media/image.jpg" /><br>
<button id="toggleBtn">切换效果</button>
</body>
</html>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/yangbo_CSDN/article/details/119616610
内容来源于网络，如有侵权，请联系作者删除！
