jquery的简单用法

1.获取

1.获取值

let loginAct =$("#loginAct").val();

2.获取值时，去除前后空格

let loginAct = $.trim($("#loginAct").val());

3.使用jquery获取指定元素的指定属性的值：

选择器.attr(“属性名”);//用来获取那些值不是true/false的属性的值.
选择器.prop(“属性名”);//用来获取值是true/false的属性的值.例如：checked,selected,readonly,disabled等。

4.jquery事件函数的用法：
1> 选择器.click(function(){//给指定的元素添加事件
//js代码
});

2>选择器.click();//在指定的元素上模拟发生一次事件

2.选择

1,在页面中给元素添加事件语法：
1)使用元素的事件属性：onxxxx=“f()”
2)使用jquery对象：选择器.xxxx(function(){
//js代码
//this
});
*只能给固有元素添加事件
固有元素：当调用事件函数给元素添加事件时，如果元素已经生成，则这些元素叫做固有元素；
动态生成的元素：当调用事件函数给元素添加事件时，如果元素还没有生成，后来生成的元素叫做动态生成的元素。
3)使用jquery的on函数：父选择器.on(“事件类型”,子选择器,function(){
//js代码
//this
});

        父元素:必须是固有元素,可以直接父元素,也可以是间接父元素.
		       原则固有父元素范围越小越好.
		事件类型：跟事件属性和事件函数一一对应。
		子选择器：目标元素,跟父选择器构成一个父子选择器
		*不但能给固有元素添加事件，还能够给动态生成的元素添加事件。

    <div style="position: relative; top: 30px; left: 40px;">
      <div class="page-header">
         <h4>备注</h4>
      </div>
      <c:forEach items="${activityRemarkList}" var="activityRemark">
      <!-- 备注1 -->
      <div class="remarkDiv" style="height: 60px;">
         <img title="${activityRemark.createBy}" src="${APP_PATH}/image/user-thumbnail.png" style="width: 30px; height:30px;">
         <div style="position: relative; top: -40px; left: 40px;" >
            <h5>${activityRemark.noteContent}</h5>

            <font color="gray">市场活动</font> <font color="gray">-</font> <b>${activity.name}</b> <small style="color: gray;">${activityRemark.editFlag=='1'?activityRemark.editTime:activityRemark.createTime}由${activityRemark.editFlag=='1'?activityRemark.editBy:activityRemark.createBy}${activityRemark.editFlag=='1'?'修改':'创建'}</small>
            <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
               <a class="myHref" remarkId="${activityRemark.id}" href="javascript:void(0);"><span title="编辑" class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
               &nbsp;&nbsp;&nbsp;&nbsp;
               <a class="myHref" remarkId="${activityRemark.id}" href="javascript:void(0);"><span  title="删除" class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
            </div>
         </div>
      </div>
      </c:forEach>
      <%--<!-- 备注2 -->
      <div class="remarkDiv" style="height: 60px;">
         <img title="zhangsan" src="${APP_PATH}/image/user-thumbnail.png" style="width: 30px; height:30px;">
         <div style="position: relative; top: -40px; left: 40px;" >
            <h5>呵呵！</h5>
            <font color="gray">市场活动</font> <font color="gray">-</font> <b>发传单</b> <small style="color: gray;"> 2017-01-22 10:20:10 由zhangsan</small>
            <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
               <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
               &nbsp;&nbsp;&nbsp;&nbsp;
               <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
            </div>
         </div>
      </div>--%>
      
      <div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
         <form role="form" style="position: relative;top: 10px; left: 10px;">
            <textarea id="remark" class="form-control" style="width: 850px; resize : none;" rows="2"  placeholder="添加备注..."></textarea>
            <p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
               <button id="cancelBtn" type="button" class="btn btn-default">取消</button>
               <button id="saveCreateActivityRemarkBtn" type="button" class="btn btn-primary">保存</button>
            </p>
         </form>
      </div>
   </div>

eg1：普通的：

