Jquery

^

Jquery

Jquery

概述:jquery他是继prototype之后的优秀的js框架

Jquery使用

• 下载jQuery
  

       https://pan.baidu.com/s/1qvhOJlMBc7isQaPEumwwUA提取码:tl7e

• 引入jQuery

        把文件解压拷贝到js文件夹<script type="text/javascript" src="js/jquery-2.1.3.js"></script>

页面加载事件

<script type="text/javascript">
			
			//页面加载完之后 才执行内容 -- 最后执行，jquery写法先执行，都是在页面加载之后才执行
			window.onload = function(){
				alert(3);
				console.log(document.getElementById("myDiv"));
			}
	
			//完整写法
			$(document).ready(function(){
				alert(2);
				console.log($("#myDiv"));
			});
			
			//jquey写法 -- 也是页面加载完之后，才获取的内容 --推荐写法
			$(function(){
				alert(1);
				console.log($("#myDiv"));
			});
	
		</script>

21

 

1

<script type="text/javascript">

2

3

            //页面加载完之后 才执行内容 -- 最后执行，jquery写法先执行，都是在页面加载之后才执行

4

            window.onload = function(){

5

                alert(3);

6

                console.log(document.getElementById("myDiv"));

7

            }

8

9

            //完整写法

10

            $(document).ready(function(){

11

                alert(2);

12

                console.log($("#myDiv"));

13

            });

14

15

            //jquey写法 -- 也是页面加载完之后，才获取的内容 --推荐写法

16

            $(function(){

17

                alert(1);

18

                console.log($("#myDiv"));

19

            });

20

21

        </script>

DOM对象与jQuery对象转换

• dom转jQuery $(dom对象)
• jQuery转dom jquery对象[0] 取到dom元素

jQuery选择器

通过它可以找到页面上面对应标签

常用选择器

优先级 行内 > id > class> 标签

1.id选择器

$("#id")

2.class选择器

$(".className")

3.标签选择器

$(tagName)

4.*号选择器,每屌用

5.多元选择器,获取页面所有div和imput元素

console.log($("div,input"));
console.log($("#myDiv,input"));

2

 

1

console.log($("div,input"));

2

console.log($("#myDiv,input"));

6.父子选择器

jquery事件注册

jquery元素.click(function())
jquery元素.on('click',function(){})
		   off('click')//取消
jquery元素.bind('click',function(){})//
		   unbind//取消
//一般注册成功之后，很少去取消事件//取消绑定事件

 

1

jquery元素.click(function())

2

jquery元素.on('click',function(){})

3

           off('click')//取消

4

jquery元素.bind('click',function(){})//

5

           unbind//取消

6

//一般注册成功之后，很少去取消事件//取消绑定事件

来自为知笔记(Wiz)