jquery基础入门

Posted 2022-01-17 chenych

1、事件

$(selector).click(function):将函数绑定到被选元素的点击事件中
$(selector).dbclick(function);将函数绑定到被选元素的双击事件中
$(selector).focus(function)：将函数绑定到被选元素的获到焦点事件中
$(selector).mouseover(function)将函数绑定到被选的鼠标悬停事件中

2、语法

$(this).hide：隐藏当前元素
$(“p”).hide ：隐藏所有的段落
$(".test").hide ：隐藏所有class=“test’的元素
$("#test").hide：隐藏所有id=test的元素

3、toggle方法

JQuery中的toggle()方法，相当于点一个元素时，重复循环两个函数，而这两个函数可以作为toggle()函数的两个参数传进去，当第一次点击的时候会执行前面的参数，而第二次点击时执行的是后面的参数，第三次点击时又会重新执行第一个参数...这样循环执行两个函数。

$("#btn").toggle(function()
      //控制box隐藏
      $("#box").hide();
,function()
      //控制box显示
      $("#box").show();
);

jQuery1.9以上版本都删除了这个toggle时间,可以在js代码中加入以下代码,就可以正常使用toggle方法了.

$.fn.toggle = function( fn, fn2 ) 
    var args = arguments,guid = fn.guid || $.guid++,i=0,
    toggle = function( event ) 
      var lastToggle = ( $._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
      $._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
      event.preventDefault();
      return args[ lastToggle ].apply( this, arguments ) || false;
    ;
    toggle.guid = guid;
    while ( i < args.length ) 
      args[ i++ ].guid = guid;
    
    return this.click( toggle );

==待验证:toggle()内只设置时间时,默认是切换show()方法和hide()方法==

4 淡出淡入的效果

fadeIn()：淡入的效果
fadeOut()：淡出的效果
fadeToggle()：淡出淡入的效果
fadeTo()：设置为给定的不透明度

5 滑动效果

slideDown() 方法

用于向下滑动元素

语法:

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称

举例:

$("#flip").click(function()
  $("#panel").slideDown();
);

sildeUp()：

是向上拉,可参考slideDown()

sildeToggle()

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

举例:

$("#flip").click(function()
  $("#panel").slideToggle();
);

6 jquery dom的操作

jquery 提供一系列的与DOM相关的能力，这使访问和操作元素和属性变得很容易

1 获取内容

text() -设置或返回文本,所选的元素内容
html() -设置或返回所选内容（Html标记）
val() -设置或返回表单字段的值。
.attr(“属性”)- 显示的是属性的值

举例如下：

网站显示属性值

显示href的属性值 运行结果为：

2 css的使用方法

addclass: 向被选元素添加一个或多个类

removeclass: 从选中的元素中删除一个类或多个类

toggleClass(): 对被选中的元素进行添加和删除的切换的操作

$("button").click(function()
  $("h1,h2,p").toggleClass("blue");
);

3 祖先

.parent的方法的作用 ：对于返回元素的直接父亲元素，该方法只会向上一级对dom树进行遍历

.parents的方法的作用 ：parents是多余返回元素的所有的祖先的元素的搜索，他可以一路向上直到文档

4 后代

.chlidren()方法：返回被选元素的所有的直接的子元素，该方法只会向下一级对dom进行遍历

.find()方法：返回被选元素的后代元素，该方法会一直到最后一个子代

7 Ajax

ajax=异步的javascript和xml

简短的说：在不加载网页的情况下，ajax通过后台加载数据，并在网页上显示。

success:

? 请求成功后的回调函数

type:

? 请求方式 ("POST" 或 "GET")， 默认为 "GET"。

url:

? 默认值: 当前页地址。发送请求的地址。

data:

? 发送到服务器的数据。将自动转换为请求字符串格式.

$('#btnAdd').click(function()
    $.ajax(
        url: '/modal_add_student/',
        type: 'POST',
        data: 'name': $('#addName').val(), 'class_id': $('#addClassId').val(),
        success:function(arg)
            arg = JSON.parse(arg);
            if(arg.status)
                location.reload();
            else
                $('#addError').text(arg.message);
            
        
    )
)

注释:

json.parse()方法:

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

语法:

JSON.parse(text)   # text:必需， 一个有效的 JSON 字符串。

JSON 解析实例

例如我们从服务器接收了以下数据：

"name":"runoob", "alexa":10000, "site":"www.runoob.com"

我们使用 JSON.parse() 方法处理以上数据，将其转换为 JavaScript 对象：

var obj = JSON.parse(‘ "name":"runoob", "alexa":10000, "site":"www.runoob.com" ‘);

解析完成后，我们就可以在网页上使用 JSON 数据了：

实例

<p id="demo"></p>

<script>
var obj = JSON.parse(' "name":"runoob", "alexa":10000, "site":"www.runoob.com" ');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>