首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Jquery入门

Jquery入门

作者头像
DencyCheng
发布2018-11-05 16:11:39
5040
发布2018-11-05 16:11:39
举报
文章被收录于专栏:SpringBootSpringBoot

版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery [] jquery概念 jquery是JS的框架。 JS的函数库。 【】BOM BOM:Browser Object Model BOM对象: 1.window:BOM根对象 2.window.navigator 浏览器对象 3.window.location : URL地址对象 4.window.document: 文档对象。 5.window.history 历史对象 【】DOM DOM根对象:window.document 表示浏览器载入的文档在内存中模型。 DOM模式的格式:树。 每个标记表示一个对象,在树中是一个节点。 1. JS定位一个节点方法 (1)根据ID定位:var div=document.getElementById("id"); 返回一个对象 (2)根据标记名定义:var div=document.getElemenetByTagName("div");       返回对象的数组。 (3) 根据CSS选择器选择对象:       var ob=document.querySelector("css选择器");返回满足选择器的第一个对象       例子:      <input type="text" name="userid" id="userid" />      var userid=document.querySelector("input[name='userid']");      var userid=document.querySelector("#userid");      var userid=document.querySelector("input"); (4) 返回所有的选择器选择的对象:返回对象数组。 document.querySelectorAll("CSS选择器") 【】DOM操作节点对象 1.读/写节点的内容    <div id="maincontent">    </div>    var div01=document.querySelector("#maincontent");    div01.innerHTML="你好";    div01.innerText="你好";    var info=div01.innerHTML;    var info=div01.innerText; 2.读写FORM表单元素的值     <input type="text" name="userid" id="userid" />     var userid=document.querySelector("#userid");     userid.value="001";     var v=userid.value; 3. 读写节点的样式      <div id="maincontent">AAA </div>       var div01=document.querySelector("#maincontent");      div01.style.backgroundColor="blue";      var color= div01.style.backgroundColor; 4. 设置节点对象的事件      var div01=document.querySelector("#maincontent");      div01.onclick=function(event){          alert(div01.innerHTML);      }; 5.读写对象的属性    <a id="link01" class="link" href="#">测试</a>    var a=document.querySelector("#link01");    var href=a.href;    a.href="docyument/add.mvc"; 【】jquery引入 <script src="js/jquery.js"></script> 【】jQuery语法: 1.操作DOM节点:    $(选择器).函数(参数); 2.通用的函数,不针对DOM节点    $.函数(参数);    $.get, $.post, $.getJSON, $.each 【】jquery的节点选择器:使用CSS选择 1.ID选择器    $("a#link01).on("click",function(){}); 2.class选择器    $(".link).on("click",function(){}); 3.标记选择器   $("a").on(); 4.属性选择器:    $("input[name='userid']").on("blur",function(){}); 5. 组合选择器 (1) 子选择器:$("div  a"). (2)平行选择器:  $("div,ul,li,a"). (3) 直接子选择器:$("div>a"). 【】jquery操作DOM节点 1.读写节点内容:html(), text()    $("a#link01).html("你好");    $("a#link01).text("你好");    var info=$("a#link01).html();    var info=$("a#link01).text(); 2.读写表单元素值    $("input#userid").val("001");    var v=$("input#userid").val(); 3.读写节点的样式:css    $("div#maincontent").css("background-color","blue");    var color=$("div#maincontent").css("background-color");    $("div#maincontent").css({"background-color":"blue",                                               width:"100%",height:"400px"                                              }); 4.DOM节点注册事件    $("div#maincontent").on("click",function(event){    });     $(document).ready(function(){}); 5.读取节点的属性    var url=$(this).attr("href");    $("a#link01").attr("href","dept/add.mvc"); 【】jquery的AJAX封装函数 1.$.get("url",{参数},function(data){}); 2.$.post("url",{参数},function(data){}); 3.$.getJSON("url",{参数},function(data){}); 【】jquary绑定 节点多的时候使用! 1.绑定  $(document).ready(function(){ $("button#button01").bind("click",clickHand01); $("button#button02").bind("click",clickHand02); $("button#button01").unbind("click"); }); function clickHand01(){ alert("hello!"); };

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年02月08日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档