添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
$("li:first").css('background','red'); //第一个 $("li:last").css('background','green'); //最后一个
  • 分手应该体面
  • 分手应该体面
  • 分手应该体面
  • 筛选选择器

    <meta charset="UTF-8"> <title>基本过滤选择器</title> </head> <div id="box"> <p class="p1"> <span>我是第一个span标签</span> <span>我是第二个span标签</span> <span>我是第三个span标签</span> <button>按钮</button> <li class="list">2</li> <li>3</li> <li>4</li> <li>5</li> </body> <script src="js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function() { //获取第n个元素 数值从0开始 $('span').eq(1).css('color', '#FF0000'); //获取第一个元素 :first :last 点语法 :get方法 和set方法 $('span').last().css('color', 'greenyellow'); $('span').first().css('color', 'greenyellow'); //查找span标签的父元素(亲的) $('span').parent('.p1').css({ "width": '200px', 'height': '200px', "background": 'red' //选择所有的兄弟元素(不包括自己) $('.list').siblings('li').css('color', 'red'); //查找所有的后代元素 $('div').find('button').css('background', 'yellow'); //不写参数代表获取所有子元素。 $('ul').children().css("background", "green"); $('ul').children("li").css("margin-top", 10); </script> </html>

    jQuery的属性操作

    上方代码中,关键的地方在于,用了stop函数,再执行动画前,先停掉之前的动画。

    jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作

    html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()

    DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()

    类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()

    值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()

    对html属性操作

    attr()

    设置属性值或者 返回被选元素的属性值

    	//获取值:attr()设置一个属性值的时候 只是获取值
    var id = $('div').attr('id')
    console.log(id)
    var cla = $('div').attr('class')
    console.log(cla)
    //设置值
    //1.设置一个值 设置div的class为box
    $('div').attr('class','box')
    //2.设置多个值,参数为对象,键值对存储
    $('div').attr({name:'hahaha',class:'happy'})
    
    removeAttr()
    //删除单个属性
    $('#box').removeAttr('name');
    $('#box').removeAttr('class');
    //删除多个属性
    $('#box').removeAttr('name class');
    
    prop()

    prop() 方法设置或返回被选元素的属性和值。

    当该方法用于返回属性值时,则返回第一个匹配元素的值。

    当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

    返回属性的值:

      
    $(selector).prop(property)

    设置属性和值:

      
    $(selector).prop(property,value)

    设置多个属性和值:

      $(selector).prop({property:value, property:value,...})
    关于attr()和prop()的区别
    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
        男<input type="radio" id='test' name="sex"  checked/>
        女<input type="radio" id='test2' name="sex" />
        <button>提交</button>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
            $(function(){
                //获取第一个input
                var el = $('input').first();
                //undefined  因为attr是获取的这个对象属性节点的值,很显然此时没有这个属性节点,自然输出undefined
                console.log(el.attr('style'));
                // 输出CSSStyleDeclaration对象,对于一个DOM对象,是具有原生的style对象属性的,所以输出了style对象
                console.log(el.prop('style'));
                console.log(document.getElementById('test').style);
                $('button').click(function(){
                    alert(el.prop("checked") ? "男":"女");
        </script>
    </body>
    </html>
    
    什么时候使用attr(),什么时候使用prop()?

    1.是有true,false两个属性使用prop();

    2.其他则使用attr();

    对标签class的操作

    addClass(添加多个类名)

    为每个匹配的元素添加指定的类名。

      
    $('div').addClass("box");//追加一个类名到原有的类名

    还可以为匹配的元素添加多个类名

      
    $('div').addClass("box box2");//追加多个类名
    removeClass

    从所有匹配的元素中删除全部或者指定的类。

    移除指定的类(一个或多个)

      
    $('div').removeClass('box')

    移除全部的类

      
    $('div').removeClass();

    可以通过添加删除类名,来实现元素的显示隐藏

    代码如下:

    var tag  = false;
        $('span').click(function(){
            if(tag){
                $('span').removeClass('active')
                tag=false;
            }else{
                $('span').addClass('active')
                tag=true;
    

    代码如下:

    <html lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .active{
                color: red;
        </style>
    </head>
             <li class="item">张三</li>
             <li class="item">李四</li>
             <li class="item">王五</li>
         <script type="text/javascript" src="jquery-3.3.1.js"></script>
         <script type="text/javascript">
             $(function(){
                 $('ul li').click(function(){
                     // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                     $(this).addClass('active').siblings('li').removeClass('active');
         </script>
    </body>
    </html>
    
    toggleClass

    如果存在(不存在)就删除(添加)一个类。

    语法:toggleClass('box')

    $('span').click(function(){
        //动态的切换class类名为active
        $(this).toggleClass('active')
    

    对值的操作

    html()

    html() 是获取选中标签元素中所有的内容

    $('#box').html();
    

     设置值:设置该元素的所有内容 会替换掉 标签中原来的内容

    $('#box').html('<a href="https://www.baidu.com">百度一下</a>');
    
    text()

    text() 获取匹配元素包含的文本内容

    $('#box').text();
    设置该所有的文本内容
    $('#box').text('<a href="https://www.baidu.com">百度一下</a>');
    注意:值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
    
    val()

    val()用于表单控件中获取值,比如input textarea select等等

    $('input').val('设置了表单控件中的值');
    
    获取input value
    <html lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
            <input type="radio" name="sex" checked=""> 女
            <input type="radio" name="sex">
            <select>
                <option >张三</option>
                <option text='test'>李四</option>
                <option>王五</option>
            </select>
        </form>
        <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
        <script type="text/javascript">
        $(function() {
        	// $('input[type=radio]').get(1).checked = true;
    	//设置value=2的项目为当前选中项 
    	$("input[type=radio]").eq(1).attr("checked",true);
            $('input[type=radio]').change(function(event) {
                /* Act on the event */
                // console.log($(this).select());
                console.log($(this).select().prop('checked'));
                var item = $("input[type=radio]:checked").val();
                console.log(item);
                // 获取select被选中项的文本
                var item2 = $("select option[selected]").text();
                console.log(item2);
            $('select').change(function() {
            	   console.log($(this).val());
                //1.获取选中项的值
                console.log($('select'));
                // 2.获取选中项的文本
                console.log($("select option:selected").text());
                // 或者
                console.log($("select").find("option:selected").text());
                // 3.获取选中项的索引
                console.log($("select").get(0).selectedIndex);
              // 设置值: 两种方式设置值
              $("select option").get(1).selected = true;
              $("select").get(0).selectedIndex = 2;
        </script>
    </body>
    </html>
    

    对DOM文档的操作

    一.插入操作

    知识点1:父子之间
    1.在元素内部添加,从后面放
    父元素.append(子元素)
    子元素.appendTo(父元素)
    2.在元素内部添加,从前面放入 父元素.prepend(子元素); 子元素.prependTo(父元素);
    <div class="box1">box1</div> <div class="box"> <li>YY</li> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ var oP = document.createElement('p'); oP.innerText = '女朋友'; oP.id = 'tt' // 1.父子之间 父.append(子) 子.appendTo(父) // 子元素 : 可以是 一个string 、jsDOM对象 、jquery对象 $('.box').append('alex');//可以插入普通的文本 $('.box').append('<h2>yy</h2>');//可以插入标签+文本 $('.box').append(oP); //插入一个jsDom对象 $('.box').append($('.box1')); //如果插入的是一个jquery对象 相当于是一个移动操作 $('<p>xx</p>').appendTo('.box').click(function(event) { $(this).css({ width:100, height:100, backgroundColor:'red' }).text('zz'); // prepend() prependTo() //1. prepend() 插入 子级的第一个元素 $('ul').prepend('<li>WW</li>'); $('<li>XX</li>').prependTo('ul').click(function() { alert(this.innerText); // jquery有链式编程 简化我们的代码 </script> </body>
    知识点2:兄弟之间
    兄弟元素.after(要插入的兄弟元素);
    要插入的兄弟元素.inserAfter(兄弟元素);
    兄弟元素.before(要插入的兄弟元素);
    要插入的兄弟元素.inserBefore(兄弟元素);
    <li class="item">alex</li> <script type="text/javascript" src="js/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function() { // es6的模板字符串 tab键 上面那个符号 反引号 ``,使用${变量名} 插入变量 var title = "百度"; $('.item').after(`<li> <a href="#">${title}</a> </li>`); $('<li>wusir</li>').insertAfter('.item'); // before var title1 = "小米"; $('.item').before(`<li> <a href="#">${title1}</a> </li>`); $('<li>XX</li>').insertBefore('.item'); </script> </body>

    二、替换操作

    $(selector).replaceWith(content);
    //将所有匹配的元素替换成指定的string、js对象、jquery对象。
    //将所有的h5标题替换为a标签
    $('h5').replaceWith('<a href="#">hello world</a>');
    //将所有h5标题标签替换成id为app的dom元素
    $('h5').replaceWith($('#app'));
    $('<p>哈哈哈</p>').replaceAll('h2');
    解释:替换所有。将所有的h2标签替换成p标签。

    三、删除操作

    $(selector).remove(); 
    解释:删除节点后,事件也会删除(简言之,删除了整个标签)
    $('ul').remove();
    $(selector).detach(); 
    解释:删除节点后,事件会保留
     var $btn = $('button').detach()
     //此时按钮能追加到ul中
     $('ul').append($btn)
    <div class="box"> <p style="font-size: 20px;font-weight: 600;">alex</p> <button>删除</button> <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> $(function() { $('button').click(function() { alert(1); // remove() 删除节点后 事件也会删除 删除了整个标签 // console.log($(this).remove()); // var jqBtn = $(this).remove(); // $('.box').prepend(jqBtn); // detach() 删除节点后 事件会保留 // var jqBtn = $(this).detach(); // $('.box').prepend(jqBtn); $('.box').empty(); </script> </body>