$(".remarkDiv").mouseover(function(){
   $(this).children("div").children("div").show();
});

eg2：升级的：

$("#reMarkDivList").on("mouseover",".remarkDiv",function () {
   $(this).children("div").children("div").show();
})

3.字符串

2,js中截取字符串：
str.substr(startIndex,length);//从下标为startIndex的字符开始截取，截取length个字符
str.substring(startIndex,endIndex)//从下标为startIndex的字符开始截取，截取到下标是endIndex的字符
var str=“beijing”;
str.substr(2,3);//iji
str.substring(2,3);//ij

4.使用标签保存数据

一般用于删除，修改获取id，id可以用hidden隐藏，可以设置“value”，或者自定义

1，使用标签保存数据，以便在需要的时候能够获取到这些数据:

给标签添加属性：
如果是表单组件标签，优先使用value属性，只有value不方便使用时，使用自定义属性;
如果不是表单组件标签，不推荐使用value，推荐使用自定义属性。

获取属性值时：
如果获取表单组件标签的value属性值：dom对象.value
jquery对象.val()
如果自定义的属性，不管是什么标签，只能用：jquery对象.attr(“属性名”);

5.把页面片段显示在动态显示在页面中：

选择器.html(htmlStr)：覆盖显示在标签的内部

选择器.text(htmlStr)：覆盖显示在标签的内部

选择器.append(htmlStr)：追加显示在指定标签的内部的后边

选择器.after(htmlStr)：追加显示在指定标签的外部的后边(找兄弟，用的少)

选择器.before(htmlStr)：追加显示在指定标签的外部的前边(找兄弟，一般找最后一个兄弟，***)

 选择器.append(htmlStr)：追加显示在指定标签的内部的后边 
	<div id="myDiv">
      aaaaaaaaa
      bbbbbbbbb
   </div>
   var htmlStr="<p>ccccccccc</p>";
    $("#myDiv").append(htmlStr);
    <div id="myDiv">
      aaaaaaaaa
      bbbbbbbbb
      <p>ccccccccc</p>
   </div>
  选择器.after(htmlStr)：追加显示在指定标签的外部的后边
   <div id="myDiv">
      aaaaaaaaa
      bbbbbbbbb
   </div>
   var htmlStr="<p>ccccccccc</p>";
    $("#myDiv").after(htmlStr);
    <div id="myDiv">
      aaaaaaaaa
      bbbbbbbbb
   </div>
   <p>ccccccccc</p>
   选择器.before(htmlStr)：追加显示在指定标签的外部的前边
   <div id="myDiv">
      aaaaaaaaa
      bbbbbbbbb
   </div>
   var htmlStr="<p>ccccccccc</p>";
    $("#myDiv").before(htmlStr);
    <p>ccccccccc</p>
    <div id="myDiv">
      aaaaaaaaa
      bbbbbbbbb
   </div>

6.给元素扩展属性

html页面是可扩展的标记语言，可以给指定的标签任意扩展属性，只要属性名符合标识符的命名规则即可。

指定的标签任意扩展属性获取是，使用arrt

两个目的：
1)使用标签保存数据：
如果是表单组件标签，优先使用value属性，只有value不方便使用时，使用自定义属性;
如果不是表单组件标签，不推荐使用value，推荐使用自定义属性。
2)定位标签：
优先考虑id属性,其次考虑name属性，只有id和name属性都不方便使用时，才考虑使用自定义属性。

eg：动态生成的

删除和修改需要设置表示，不能用id，因为id会重复，所以弄name

这样绑定时间，因为是动态的，需要用2.选择on来绑定

7.运行原理

jsp的运行原理：
xxx.jsp：1)、tocmat中运行：
把xxx.jsp翻译成一个servlet,
运行servlet,运行的结果是一个html网页
把html网页输出到浏览器
2)、html网页在浏览器上运行：
先从上到下加载html网页到浏览器，在加载过程中，运行前端代码
当页面都加载完成，再执行入口函数.