• jquery基础知识学习笔记


    jquery是一个js库/常用版本是jjquery-1.7.2.js/这个版本主要是用来做开放用途
    做产品的时候是用它的min版本。玩jquery的时候,不管干啥都要花钱(美元)
     

    注意点:
    1.silbings('input');除了发生事件的那个元素的其他同级input兄弟元素 注意silblings要加上s
     
    2.jquery无法获取当前时间
     
    3.jquery对象和js对象混合操作的问题(阅读书籍解决)
     
    4.innerHTML=html(内容);
     
    5.is(":checked")是jq的方法判断元素是否被选择,返回布尔值
       
    6.jq没有定时器,只能写原生
     
    7.bind是绑定事件unbind是的解除绑定事件,一般上都是用不上的,因为,jq默认所有的事件都是绑定的状态,一般都用on代替的,因为on有事件委托的功能
     
    8.parent()查找结构父级元素     offsetParent()定位父级
     
    9.css('',value)一定要加引号
     
    10.$('img').size();计算文档中所有图片的数量
     
    11.一个元素绑定多个事件和多个函数
     $('#div1').on({'mouseover':function(){
     
            },'mousemove':function(){
     
           }});
     
    12.清空一个事件用off();
     
    13.jquery的阻止默认事件的方法
         return false               
         ev.preventDefault()
     
    14.$(this).find('span')     找到this下面的span

     
    .click(fn);
    .mouseover(fn);
    .mouseout(fn);
    .hover(fn1,fn2);
    .toggle(fn1,fn2,fn3.....);
    效果:
    .hide();     隐藏
    .show();     显示
    .animate({name:value,name:value});
    **前面必须加上stop()
     

    非常重要的:jquery和DOM对象的转换
            原生对象-》jquery对象         
    obj==>$(obj)
    jquery对象-》原生对象
    $('div')[下标]
    $().get(下标)

    jquery中的循环:
         jquery的循环
    $('div').each(function(index,element){
        index             下标
        element         每个原生对象
        this                每个原生对象
    });
    事件里面this         原生
    each里面this         原生
    jquery中所有的this都是原生的。
    但是有唯一的例外,插件中的this是jquery对象

    插件
    1.
    $.fn.函数名=function(){};
    2.
    $.fn.extend({
        函数name1:function(){},
        函数name2:function(){},
        函数name3:function(){}
    });
    例子:
    'use strict'
    $.fn.extend({
        cs:function(sName,sValue){
         //插件中的this是jquery对象
            this.css(sName,sValue);
        }
    });

    ★号是目前已经确定比较重要的知识点
    页面载入:用第一种是公司必须用的请记住
         1.$(document).ready.$(function(){});     这是主流常用的
         2.$(function(){});
    索引值:
         $('div').eq($(this).index())
    选择器:主要核心是和css的选择器相同
         ==元素选择==
      $('#id')                 id选择器
      $('.class')                  class选择器
    $('tagName')    标签选择器
         ==层级选择==
      $("div,span,p.myClass")     和选择
    $('#box ol .active input'); 层级选择器(找到什么下面的什么元素)
         ==同级选择==
    $("form > input")    匹配form中所有的子级input元素。
    $("label + input")    匹配所有跟在 label 后面的 input 元素
    $("form ~ input")    找到所有与表单同级的 input 元素
    ==伪类选择==
    $("li:eq(index)")    index是下标
    $('li:first');    获取匹配的第一个元素
    $('li:last');     获取匹配的最后一个元素
    $("input:not(:checked)")    查找所有未选中的 input 元素
    $("li:even")    选择奇数行
    $('li:odd')        选择偶数行
    $(":header").css("background", "#EEE");    给页面内所有标题加上背景色
    $("#login:focus");    页面加载后id为login 的设置焦点
    $("div:has(p)").addClass("test");    给所有包含 p 元素的 div 元素添加一个 text 类
    ==属性选择器==
    $("input[name='newsletter']").attr("checked", true);查找所有 name 属性是 newsletter 的 input 元素

    操作css
    .css(name);                                        获取
    .css(name,value);                               修改一个
    .css({name:value,name:value});         批量修改
     

     
     
    操作属性
    .attr(name);                                     获取
    .attr(name,value);                           修改一个
    .attr({name:value,name:value});      批量修改
    $("img").removeAttr("src");          要删除的属性名
    禁用和选中所有页面上的复选框。
    $("input[type='checkbox']").prop("disabled", false);
    $("input[type='checkbox']").prop("checked", true);
    操作class
    .addClass()
    .removeClass()
            $("p").removeClass("selected");从匹配的元素中删除 'selected' 类

    操作内容
    表单元素(相当于是value)
    .val()         获取
    .val('a')     设置
    .val('')       清空
    非表单元素(相当于innerHTML)
    .html()        获取
    .html('a')    设置
    .html('')      清空

    DOM操作:
    创建元素:
         $('<div>创建了一个div标签</div>')
    2.插入元素
        appendTo         内部后面
         $('<div><strong>abc</strong></div>').appendTo($('div'));
        prependTo        内部前面
        insertAfter        外部后面
        insertBefore      外部前面
    3.删除元素
            $().remove();
            $("p").detach();从DOM中把所有段落删除
    4.获取父节点
    $().parent();             找结构父级
    $().offsetParent();     找定位父级
    5.克隆
         $("b").clone().prependTo("p");克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中
     
    6.获取位置                 js                   jquery
    定位父级位置             offset             position注意,要定位
    绝对位置                  getPos             offset     绝对位置
     
    7.获取尺寸
    width()/height()                           单纯的宽高
    innerWidth()/innerHeight()         宽高+padding
    outerWidth()/outerHeight()         盒子模型的宽高

    事件ev:jquery中的ev已经是兼容后的
    事件绑定
    *jquery中所有的事件都是默认绑定上去的。
    bind     事件都是绑定好的所以用处不大
    unbind
    事件委托:
         on('事件名',fn)委托绑定事件
         off('事件名',fn)取消绑定委托事件
  • 相关阅读:
    python selenium启动配置
    pyqt5安装 + pycharm配置
    Python redis 存取使用
    pycharm 打不开 解决办法
    Python 将图片上传至阿里云OSS对象存储
    mysql表中已有数据,为表新增一个自增id。
    Python 使用BrowserMob Proxy + Selenium 获取Ajax加密数据
    Pycharm 2020.01亲测激活到2089年
    Python3 执行JS出现JSON未定义问题
    pycharm激活,此方法为永久激活。
  • 原文地址:https://www.cnblogs.com/sweeeper/p/6106276.html
Copyright © 2020-2023  润新知