jQuery语法

最新推荐文章于 2024-02-02 14:47:08 发布

qq_42201815

最新推荐文章于 2024-02-02 14:47:08 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/qq_42201815/article/details/98753894

版权

1.基础选择器
(1)id选择器—>id=“mydiv”—> $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲mydiv"); (2)元素选\dots$ (“div”);
(3)类选择器 —>class=“myclass” ----> $(" . m y c l a s s "); (4) 选择所有元素 - - - > * - - - >$ ("*");
(5)组合选择器—>$("#mydiv,div, .myclass");

例:

<script type="text/javascript">
    
    var mydiv1=$("#mydiv1");
    console.log(mydiv1);

   var span=$("span");  //选择所有的span
    console.log(span);

    var claas=$(".blue");   //选择所有class=blue的元素
    console.log(claas);

    var all=$("*");   //匹配所有元素
    console.log(all);

    var list=$("#mydiv1,span,.blue")    //同时选中这几个选择器匹配的元素
    console.log(list);

</script>

2.操作元素内容

html()—> 获取元素的 html 内容
html(“html 内容”)—> 设定元素的 html 内容
text() —>获取元素的文本内容，不包含 html
text(“text 内容”)—> 设置元素的文本内容，不包含 html
val()—> 获取元素 value 值
val(‘值’)–> 设定元素的 value 值

例:

<body>
<h3><span>html()和 text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input id="oop" type="text" name="uname" value="oop" />


<script type="text/javascript"src="js/jquery-3.4.1.js"></script>
</body>

<script type="text/javascript">
   
    var ss=$("#html").html("hahaha");
   // console.log(ss);
    var s1=$("#html").html("<h4>Hello</h4>");
    console.log(s1);

    var hh=$("#text").text("哇哇哇哇");
    //console.log(hh);

    var s3=$("#html").text("<h4>Hello</h4>");
    console.log(s3);


</script>

3.创建与添加元素

创建元素:—> $(“元素内容”);

添加元素:
prepend(content) -->在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector)–>把 content 元素或内容加入 selector 元素开头
append(content) -->在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(c o n t e n t) . a p p e n d T o (s e l e c t o r) - - > 把 c o n t e n t 元素或内容插入 s e l e c t o r 元素内，默认是在尾部 b e f o r e () - - > 在元素前插入指定的元素或内容 :$ (selector).before(content)
after() -->在元素后插入指定的元素或内容:$(selector).after(content)

例:


<body>

<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>

<span class="red">男神</span>
<span class="blue">偶像</span>
<span class="pink">女神</span>
<span class="black">萌妹</span>
<div class="green">
    <span >小鲜肉</span>
</div>

</body>

<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

<script type="text/javascript">

    //在元素内部,开头添加元素
        var span ="<span>哈哈哈</span>";
        $(".green").prepend(span);      //选定元素的内部的开头插入

        var div=$(".green")     //div
        $(".red").prependTo(div);  //把男神加到div的前面


       //在元素内部后添加元素
       $(".green").append($("<span>哈哈</span>"));   //在span后添加一个哈哈
       $("<span>呵呵呵</span>").appendTo($(".green"));


    //同级元素添加
     $(".black").after("<span class='pink'>女汉子</span>");     //在萌妹后添加一个女汉子
     $(".red").before("<span class='blue'>御姐型</span>");      //在男神前添加一个御姐型


</script>

4.删除元素与遍历元素
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty() 清空所选元素的内容

例:

<body>

<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http 协议</span>
<span class="blue">servlet</span>

</body>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">

        //内容和标签都会清除
         var dele=$(".green").remove();
        console.log(dele);

       //清除元素里的内容,标签不会清除
         var empt=$(".blue").empty();
        console.log(empt);


    //遍历元素
    $("span").each(function(index,elemnet){
       console.log(index);
       console.log(elemnet);

        console.log(this);
        console.log($(this));
  });

        //得到h3的父元素
      var pa=$("h3").parent();
     console.log(pa);

    //得到body的子元素
     var chile=$("body").children();
     console.log(chile);


</script>

5.ready加载事件

 <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    
<script type="text/javascript">
        //第一种方式
        $(document).ready(function(){

            console.log($("#test"));
        });

        //2.第二种方式
             $(function(){

            console.log("Hello.....");

      });


    </script>

<body>
        <!--		
 	ready()加载事件
	ready()类似于 onLoad()事件
	ready()可以写多个，按顺序执行
	$(document).ready(function(){})等价于$(function(){})
	ready事件与onload事件的区别：
	ready事件会在文档的dom结构加载完毕后执行
	onload事件会在文档的dom结构及资源加载完毕后执行
		-->
<div id="test">Hello</div>


</body>

6.元素绑定事件
(1) bind()绑定元素事件

例:

<body>
  	<h3>bind()方简单的绑定事件</h3>
	<button id="btn1">按钮1</button>
	<button id="btn2">按钮2</button>
	<button id="btn3">按钮3</button>
	<button id="btn4">按钮4</button>
	<button id="btn5">按钮5</button>


     <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</body>

<script type="text/javascript">
        //元素的单个事件
    $("#btn1").bind("click",function(){

        console.log("单击事件");

    });

    //绑定多个事件

    $("#btn2").bind("click mouseover",function(){

        console.log("这是多个事件");

    })


    //链式绑定事件

    $("#btn3").bind("click",function(){

        console.log("这个是鼠标点击事件");
    }).bind("mouseout",function(){

        console.log("这个是鼠标移开事件")

    });


        // 直接绑定事件，多个事件对应多个函数
        $("#btn4").click(function(){

            console.log("鼠标点击事件");

        }).mouseover(function(){

            console.log("鼠标移动事件");

        });


        //键值对形式的绑定
    $("#btn5").bind({

        click:function(){

            console.log("鼠标点击事件");
        },

        mouseover:function(){

        console.log("鼠标移动事件");

        },

        mouseout:function(){

            setTimeout(function(){      //鼠标移开后5秒弹出弹框

                alert("七夕单身快乐!")

            },5000);


        }


    });

</script>

7.jQueryAjax

1. $. a j a x () j q u e r y 调用 a j a x 方法：格式：$ .ajax({});
参数：
type：请求方式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数

$.ajax({
	type:"GET",
	url:"js/data.json",
	data:{
		uname:"",
		upwd:""
	},
	
	dataType:"json",
	
	success:function(result){
		
	console.log(result);
		
	}
    });

2. $. g e t (),$ .post()

	1.请求 json 文件，忽略返回值
		$.get('../js/cuisine_area.json');
	2.请求 json 文件，传递参数，忽略返回值
		$.get('../js/cuisine_area.json',{name:"tom",age:100});
	3.请求 json 文件,拿到返回值,请求成功后可拿到返回值
		$.get('../js/cuisine_area.json',function(data){
			console.log(data)
		});
	4.请求 json 文件,传递参数,拿到返回值
		$.get('../js/cuisine_area.json',{name:"tom",age:100},function(data){
			console.log(data)
		});

例:

$.get("js/data.json",{},function(result){
	       console.log(result);
	});

	$.post("js/data.json",{},function(result){
	
	     console.log(result);
	});