jquery基本语法使用

最新推荐文章于 2023-06-11 13:49:24 发布

NeilNiu

最新推荐文章于 2023-06-11 13:49:24 发布

阅读量368

点赞数

分类专栏： Springboot+Bootstrap 文章标签： jquery

本文链接：https://blog.csdn.net/qq_30353203/article/details/88385917

版权

Springboot+Bootstrap 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<script type="text/javascript" src="jquery-1.8.3.js" charset="UTF-8"></script>

第一步，引包

一、进入页面初始化执行，只要进入页面或者被引用都会被执行，这个不需要写函数名

<script type="text/javascript">
$(function () {
    alert（“你好 jquery”）

})
</script>

二、选择器，id选择器,用#号

姓名：<input type="text" value="id选择器" id="userName">

<script type="text/javascript">

$(function (){
        var userName=$("#userName").val();
        //alert代表一个弹出框
        console.info("姓名”+userName); //相当打印日志
    })
</script>

三、获取值是value上的值，和文本是两个标签内部的是文本例如 <div> 我是div的文本</div>

$("#id").val(); $("#id").text();

姓名：<input type="text" value="id选择器" id="userName">
<div id="div">
我是div的文本

</div>

<script type="text/javascript">

$(function (){
        var userName=$("#userName").val();
        //alert代表一个弹出框
        console.info("姓名”+userName); //相当打印日志

        var text=$("#div").text();
        console.info("div的文本"+text);

    })
</script>

四、设置值和文本$("#id").val("val"); $("#id").text("text");

姓名：<input type="text" value="id选择器" id="userName">
年龄：<input type="text" id="age">
<br/>------------------------------------------------------<br/>
获取文本:<div id="div">
我是div的文本
</div>

<br/>------------------------------------------------------<br/>

设置文本:<span id="span">   </span>
<br/>------------------------------------------------------<br/>

<script type="text/javascript">

$(function (){
        var userName=$("#userName").val(); //获取值的时候 val（）是空的
        $("#age").val(18); //设置值的时候val（）括号里面有值

        //alert代表一个弹出框
        console.info("姓名”+userName); //相当打印日志

        var text=$("#div").text();  //获取值的时候text（）是空的
        console.info("div的文本"+text);
         $("#span").text("我是动态设置的文本"); //设置文本的时候text（）括号里面有值
        

    })
</script>

五、隐藏和显示$("#id").hide(); $("#id").show();

姓名：<input type="text" value="id选择器" id="userName">
年龄：<input type="text" id="age">

<br/>----------------------------------------------------------<br/>
获取文本:<div id="div">
我是div的文本
</div>

<br/>---------------------------------------------------------<br/>

设置文本:<span id="span">  </span>

<br/>----------------------------------------------------------<br/>
<p>我是一个段落 </p>

<script type="text/javascript">

$(function (){
        var userName=$("#userName").val(); //获取值的时候 val（）是空的
        $("#age").val(18); //设置值的时候val（）括号里面有值

        //alert代表一个弹出框
        console.info("姓名”+userName); //相当打印日志

        var text=$("#div").text();  //获取值的时候text（）是空的
        console.info("div的文本"+text);
         $("#span").text("我是动态设置的文本"); //设置文本的时候text（）括号里面有值
        

        $("p").hide();  //此处用的是标签选择器，代表p标签的都隐藏掉，此处用前端打断点，方式验证

    })
</script>

六、追加元素尾部追加：$("#id").append("XXXX") $("#id").prepend("xxxxx");

姓名：<input type="text" value="id选择器" id="userName">
年龄：<input type="text" id="age">

<br/>----------------------------------------------------------<br/>
获取文本:<div id="div">
我是div的文本
</div>

<br/>---------------------------------------------------------<br/>

设置文本:<span id="span">  </span>

<br/>----------------------------------------------------------<br/>
<p>我是一个段落 </p>

<br/>----------------------------------------------------------<br/>

动态追加元素:
<div id="div2">   

</div>

语言选择框：
<select id="select" style="width:300px">
</select >

<script type="text/javascript">

$(function (){
        var userName=$("#userName").val(); //获取值的时候 val（）是空的
        $("#age").val(18); //设置值的时候val（）括号里面有值

        //alert代表一个弹出框
        console.info("姓名”+userName); //相当打印日志

        var text=$("#div").text();  //获取值的时候text（）是空的
        console.info("div的文本"+text);
         $("#span").text("我是动态设置的文本"); //设置文本的时候text（）括号里面有值
        

        $("p").hide();  //此处用的是标签选择器，代表p标签的都隐藏掉，此处用前端打断点，方式验证

        $("#div2").append("<h5>我是动态追加进来的标签</h5>");   //这里面可以放汉字也可以放签 
                                                              //此处用前端打断点，方式验证

        $("#select").append("<option value="java">java</option><option 
                             value="python">python</option>");  //动态的增加元素在选择框中
 })
</script>

七、删除元素/内容

$("#div1").remove();一般少用

$("#div1").empty();

姓名：<input type="text" value="id选择器" id="userName">
年龄：<input type="text" id="age">

<br/>----------------------------------------------------------<br/>
获取文本:<div id="div">
我是div的文本
</div>

<br/>---------------------------------------------------------<br/>

设置文本:<span id="span">  </span>

<br/>----------------------------------------------------------<br/>
<p>我是一个段落 </p>

<br/>----------------------------------------------------------<br/>

动态追加元素:
<div id="div2">   

</div>

语言选择框：
<select id="select" style="width:300px">
</select >

<script type="text/javascript">

$(function (){
        var userName=$("#userName").val(); //获取值的时候 val（）是空的
        $("#age").val(18); //设置值的时候val（）括号里面有值

        //alert代表一个弹出框
        console.info("姓名”+userName); //相当打印日志

        var text=$("#div").text();  //获取值的时候text（）是空的
        console.info("div的文本"+text);
         $("#span").text("我是动态设置的文本"); //设置文本的时候text（）括号里面有值
        

        $("p").hide();  //此处用的是标签选择器，代表p标签的都隐藏掉，此处用前端打断点，方式验证

        $("#div2").append("<h5>我是动态追加进来的标签</h5>");   //这里面可以放汉字也可以放签 
                                                              //此处用前端打断点，方式验证

        $("#select").append("<option value="java">java</option><option 
                             value="python">python</option>");  //动态的增加元素在选择框中

        $("#div2").empty(); //这句代表 div2下的 标签内容全部清除掉

 })
</script>

八、按钮上添加绑定js， οnclick= 方法名，当点击按钮的时候就会调用这个方法

姓名：<input type="text" value="id选择器" id="userName">
年龄：<input type="text" id="age">

<br/>----------------------------------------------------------<br/>
获取文本:<div id="div">
我是div的文本
</div>

<br/>---------------------------------------------------------<br/>

设置文本:<span id="span">  </span>

<br/>----------------------------------------------------------<br/>
<p>我是一个段落 </p>

<br/>----------------------------------------------------------<br/>

动态追加元素:
<div id="div2">   

</div>

语言选择框：
<select id="select" style="width:300px">
</select >

<input type="button" value="按钮" onclick="l()">  //绑定l的这个方法，当点击这个按钮就会调用方法l


<script type="text/javascript">

functionl(){
    $("#div").hide()
}


$(function (){

        var userName=$("#userName").val(); //获取值的时候 val（）是空的
        $("#age").val(18); //设置值的时候val（）括号里面有值

        //alert代表一个弹出框
        console.info("姓名”+userName); //相当打印日志

        var text=$("#div").text();  //获取值的时候text（）是空的
        console.info("div的文本"+text);
         $("#span").text("我是动态设置的文本"); //设置文本的时候text（）括号里面有值
        

        $("p").hide();  //此处用的是标签选择器，代表p标签的都隐藏掉，此处用前端打断点，方式验证

        $("#div2").append("<h5>我是动态追加进来的标签</h5>");   //这里面可以放汉字也可以放签 
                                                              //此处用前端打断点，方式验证

        $("#select").append("<option value="java">java</option><option 
                             value="python">python</option>");  //动态的增加元素在选择框中

        $("#div2").empty(); //这句代表 div2下的 标签内容全部清除掉

 })
</script>

九、undefined

用null判断不行

if（typeof（name））==“undefined”）

十、javascript对象

var obj=user{}; 对象相当java里面的new object

var array=[]; 数组

姓名：<input type="text" value="id选择器" id="userName">
年龄：<input type="text" id="age">

<br/>----------------------------------------------------------<br/>
获取文本:<div id="div">
我是div的文本
</div>

<br/>---------------------------------------------------------<br/>

设置文本:<span id="span">  </span>

<br/>----------------------------------------------------------<br/>
<p>我是一个段落 </p>

<br/>----------------------------------------------------------<br/>

动态追加元素:
<div id="div2">   

</div>

语言选择框：
<select id="select" style="width:300px">
</select >

<input type="button" value="按钮" onclick="l()">  //绑定l的这个方法，当点击这个按钮就会调用方法l


<script type="text/javascript">

functionl(){
    $("#div").hide()
}


$(function (){
        
        var user={}; //相当于  User user = new User();
        user.name="xiaowang";
        user.age=18;
        console.info(user);
        
        var array=[];
        array[0]="xiaoli";
        array[1]="xiaozhang";
        console.info(array);
            
        var userName=$("#userName").val(); //获取值的时候 val（）是空的
        $("#age").val(18); //设置值的时候val（）括号里面有值

        //alert代表一个弹出框
        console.info("姓名”+userName); //相当打印日志

        var text=$("#div").text();  //获取值的时候text（）是空的
        console.info("div的文本"+text);
         $("#span").text("我是动态设置的文本"); //设置文本的时候text（）括号里面有值
        

        $("p").hide();  //此处用的是标签选择器，代表p标签的都隐藏掉，此处用前端打断点，方式验证

        $("#div2").append("<h5>我是动态追加进来的标签</h5>");   //这里面可以放汉字也可以放签 
                                                              //此处用前端打断点，方式验证

        $("#select").append("<option value="java">java</option><option 
                             value="python">python</option>");  //动态的增加元素在选择框中

        $("#div2").empty(); //这句代表 div2下的 标签内容全部清除掉

 })
</script>

十一、对象转json,序列化

var jsonStr=JSON.stringify(user);
console.info(jsonStr);

json转对象

var user2=JSON.parse(jsonStr);
console.info(user2);

姓名：<input type="text" value="id选择器" id="userName">
年龄：<input type="text" id="age">

<br/>----------------------------------------------------------<br/>
获取文本:<div id="div">
我是div的文本
</div>

<br/>---------------------------------------------------------<br/>

设置文本:<span id="span">  </span>

<br/>----------------------------------------------------------<br/>
<p>我是一个段落 </p>

<br/>----------------------------------------------------------<br/>

动态追加元素:
<div id="div2">   

</div>

语言选择框：
<select id="select" style="width:300px">
</select >

<input type="button" value="按钮" onclick="l()">  //绑定l的这个方法，当点击这个按钮就会调用方法l


<script type="text/javascript">

functionl(){
    $("#div").hide()
}


$(function (){
        
        var user={}; //相当于  User user = new User();
        user.name="xiaowang";
        user.age=18;
        console.info(user);
        
        var jsonStr=JSON.stringify(user);
        console.info(jsonStr);
        
        var array=[];
        array[0]="xiaoli";
        array[1]="xiaozhang";
        console.info(array);
        
        
            
        var userName=$("#userName").val(); //获取值的时候 val（）是空的
        $("#age").val(18); //设置值的时候val（）括号里面有值

        //alert代表一个弹出框
        console.info("姓名”+userName); //相当打印日志

        var text=$("#div").text();  //获取值的时候text（）是空的
        console.info("div的文本"+text);
         $("#span").text("我是动态设置的文本"); //设置文本的时候text（）括号里面有值
        

        $("p").hide();  //此处用的是标签选择器，代表p标签的都隐藏掉，此处用前端打断点，方式验证

        $("#div2").append("<h5>我是动态追加进来的标签</h5>");   //这里面可以放汉字也可以放签 
                                                              //此处用前端打断点，方式验证

        $("#select").append("<option value="java">java</option><option 
                             value="python">python</option>");  //动态的增加元素在选择框中

        $("#div2").empty(); //这句代表 div2下的 标签内容全部清除掉

 })
</script>

十二、json字符串转对象

var jsonStr=JSON.stringify(user);
console.info(jsonStr);

json转对象

var user2=JSON.parse(jsonStr);
console.info(user2);

姓名：<input type="text" value="id选择器" id="userName">
年龄：<input type="text" id="age">

<br/>----------------------------------------------------------<br/>
获取文本:<div id="div">
我是div的文本
</div>

<br/>---------------------------------------------------------<br/>

设置文本:<span id="span">  </span>

<br/>----------------------------------------------------------<br/>
<p>我是一个段落 </p>

<br/>----------------------------------------------------------<br/>

动态追加元素:
<div id="div2">   

</div>

语言选择框：
<select id="select" style="width:300px">
</select >

<input type="button" value="按钮" onclick="l()">  //绑定l的这个方法，当点击这个按钮就会调用方法l


<script type="text/javascript">

functionl(){
    $("#div").hide()
}


$(function (){
        
        var user={}; //相当于  User user = new User();
        user.name="xiaowang";
        user.age=18;
        console.info(user);
        
        var jsonStr=JSON.stringify(user);
        console.info(jsonStr);

        var user2=JSON.parse(jsonStr);
        console.info(user2);

        
        var array=[];
        array[0]="xiaoli";
        array[1]="xiaozhang";
        console.info(array);
        
        var arrayStr=JSON.stringify(array);
        console.info(arrayStr);
        
        var array2=JSON.parse(arrayStr);
        console.info(array2);
            

        var userName=$("#userName").val(); //获取值的时候 val（）是空的
        $("#age").val(18); //设置值的时候val（）括号里面有值

        //alert代表一个弹出框
        console.info("姓名”+userName); //相当打印日志

        var text=$("#div").text();  //获取值的时候text（）是空的
        console.info("div的文本"+text);
         $("#span").text("我是动态设置的文本"); //设置文本的时候text（）括号里面有值
        

        $("p").hide();  //此处用的是标签选择器，代表p标签的都隐藏掉，此处用前端打断点，方式验证

        $("#div2").append("<h5>我是动态追加进来的标签</h5>");   //这里面可以放汉字也可以放签 
                                                              //此处用前端打断点，方式验证

        $("#select").append("<option value="java">java</option><option 
                             value="python">python</option>");  //动态的增加元素在选择框中

        $("#div2").empty(); //这句代表 div2下的 标签内容全部清除掉

 })
</script>

十三、标签元素遍历 function 是一个回调方法

$("span").each(function(index,element){
console.info($(element).text());

})

<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js" charset="UTF-8"</script>


    <span>span1</span>
    <span>span2</span>
    <span>span3</span>

$(function(){
    $("span").each(function(index,element){
          console.info($(element).text());

    })
   
})

十四、javascript数组遍历

<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js" charset="UTF-8"</script>



$(function(){
 
     nameArray={"java","python","php"}
      //第一种方式
     for(var i=0;i<nameArray.length;i++){
        console.info(nameArray[i]);
    
        }
     //第二种方式  
    nameArray.forEach(function(value,index){
     console.info(value);
    
    });
    
})

十五、ajax请求-异步请求

同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示，而异步则这个AJAX代码运行中的时候其他代码一样可以运行。相当于多线程的概念，点击按钮，绑定方法，执行那个方法，然后用ajax请求，到后端，后端处理，返回数据给 ajax，写到表格里
语法:

<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js" charset="UTF- 8"></script>


<input type="button" value="获取接口" onclick="getInterfaceTest()">

<script type="text/javascript">

function getInterfaceTest() {
        var interfaceUrl="/interfaceTest/selectForPage";
        $.ajax({
            url:interfaceUrl,
            dataType:"json",
            type:"get",
            data:{
                pageNum:0,
                pageSize:10
                //回调函数 success
            },success:function (result) {
                var total=result.total;
                var rows =result.rows;
                rows.forEach(function (value) {
                    var interfaceName=value.interfaceName;
                    var interfaceAliasName=value.interfaceAliasName;
                    var methodName=value.interfaceMethod;
                    var tr="<tr><td>"+interfaceAliasName+"</td><td>"+interfaceName+"</td>        
                       <td>"+methodName+"</td></tr>";
                    $("#interfaceBody").append(tr);
                });
                     console.info(result);
                //回调函数  error
        },error:function (error) {
                console.info(error.responseText);
                console.info(error.status);
        }

        })
    }


</script>

十六、获取checkbox选中的值，遍历checkbox标签，获取选中的值,,设置checkbox选中

<input type="button" value="获取选中的box" onclick="getCheck()">
<input type="button" value="设置选中的box" onclick="setCheck('python')">

<input type="checkbox" name="codeType" value="java">java
<input type="checkbox" name="codeType" value="python">python
<input type="checkbox" name="codeType" value="javascript">javascript

<script type="text/javascript">
     //获取checkbox选中的值，遍历checkbox标签，获取选中的值
    function getCheck() {
        $("input[name='codeType']").each(function (index,element) {
            if($(element).is(":checked")){
                console.info("选中的值"+$(element).val());
            }
        });
    }
    //设置checkbox选中
    function setCheck(value) {
        //jquery的表达式
        $('[name=codeType][value='+value+'').prop({checked:true});
    }


</script>

十七、定时刷新setTimeout

<script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js" charset="UTF- 8"></script>


<input type="button" value="启动定时任务" onclick="addTimeTask()">
<input type="button" value="取消定时任务" onclick="cancelTimeTask()">

<script type="text/javascript">

 function consoleValue() {
        console.info("定时任务输出");
    }
    var cancelTask=true;
    function addTimeTask() {
        consoleValue();
        if(cancelTask){
            setTimeout("addTimeTask()",3000);
        }
        cancelTask=true
    }
    function cancelTimeTask() {
        cancelTask=false;
    }

</script>

NeilNiu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery基本语法使用

<script type="text/javascript" src="jquery-1.8.3.js" charset="UTF-8"></script>第一步，引包一、进入页面初始化执行，只要进入页面或者被引用都会被执行，这个不需要写函数名<script type="text/javascript">$(function () { ...
复制链接

扫一扫