前端学习笔记4-jQuery语法基础

最新推荐文章于 2022-10-15 19:00:19 发布

陈弟弟

最新推荐文章于 2022-10-15 19:00:19 发布

阅读量230

点赞数

分类专栏：前端学习文章标签： jquery js javascript html

本文链接：https://blog.csdn.net/weixin_41446786/article/details/107400116

版权

前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. jQuery的引入

<script src="js/jquery-1.12.4.min.js"></script>

2. jQuery的入口函数

js获取标签元素，需要页面加载完成以后再获取，通过onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

// 完整写法
  $(document).ready(function(){
       ...
  });

  // 简化写法
  $(function(){
       ...
  });

3、jQuery选择器

（1）如何获取标签对象
1）标签选择器

//  1. 获取标签对象
 var $p = $("p");
//  2. 通过jquery设置标签的样式
$p.css({"color": "red"});

2）类选择器

var $div = $(".div1");

3）id选择器

 var $div1 = $("#box1");

4）层级选择器

var h1 = $("div h1");

5）属性选择器

 var $input = $("input[type=text]");

完整代码：

<script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            //  1. 获取标签对象
            var $p = $("p");
            // alert($p.length);
            //  2. 通过jquery设置标签的样式
            //  2.1 标签选择器
            $p.css({"color": "red"});
            //  2.2 类选择器    
            var $div = $(".div1");
            // alert($div.length);
            //  2.3 id选择器
            var $div1 = $("#box1");
            // alert($div1.length);
            //  2.4 层级选择器
            var h1 = $("div h1");
            // alert(h1.length);
            //  2.5 属性选择器，先根据标签选择html标签，然后再根据属性值进行过滤标签
            var $input = $("input[type=text]");
            alert($input.length)
            //  结论： jquery选择器获取标签，和css选择器匹配标签的方式一样
        });
    </script>
     <p>hello</p>
    <p>hello</p>
    <div class="div1">哈哈</div>

    <div id="box1">嘻嘻</div>

    <div>
        <h1>哈哈</h1>
    </div>

    <input type="text">
    <input type="button">

（2）选择集过滤：选择标签的集合里面过滤自己需要的标签

1）has(选择器名称)方法，表示选取包含指定选择器的标签

  $divs.has(".pname").css({"background":"red"});

2）eq(索引)方法，表示选取指定索引的标签

 $divs.eq(1).css({"background":"blue"});

完整代码：

  <script src="js/jquery-1.12.4.min.js"></script>

    <script>
        $(function(){
            //  通过jquery选择器获取html的标签
            var $divs = $("div");
            //  获取包含有指定选择器的父标签
            $divs.has(".pname").css({"background":"red"});
            //  根据下标选择指定的标签
            $divs.eq(1).css({"background":"blue"});

            //  选择集过滤就是在选中的集合标签里面，根据需要过滤出来自己想要的标签
        });
    </script>
    <div>
        <p class="pname">哈哈</p>
    </div>
    <div>
        <input type="button" value="按钮">
    </div>

（3）选择集转移：指定一个标签作为参照物，选择获取它的周围的标签

