首页 前端知识 jquery的简单用法

jquery的简单用法

2024-05-06 09:05:34 前端知识 前端哥 54 400 我要收藏

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网页到浏览器,在加载过程中,运行前端代码
当页面都加载完成,再执行入口函数.

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7127.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!