初始jquery

导入jquery：

外部链接导入：

 <script src="http://libs.baidu.com/jqueryui/1.8.22/jquery-ui.min.js"></script>

 

下载jquery包

 
<script src="lib/jquery-3.6.1.js"></script>

 

jquery公式：公式：$(selector).action()

其中的选择器就是css中的各种选择器

 <a href="" id="test">touch me</a>
 ​
 ​
 ​
 <script>
     //选择器就是css的选择器
     $('#test').click(function (){
         alert('hello jquery')
     })
 </script>

 

jquery选择器

普通方法：

 <script>
 //标签
 document.getElementsByTagName()
 //id
 document.getElementById()
 //类
 document.getElementsByClassName()
 </script>

 

使用jquery选择器：

 
<script>
 //jquery()
 $('p').click()//标签选择器
 $('#p').click()//id选择器
 $('.class1').click()//class选择器
 </script>

 

事件

当触发特定事件时对某个选择器进行选择采取相应的函数措施：

例子：获取一块区域内的实时鼠标xy坐标

 
<body>
 <!--获取鼠标当前坐标-->
 mouse: <span id="mousemove"></span>
 <div id="divMove"></div>
 ​
 <script>
     //当网页元素加载完毕之后，响应事件
     $(function (){
         $('#divMove').mousemove(function (e){
             $('#mousemove').text('x:' +e.pageX +'y:'+e.pageY)
         })
     })
     $('.class1').mousedown()//按下
 ​
 </script>
 ​
 </body>
 <style>
     #divMove{
         width: 500px;
         height: 500px;
         border: 1px solid red;
     }
 </style>

 

jquery操作dom

设置一个列表

 <ul id="test-ul">
 ​
     <li class="js">jsjs</li>
     <li name="python">python</li>
 </ul>

 

获取并设置列表元素的值

 <script>
     $('#test-ul li[name=python]').text()//获得值
     //$('#test-ul li[name=python]').text('123123')//设置值
 </script>

 

修改css属性

 
<script>
 //css
 $('#test-ul li[name=python]').css('color','red')//修改css属性
 </script>

 

元素的显示和隐藏，本质上是display=none

 <script>
     //元素的显示和隐藏  本质display=none
     $('#test-ul li[name=python]').show()
     $('#test-ul li[name=python]').hide()
 </script>

 

版权声明：本文为GUGU原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/GUGUZIZI/p/16965577.html