$(’#box’).prev(); 表示选择id是box元素的上一个的同级元素
$(’#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
$(’#box’).next(); 表示选择id是box元素的下一个的同级元素
$(’#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
$(’#box’).parent(); 表示选择id是box元素的父元素
$(’#box’).children(); 表示选择id是box元素的所有子元素
$(’#box’).siblings(); 表示选择id是box元素的其它同级元素
$(’#box’).find(’.myClass’); 表示选择id是box元素的class等于myClass的元素

<script>
    $(function(){
        var $div = $('#div01');

        $div.prev().css({'color':'red'});
        $div.prevAll().css({'text-indent':50});
        $div.next().css({'color':'blue'});
        $div.nextAll().css({'text-indent':80});
        $div.siblings().css({'text-decoration':'underline'})
        $div.parent().css({'background':'gray'});
        $div.children().css({'color':'red'});
        $div.find('.sp02').css({'font-size':30});
    });  
</script>

<div>
    <h2>这是第一个h2标签</h2>
    <p>这是第一个段落</p>
    <div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div>
    <h2>这是第二个h2标签</h2>
    <p>这是第二个段落</p>
</div>

4、获取和设置元素内容html方法

步骤：

获取标签：var $标签对象 = $(获取标签)
获取标签内容： $标签对象.html()
设置标签内容
1）清除之前的标签内容：$标签对象.html(新标签内容)
2）保留之前的标签内容，追加内容：$标签对象.append(追加标签内容)

<script>
    $(function(){
	 	// 获取标签
        var $div = $("#div1");
        //  获取标签的html内容
        var result = $div.html();
        alert(result);
        //  设置标签的html内容，之前的内容会清除
        $div.html("<span style='color:red'>你好</span>");
        //  追加html内容
        $div.append("<span style='color:red'>你好</span>");

    });
</script>


<div id="div1">
    <p>hello</p>
</div>

5、获取和设置元素属性的元素

（1）css方法设置标签样式属性
步骤：

获取标签：var $标签对象 = $(获取标签)
获取样式属性：$标签对象("样式属性")
设置样式属性：$标签对象.css({"样式属性1":"样式1","样式属性2":"样式2"})

（2）prop方法设置标签的其它属性
步骤：

获取标签：var $标签对象 = $(获取标签)
获取属性：$标签对象("属性")
设置属性：$标签对象.prop({"属性1":"属性值1","属性2":"属性值2"})

 <style>
    .a01{
        color:red;
    }
</style>

<script>
    $(function(){
        var $a = $("#link01");
        var $input = $('#input01')

        // 获取元素属性
        var sId = $a.prop("id");
        alert(sId);

        // 设置元素属性
        $a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});

        //  获取value属性
        // var sValue = $input.prop("value");
        // alert(sValue);

        // 获取value属性使用val()方法的简写方式
        var sValue = $input.val();
        alert(sValue);
        // 设置value值
        $input.val("222222");
    })
</script>

<a id="link01">这是一个链接</a>
<input type="text" id="input01" value="111111">

6、jQuery常用事件

说明:

this指的是当前发生事件的对象，但是它是一个原生js对象
$(this) 指的是当前发生事件的jquery对象

（1）click() 鼠标单击
获取标签：var $标签对象 = $(获取标签)
添加事件：

$标签对象.click(function){
	$(this).事件变化
}

例：

<script>
    $(function(){
    1.获取标签
     var $lis = $("ul li");
     2.添加点击事件
     $lis.click(function(){
            //  获取当前点击的标签对象
            //  原生js的写法
            // this.style.color = 'red';
            //  jquery的写法
            $(this).css({"color":"red"});
            //  获取点击标签的索引
            alert($(this).index())
        });
 </script>
 <div>
    <ul>
        <li>苹果</li>
        <li>鸭梨</li>
        <li>香蕉</li>
    </ul>
</div>

（2）focus() 元素获得焦点（一般配合按钮）
获取标签：var $标签对象 = $(获取标签)
添加事件：

$标签对象.focus() (function){
	$(this).事件变化
}

（3）blur() 元素失去焦点
获取标签：var $标签对象 = $(获取标签)
添加事件：

$标签对象.blur(function){
	$(this).事件变化
}

（4）mouseover() 鼠标进入（进入子元素也触发）
获取标签：var $标签对象 = $(获取标签)
添加事件：

$标签对象.mouseover() (function){
	$(this).事件变化
}

（5）mouseout() 鼠标离开（离开子元素也触发）
获取标签：var $标签对象 = $(获取标签)
添加事件：

$标签对象.mouseout() (function){
	$(this).事件变化
}

（6）ready() DOM加载完成
获取标签：var $标签对象 = $(获取标签)
添加事件：

$标签对象.ready() (function){
	$(this).事件变化
}

实例：

 <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        //  等页面加载完成以后获取标签元素
        // $(document).ready(function(){

        // });

        $(function(){
            //  获取ul里面的所有li标签
            var $lis = $("ul li");
            //  获取button标签
            var $btn = $("#btn1");
            //  获取text标签
            var $text = $("#txt1");
            //  获取div标签
            var $div = $("div");
            //  添加点击事件
            $lis.click(function(){
                //  获取当前点击的标签对象
                //  原生js的写法
                // this.style.color = 'red';
                //  jquery的写法
                $(this).css({"color":"red"});
                //  获取点击标签的索引
                alert($(this).index())
            });

            $btn.click(function(){
                //  获取文本框的内容
                alert($text.val());
            });

            //  给text文本框添加获取焦点事件
            $text.focus(function(){
                //  获取得到焦点的文本框，然后设置样式属性
                $(this).css({"background":"red"});
            });

            //  给text文本框添加失去焦点事件
            $text.blur(function(){
                $(this).css({"background":"white"});
            })
            //  给div设置鼠标悬停(进入)事件
            $div.mouseover(function(){
                $(this).css({"background":"green"});
            });
            //  给div设置鼠标离开事件
            $div.mouseout(function(){
                $(this).css({"background":"white"});
            })
        });
    </script>

    <div>
        <ul>
            <li>苹果</li>
            <li>鸭梨</li>
            <li>香蕉</li>
        </ul>
        <input type="text" id="txt1">
        <input type="button" id="btn1" value="你点我">
    </div>

6、事件代理delegate方法

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

delegate(childSelector,event,function)
delegate(子元素的选择器（多个选择器，使用逗号隔开）,事件名称,事件处罚执行的函数)

// 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作
        <script>  
           var $ul = $("div ul");

            $ul.delegate("li", "click", function(){

                $(this).css({"color": "red"});
            });
        </script>
        
        <div>
        <ul>
            <li>哈哈</li>
            <li>嘻嘻</li>
            <li>美滋滋</li>
            <li>啦啦</li>
        </ul>
    </div>

7、创建自定义javascript对象有两种方式:

- 通过顶级Object类型来实例化一个对象
（1）创建空对象：var 对象名 = new Object();
（2）添加属性：对象名.属性 = 属性值;
（3）添加方法：对象名.方法 = function(){ };
（4）调用属性或方法：对象名.属性/方法;
实例：

<script>
    var person = new Object();

    // 添加属性：
    person.name = 'tom';
    person.age = '25';

    // 添加方法：
    person.sayName = function(){
        alert(this.name);
    }

    // 调用属性和方法：
    alert(person.age);
    person.sayName();
</script>

- 通过对象字面量创建一个对象
（1）创建对象：

 var 对象名 = {
	属性：属性值
	方法：function(){ };
}

（2）调用属性或方法：对象名.属性/方法;
实例：

<script>
    var person2 = {
        name:'Rose',
        age: 18,
        sayName:function(){
            alert('My name is' + this.name);
        }
    }

    // 调用属性和方法：
    alert(person2.age);
    person2.sayName();
</script>

8、json：一种数据格式，类似于javascript对象的字符串

（1）数据格式：
1）对象格式：最外层的表现形式是一对大括号，key名和字符串数据都要使用双引号

创建一个json数据：var json对象名 ='{"属性1":"属性值1","属性2":"属性值2"}'
把json数据转成JavaScript对象：var 对象 = JSON.parse(json对象名)
获取属性数据：对象.属性

  <script>
		//  对象格式的json数据
         var sJson1 = '{"name":"李四", "age":20}';
         //  把json数据转成JavaScript对象
         var oPerson = JSON.parse(sJson1);
         //  获取属性数据
         console.log(oPerson.name + oPerson.age);
 </script>

2）数组格式：最外层的表现形式是一对中括号，每项数据之间使用逗号进行分隔

创建一个json数据：var json对象名 ='{"属性1":"属性值1","属性2":"属性值2"}'
把json数据转成数组格式：var 数组名 = JSON.parse(json对象名)
获取属性数据：
通过下标获取指定js对象
var 对象 = 数组名[属性下标];
通过js对象获取name属性
对象.属性

 <script>
   	//  对象格式的json数据
        var sJson2 = '[{"name":"李四", "age":20}, {"name":"李三", "age":21}]';
        //  把json数据转成数组格式
       var aArray = JSON.parse(sJson2);
        //  通过下标获取指定js对象，然后通过js对象获取name属性
         var oPerson = aArray[1];
        console.log(oPerson.name);
</script>

9、ajax：前后台配合技术

ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让
javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax
最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

ajax的使用：jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。
ajax方法的参数说明:

url 请求地址
type 请求方式，默认是’GET’，常用的还有’POST’
dataType 设置返回的数据格式，常用的是’json’格式
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步，默认值是’true’，表示异步，一般不用写

同步和异步说明
1）同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
2）异步是多个ajax同时请求，不需要等待其它ajax请求完成，好比线程异步。

<script>
        //  向web服务器发送ajax请求，本质上是一个http协议的请求
         $.ajax({
             //  请求的资源地址, 不指定ip地址和端口号表示请求的是自己的服务器资源数据
             url: "data.json",
             //  请求方式: GET,POST
             type: "GET",
             //  指定对服务器数据的解析格式
             dataType: "JSON",
             //  data: 表示发送给web服务器的参数
             data:{"name":"ls"},
             //  请求成功执行的函数
             success:function(data){
                 console.log(data.name);
                 //  数据请求回来以后可以绑定给html中的某个标签控件，实现局部刷新
             },
             //  请求失败执行的函数
             error:function(){
                 alert("网络异常");
             },
             //  是否使用异步，默认不指定表示是异步请求
             async: true
         });
 </script>

ajax的简写方式:$.ajax按照请求方式可以简写成$.get或者$.post方式
1）$.get(url,data,success(data, status, xhr),dataType).error(func)
2）$.post(url,data,success(data, status, xhr),dataType).error(func)

get和$.post方法的参数说明：

url 请求地址
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
data 请求的结果数据
status 请求的状态信息, 比如: “success”
xhr 底层发送http请求XMLHttpRequest对象
dataType 设置返回的数据格式
“xml”
“html”
“text”
“json”
error 表示错误异常处理
func 错误异常回调函数

 <script>
		//  发送get方式的ajax请求的简写方式
        //  1. 请求的地址
        //  2. 请求传给web服务器的参数
        //  3. 请求成功的回调函数
        //  4. 返回数据的解析方式
        //  5. error 失败执行的回调函数
         $.get("data.json",{"name":"ls"},function(data){
             //  如果按照json格式进行数据，js这块能得到一个JavaScript
             alert(data.name);
         }, "JSON").error(function(){
             alert("网络异常，请求失败");
         });
</script>

 <script>
		 $.post("data.json",{"name":"ls"},function(data){
            //  如果按照json格式进行数据，js这块能得到一个JavaScript
            alert(data.name);
        }, "JSON").error(function(){
            alert("网络异常，请求失败");
</script>

陈弟弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记4-jQuery语法基础

1. jQuery的引入<script src="js/jquery-1.12.4.min.js"></script>2. jQuery的入口函数js获取标签元素，需要页面加载完成以后再获取，通过onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。// 完整写法 $(document).ready(function(){ ...
复制链接

扫一扫