jQuery笔记

1.选择器

css选择器用$("")包起来就成了jQuery选择器

	CSS选择器	jQuery选择器
ID选择器	#myID	$('#myID')
类选择器	.myclass	$('.myclass')
标签选择器	p	$('p')
层次选择器	div > strong	$('div>strong')
css称为伪类选择器 jQuery称之为过滤选择器	p:nth-child(1)	$('p:nth-child(1)')

 

 

 

 

 

注意一点：伪类选择器下标由1开始。

//

//

//

三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

$("#test1").text("Hello world!");

jQuery attr() 方法用于获取属性值

$("#id").attr('href')
$("#id").attr("href","http://www.baidu.com");

2.基础语法

$(selector).action()

 

3.事件

通用接口on。

$(document).ready() 方法允许我们在文档完全加载完后执行函数

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave	hover	blur	unload

 

实例：

$(document).ready(function(){
  $("p").on("click",function(){
    alert("段落被点击了。");
  });
});

 

4.ajax

[现在用axios替换ajax]

语法：

$.ajax({name:value, name:value, ... })

 实例：

 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $.ajax({
            type:"POST",
            url:"source.project.com",
            datatype:"json",
            data:{"msg":msg},
            async:true,
            success:function(result){
                $("div").html(result);
            },
               error:function(result){}
        });
    });
});
</script>        

　

5.axios

官方小栗子

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

　　

6.常用操作

增加元素

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("body").append("<p>这是一个段落</p>")
    });
</script>

 增加、删除class

$("#tableTable tr").removeClass("Myselected");
$(element).addClass("Myselected");