jq学习笔记

2022-08-21  本文已影响0人  背着梦的幸存者

jq2.0以上的版本不兼容IE8及已下的版本的浏览器

jq的使用

<script src="./jquery-3.6.0.min.js"></script>
    <script>
        //入口
        $(document).ready(function(){})
        //入口简写
        $(function(){})
    </script>

ready和onload事件的区别

特点

jquery dom对象

全局对象

jq选择器

1.基本选择器

2.层级选择器

3.筛选选择器

4.内容选择器

5.可见性选择器

6.属性选择器

7.子元素选择器

8.表单选择器

9.表单对象选择器

10.混淆选择器

jq属性操作

1.属性

2.css类

3.html代码/文本/值

jq样式操作

1.css操作

console.log($('#box').css('border'));
$('#box').css('width','500px');
$('#box').css({
                'width':'400px',
                'height':'100px'
            });

2.位置

console.log($('.box').offset());
$('.box').offset({left:100,top:100})

3.尺寸

jq筛选操作

1.过滤操作

2.查找

3.串联

4.jq dom对象操作

jq dom操作

1.创建元素

2.内部插入

$("p").append("<b>Hello</b>");

$("p").appendTo("div");

3.外部插入

$("p").after("<b>Hello</b>");

$("p").before("<b>Hello</b>");

4.包裹

5.替换

6.删除

7.克隆

jq事件

1.事件绑定

2.解除事件绑定

3.事件委派

4.控制事件触发

$('#btn').trigger('click')

区别:

  1. trigger 返回的jqdom对象,所以可以连贯操作;
  2. triggerHandler 无法触发元素自带的事件 如focus,blur等
  3. trigger会触发集合中所有元素的事件,triggerHandler只会触发集合中的第一个元素

5.事件列表

6.事件对象

jq动画

1.基本效果

2.滑动效果

3.淡入淡出效果

4.自定义动画


$('#box').animate({
    width:'200px',
    padding: '5px',
    'border-radius':'20px'
},3000)

$('#box').animate({
    width:'toggle',
    padding: 'toggle',
    'border-radius':'toggle'
},1000)

5.动画设置

6.动画队列

7.jq动画于css动画

jq ajax

1.快速请求方法

$.get("test.cgi", { name: "John", time: "2pm" },
          function(data){
          alert("Data Loaded: " + data);
});

$.post("test.php", { "func": "getNameAndTime" },
          function(data){
          alert(data.name); // John
          console.log(data.time); //  2pm
          }, "json");

2.ajax方法

$.ajax({
        type: "get",        // 请求方式
        url: "js/data.txt", // 请求路径
        dataType: "json",   // 预期返回一个 json 类型数据
        success: function (data) {   // data是形参名，代表返回的数据
            console.log(data);
        }
    });
————————————————
$.ajax({
        url:"ajaxServlet1111" , // 请求路径
        type:"POST" , //请求方式
        //data: "username=jack&age=23",//请求数
        data:{"username":"jack","age":23},
        
        success:function (data) {
            alert(data);
        },//响应成功后的回调函数
        error:function () {
            alert("出错啦...")
        },//表示如果请求响应出现错误，会执行的回调函数
        dataType:"text"//设置接受到的响应数据的格式
        });
————————————————

3.表单方法

jq 工具方法

1.数组对象方法

2.函数方法

3.类型判断

4.字符串

5.版本

jq 插件

1.jq插件的网址

2.经典jq插件

  1. select2 下拉框搜索插件
  1. datetimepicker 时间日期插件
  1. fullpage 全屏滚动插件
  1. lazyload 图片懒加载
  1. layer 弹窗插件
  1. nice validator 表单验证
  1. jQuery-easing

jq 自定义插件

//定义插件
$.fn.scrollList=function(options){...}
//调用插件
$('#wrapList').scrollList({...})

//给jqdom对象扩展方法
$.fn.extend({
    changeRed:function(){
        $(this).css('color','red');
    }
})

//给jq对象本身 扩展方法
$.extend({
    sayHello:function(name){
        console.log('hello; ',name);
    }
})

jQuery UI

jQueryMobile

Sizzle

Zepto

原理

  1. 传入‘’ null undefined NaN 0 faLse,返回空的jq对象
  2. 传入字符串:
    1. 代码片段:会将创建好的dom元素存储到jq对象中返回
    2. 选择器:会将找到的所有元素存储到jq对象中返回
  3. 传入数组:会将数组中存储的元素依次存储到jq对象中返回
  4. 其他:会将传入的数据存储到jq对象中返回
(function(w,undefined){
//工厂
function jQuery(selector,context){
    return new jQuery.fn.init(selector,context)
}
//给原型提供一个简写方式
jQuery.fn=jQuery.prototype={
    constructor: jQuery,
    length:0,
    toArray:function(){return slice.call(this)},
    each:function(){},
    map...
};
//init才是真正的构造函数
var init=jQuery.fn.init=function(selector,context){
...
};
//把构造函数的原型,替换成jq工厂的原型
//这么做是为了实现jq的插件机制,让外界可以通过jq方便的进行扩展
init.prototype=jQuery.fn;
w.jQuery=w.$=jQuery;
})(window)
上一篇 下一篇

猜你喜欢

热点阅读